{"id":38603,"date":"2023-03-12T05:02:36","date_gmt":"2023-04-19T15:32:41","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e6%ac%a2%e8%bf%8e%e5%88%9d%e5%ad%a6%e8%80%85%f0%9f%94%b0%e3%80%91%e4%bd%bf%e7%94%a8next-js%e6%9e%84%e5%bb%ba%e8%b4%ad%e7%89%a9%e7%bd%91%e7%ab%99%f0%9f%9b%92\/"},"modified":"2024-04-29T18:31:28","modified_gmt":"2024-04-29T10:31:28","slug":"%e3%80%90%e6%ac%a2%e8%bf%8e%e5%88%9d%e5%ad%a6%e8%80%85%f0%9f%94%b0%e3%80%91%e4%bd%bf%e7%94%a8next-js%e6%9e%84%e5%bb%ba%e8%b4%ad%e7%89%a9%e7%bd%91%e7%ab%99%f0%9f%9b%92","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e6%ac%a2%e8%bf%8e%e5%88%9d%e5%ad%a6%e8%80%85%f0%9f%94%b0%e3%80%91%e4%bd%bf%e7%94%a8next-js%e6%9e%84%e5%bb%ba%e8%b4%ad%e7%89%a9%e7%bd%91%e7%ab%99%f0%9f%9b%92\/","title":{"rendered":"\u3010\u6b22\u8fce\u521d\u5b66\u8005\ud83d\udd30\u3011\u4f7f\u7528Next.js\u6784\u5efa\u8d2d\u7269\u7f51\u7ad9\ud83d\uded2"},"content":{"rendered":"<h1>\u8fd9\u6b21\u7684\u4f5c\u54c1<\/h1>\n<p>&nbsp;<\/p>\n<h2>GitHub\u7684\u4ed3\u5e93<\/h2>\n<p>&nbsp;<\/p>\n<h2>\u5b9e\u65bd\u529f\u80fd<\/h2>\n<ul class=\"post-ul\">\u5546\u54c1\u4e00\u89a7\u3092\u8868\u793a(Top\u753b\u9762)<\/ul>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d356a37434c4406c6c81a\/6-0.gif\" alt=\"Image from Gyazo\" \/><\/div>\n<ul class=\"post-ul\">\u30ed\u30b0\u30a4\u30f3\u30fb\u30ed\u30b0\u30a2\u30a6\u30c8\u6a5f\u80fd(Contact\u753b\u9762)<\/ul>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d356a37434c4406c6c81a\/8-0.gif\" alt=\"Image from Gyazo\" \/><\/div>\n<ul class=\"post-ul\">\u30ab\u30fc\u30c8\u306b\u8ffd\u52a0(Cart\u753b\u9762)<\/ul>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d356a37434c4406c6c81a\/10-0.gif\" alt=\"Image from Gyazo\" \/><\/div>\n<ul class=\"post-ul\">\u5c0f\u8a08\uff06\u5408\u8a08\u91d1\u984d\u306e\u8868\u793a(Cart\u753b\u9762)<\/ul>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d356a37434c4406c6c81a\/12-0.gif\" alt=\"Image from Gyazo\" \/><\/div>\n<h2>\u501f\u9274\u7684\u89c6\u9891<\/h2>\n<p>&nbsp;<\/p>\n<h2>\u8bf7\u7559\u610f\u4e8b\u9879\u3002<\/h2>\n<div>\n<p>\u5f00\u53d1\u73af\u5883<\/p>\n<p>\u64cd\u4f5c\u7cfb\u7edf: windows10<br \/>\n\u7f16\u8f91\u5668: VScode<br \/>\n\u7ec8\u7aef: Bash<br \/>\nnode.js\u7248\u672c: v18.17.0<\/p>\n<\/div>\n<div>\u8fd9\u6b21\u6211\u4eec\u4ee5\u521d\u5b66\u8005\u4e3a\u4e3b\u8981\u5bf9\u8c61\uff0c\u6240\u4ee5\u6211\u4eec\u4f7f\u7528JavaScript\u800c\u4e0d\u662fTypeScript\u8fdb\u884c\u7f16\u5199\u3002<br \/>\n\uff08\u5982\u679c\u4f60\u719f\u6089TypeScript\uff0c\u8bf7\u52a1\u5fc5\u5c1d\u8bd5\u4f7f\u7528TypeScript\u8fdb\u884c\u7f16\u5199\uff01\uff09<\/div>\n<div>\u4e3a\u4e86\u5c06\u91cd\u70b9\u653e\u5728Next.js\u7684\u903b\u8f91\u90e8\u5206\u4e0a\uff0c\u6211\u4eec\u7701\u7565\u4e86\u5bf9\u8bbe\u8ba1\u90e8\u5206\u7684\u8bf4\u660e\u3002<br \/>\nCSS\u7684\u4ee3\u7801\u5982\u4e0b\u6240\u793a\uff1a<br \/>\nCSS\u7684\u4ee3\u7801sample.css<br \/>\nh1 {<br \/>\ncolor:red;<br \/>\n}<\/p>\n<\/div>\n<h1>\u6b65\u9aa41\uff1a\u5728Vercel\u4e0a\u914d\u7f6e\u90e8\u7f72\u73af\u5883\u3002<\/h1>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d356a37434c4406c6c81a\/20-0.png\" alt=\"image.png\" \/><\/div>\n<h3>\u5728\u7ec8\u7aef\u4e2d\u8fd0\u884c npx create-next-app<\/h3>\n<p>\u8a2d\u5b9a\u5df2\u6309\u7167\u4ee5\u4e0b\u65b9\u5f0f\u9032\u884c\u3002<br \/>\n\u9019\u6b21\u6211\u5011\u5c07\u5275\u5efasrc\u6587\u4ef6\u593e\u3002<\/p>\n<pre class=\"post-pre\"><code>\u221a What is your project named? ... shopping-cart\r\n\u221a Would you like to use TypeScript? ... No\r\n\u221a Would you like to use ESLint? ... Yes\r\n\u221a Would you like to use Tailwind CSS? ... No\r\n\u221a Would you like to use <span class=\"sb\">`<\/span>src\/<span class=\"sb\">`<\/span> directory? ... Yes\r\n\u221a Would you like to use App Router? <span class=\"o\">(<\/span>recommended<span class=\"o\">)<\/span> \u00bb Yes\r\n\u221a Would you like to customize the default import <span class=\"nb\">alias<\/span> <span class=\"o\">(<\/span>@\/<span class=\"k\">*<\/span><span class=\"o\">)<\/span>? \u00bb No\r\n<\/code><\/pre>\n<h3>\u901a\u8fc7Vercel\u767b\u5f55<\/h3>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d356a37434c4406c6c81a\/25-0.png\" alt=\"image.png\" \/><\/div>\n<h3>\u521b\u5efa\u4e00\u4e2a\u65b0\u9879\u76ee<\/h3>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d356a37434c4406c6c81a\/27-0.png\" alt=\"image.png\" \/><\/div>\n<h3>\u5c06Github\u4e0e\u5176\u4ed6\u670d\u52a1\u8fdb\u884c\u6574\u5408<\/h3>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d356a37434c4406c6c81a\/29-0.png\" alt=\"image.png\" \/><\/div>\n<h3>\u5efa\u7b51\u4f1a\u81ea\u52a8\u5f00\u59cb\u3002<\/h3>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d356a37434c4406c6c81a\/31-0.png\" alt=\"image.png\" \/><\/div>\n<h1>\u6b65\u9aa42\uff1a\u8bbe\u7f6e\u5e94\u7528\u7a0b\u5e8f\u8def\u7531\u914d\u7f6e<\/h1>\n<p>\u5728app\u6587\u4ef6\u5939\u7684\u6839\u76ee\u5f55\u4e0b\u521b\u5efa\u6bcf\u4e2a\u9875\u9762\u7684\u6587\u4ef6\u5939\u3002<br \/>\n\u672c\u6b21\u521b\u5efacart\u9875\u9762\u548ccontact\u9875\u9762\u3002<br \/>\n\u5728\u6bcf\u4e2a\u9875\u9762\u7684\u6839\u76ee\u5f55\u4e0b\u521b\u5efapage.jsx\u6587\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code>\u2514\u2500app\r\n    \u2502  favicon.ico\r\n    \u2502  globals.css\r\n    \u2502  layout.js\r\n    \u2502  page.js\r\n    \u2502\r\n    \u251c\u2500cart\r\n    \u2502      page.jsx\r\n    \u2502\r\n    \u2514\u2500contact\r\n            page.jsx\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">Cart<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"k\">return<\/span> <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>Cart<span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;;<\/span>\r\n<span class=\"p\">};<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Cart<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">Contact<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"k\">return<\/span> <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>Contact<span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;;<\/span>\r\n<span class=\"p\">};<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Contact<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<p>\u5728\u4e2d\u6587\u4e2d\u4ee5\u539f\u751f\u65b9\u5f0f\u6539\u8ff0\uff1a<br \/>\n\u8fd0\u884c npm run dev \u6765\u542f\u52a8\u670d\u52a1\u5668\uff0c<br \/>\n\u8bbf\u95ee http:\/\/localhost:3000\/cart\uff0c\u5982\u679c\u663e\u793a &#8220;Cart&#8221; \u5c31\u8868\u793a\u6b63\u5e38\uff01<br \/>\n\uff08\u4e3a\u4e86\u786e\u4fdd\uff0c\u8bbf\u95ee http:\/\/localhost:3000\/contact\uff0c\u68c0\u67e5\u662f\u5426\u663e\u793a &#8220;Contact&#8221;\uff09<\/p>\n<h3>\u5bfc\u822a\u8bbe\u7f6e<\/h3>\n<p>\u521b\u5efa\u4e00\u4e2acomponents\u6587\u4ef6\u5939\uff0c\u5e76\u521b\u5efanavbar.jsx\u548cnavbar.css\u3002<\/p>\n<pre class=\"post-pre\"><code>\u2514\u2500app\r\n    \u251c\u2500cart\r\n    \u251c\u2500components\r\n    \u2502      navbar.css\r\n    \u2502      navbar.jsx  \r\n    \u2514\u2500contact\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">Link<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next\/link<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/navbar.css<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">function<\/span> <span class=\"nf\">Navbar<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"navbar\"<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"links\"<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Link<\/span> <span class=\"na\">href<\/span><span class=\"p\">=<\/span><span class=\"s\">\"\/\"<\/span><span class=\"p\">&gt;<\/span>Shop<span class=\"p\">&lt;\/<\/span><span class=\"nc\">Link<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Link<\/span> <span class=\"na\">href<\/span><span class=\"p\">=<\/span><span class=\"s\">\"\/contact\"<\/span><span class=\"p\">&gt;<\/span>Contact<span class=\"p\">&lt;\/<\/span><span class=\"nc\">Link<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Link<\/span> <span class=\"na\">href<\/span><span class=\"p\">=<\/span><span class=\"s\">\"\/cart\"<\/span><span class=\"p\">&gt;<\/span>Cart<span class=\"p\">&lt;\/<\/span><span class=\"nc\">Link<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">);<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Navbar<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<p>\u203bCSS\u7684\u4ee3\u7801\u88ab\u6298\u53e0\u4e86\u3002<\/p>\n<details>\u5bfc\u822a\u680f.css\u7ec4\u4ef6\/\u5bfc\u822a\u680f.css<br \/>\n.\u5bfc\u822a\u680f {<br \/>\n\u5bbd\u5ea6: 100%;<br \/>\n\u9ad8\u5ea6: 80\u50cf\u7d20;<br \/>\n\u80cc\u666f\u989c\u8272: rgb(19, 19, 19);<br \/>\n\u663e\u793a: \u5f39\u6027;<br \/>\n\u4e3b\u5bf9\u9f50\u65b9\u5f0f: \u5f39\u6027\u7ed3\u675f;<br \/>\n\u7eb5\u5411\u5bf9\u9f50\u65b9\u5f0f: \u5c45\u4e2d;<br \/>\n}<\/p>\n<p>.\u94fe\u63a5 {<br \/>\n\u53f3\u8fb9\u8ddd: 50\u50cf\u7d20;<br \/>\n\u663e\u793a: \u5f39\u6027;<br \/>\n\u7eb5\u5411\u5bf9\u9f50\u65b9\u5f0f: \u5c45\u4e2d;<br \/>\n}<\/p>\n<p>.\u94fe\u63a5 a {<br \/>\n\u6587\u5b57\u88c5\u9970: \u65e0;<br \/>\n\u989c\u8272: \u767d\u8272;<br \/>\n\u5de6\u8fb9\u8ddd: 20\u50cf\u7d20;<br \/>\n\u5b57\u4f53\u5927\u5c0f: 25\u50cf\u7d20;<br \/>\n}<\/p>\n<\/details>\n<h3>\u5728src\/app\/layout.js\u4e2d\u6dfb\u52a0navbar\u7ec4\u4ef6<\/h3>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Inter<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next\/font\/google<\/span><span class=\"dl\">'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/globals.css<\/span><span class=\"dl\">'<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span><span class=\"k\">import<\/span> <span class=\"nx\">Navbar<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/components\/navbar<\/span><span class=\"dl\">'<\/span>\r\n<\/span>\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">inter<\/span> <span class=\"o\">=<\/span> <span class=\"nc\">Inter<\/span><span class=\"p\">({<\/span> <span class=\"na\">subsets<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">latin<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span> <span class=\"p\">})<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">metadata<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Create Next App<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Generated by create next app<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">RootLayout<\/span><span class=\"p\">({<\/span> <span class=\"nx\">children<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">html<\/span> <span class=\"na\">lang<\/span><span class=\"p\">=<\/span><span class=\"s\">\"en\"<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">body<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">inter<\/span><span class=\"p\">.<\/span><span class=\"nx\">className<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\r\n<span class=\"hil\">+        <span class=\"p\">&lt;<\/span><span class=\"nc\">Navbar<\/span> <span class=\"p\">\/&gt;<\/span>\r\n<\/span>        <span class=\"si\">{<\/span><span class=\"nx\">children<\/span><span class=\"si\">}<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">body<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">html<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h1>\u7b2c\u4e09\u6b65-\u521b\u5efa\u4e3b\u9875\u754c\u9762<\/h1>\n<p>\u8fd9\u6b21\uff0c\u6211\u4eec\u5c06\u4f7f\u7528\u4ee5\u4e0b\u514d\u8d39\u7684API\u6765\u83b7\u53d6\u5546\u54c1\u6570\u636e\u3002<\/p>\n<p>&nbsp;<\/p>\n<p>\u8bf7\u4e0d\u8981\u5fd8\u8bb0\u5728\u5f00\u5934\u52a0\u4e0a&#8221;use client&#8221;\uff01\u5982\u679c\u8981\u4f7f\u7528useEffect\u548cuseState\u7b49Hooks\uff0c\u9700\u8981\u8fdb\u884cCSR\uff08\u5ba2\u6237\u7aef\u6e32\u67d3\uff09\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">function<\/span> <span class=\"nf\">Shop<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">items<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setItems<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">([]);<\/span>\r\n\r\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">https:\/\/fakestoreapi.com\/products<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\r\n      <span class=\"p\">.<\/span><span class=\"nf\">then<\/span><span class=\"p\">((<\/span><span class=\"nx\">res<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">res<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">())<\/span>\r\n      <span class=\"p\">.<\/span><span class=\"nf\">then<\/span><span class=\"p\">((<\/span><span class=\"nx\">json<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">json<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"nf\">setItems<\/span><span class=\"p\">(<\/span><span class=\"nx\">json<\/span><span class=\"p\">);<\/span>\r\n      <span class=\"p\">});<\/span>\r\n  <span class=\"p\">},<\/span> <span class=\"p\">[]);<\/span>\r\n\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"shop\"<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"shopTitle\"<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>E-commerce Shop<span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"products\"<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"si\">{<\/span><span class=\"nx\">items<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">item<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\r\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">key<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\r\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">price<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">category<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">description<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">img<\/span> <span class=\"na\">src<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">image<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\r\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">))<\/span><span class=\"si\">}<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">);<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Shop<\/span><span class=\"p\">;<\/span>\r\n\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"hil\"><span class=\"o\">+ <\/span><span class=\"k\">import<\/span> <span class=\"nx\">Shop<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/components\/shop<\/span><span class=\"dl\">'<\/span>\r\n<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">Home<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">main<\/span><span class=\"p\">&gt;<\/span>\r\n<span class=\"hil\">+      <span class=\"p\">&lt;<\/span><span class=\"nc\">Shop<\/span> <span class=\"p\">\/&gt;<\/span>\r\n<\/span>    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">main<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h1>\u5bf9Step4 Home\u753b\u9762\u8fdb\u884c\u98ce\u683c\u8bbe\u8ba1\u3002<\/h1>\n<p>\u5728\u4e3b\u9875\u4e0a\u5e94\u7528CSS\u5e76\u8c03\u6574\u5e03\u5c40\u3002<br \/>\n\u5728shop.jsx\u4e2d\u6dfb\u52a0className\uff0c\u5e76\u5728CSS\u4e2d\u8fdb\u884c\u5b9a\u4e49\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span><span class=\"k\">import<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/shop.css<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span>\r\n<span class=\"kd\">function<\/span> <span class=\"nf\">Shop<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">items<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setItems<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">([]);<\/span>\r\n\r\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">https:\/\/fakestoreapi.com\/products<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\r\n      <span class=\"p\">.<\/span><span class=\"nf\">then<\/span><span class=\"p\">((<\/span><span class=\"nx\">res<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">res<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">())<\/span>\r\n      <span class=\"p\">.<\/span><span class=\"nf\">then<\/span><span class=\"p\">((<\/span><span class=\"nx\">json<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">json<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"nf\">setItems<\/span><span class=\"p\">(<\/span><span class=\"nx\">json<\/span><span class=\"p\">);<\/span>\r\n      <span class=\"p\">});<\/span>\r\n  <span class=\"p\">},<\/span> <span class=\"p\">[]);<\/span>\r\n\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"shop\"<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"shopTitle\"<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>E-commerce Shop<span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"products\"<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"si\">{<\/span><span class=\"nx\">items<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">item<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span>         <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">product<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>           <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">content<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>             <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">title<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>               <span class=\"p\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}.<\/span> <span class=\"p\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>             <span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>             <span class=\"o\">&lt;<\/span><span class=\"nx\">img<\/span> <span class=\"nx\">src<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">image<\/span><span class=\"p\">}<\/span> <span class=\"nx\">alt<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">image<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>             <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">price<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">$<\/span><span class=\"p\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">price<\/span><span class=\"p\">}&lt;<\/span><span class=\"err\">\/<\/span><span class=\"na\">p<\/span><span class=\"p\">&gt;<\/span>\r\n<\/span><span class=\"hil\">+              <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"description\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">description<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n<\/span><span class=\"hil\">+              <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"category\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">category<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n<\/span><span class=\"hil\">+            <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>           <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">addToCartBtn<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">ADD<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>         <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>        <span class=\"p\">))<\/span><span class=\"si\">}<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">);<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Shop<\/span><span class=\"p\">;<\/span>\r\n\r\n<\/code><\/pre>\n<details>\u5e97\u94fa\u7684CSS\u4ee3\u7801src\/app\/components\/shop.css<br \/>\n.shopTitle {<br \/>\nmargin-top: 100px;<br \/>\ntext-align: center;<br \/>\nfont-size: 40px;<br \/>\n}<\/p>\n<p>.products {<br \/>\nwidth: 100%;<br \/>\nheight: auto;<br \/>\nmargin: auto;<br \/>\ndisplay: grid;<br \/>\ngrid-template-columns: 1fr 1fr 1fr;<br \/>\nplace-items: start;<br \/>\n}<\/p>\n<p>.product {<br \/>\nborder-radius: 15px;<br \/>\nwidth: 300px;<br \/>\nheight: fit-content;<br \/>\nmargin: 50px auto;<br \/>\ndisplay: flex;<br \/>\nflex-direction: column;<br \/>\njustify-content: center;<br \/>\nalign-items: center;<br \/>\n}<\/p>\n<p>.content {<br \/>\ndisplay: flex;<br \/>\nflex-direction: column;<br \/>\njustify-content: flex-start;<br \/>\nmargin-bottom: 10px;<br \/>\n}<\/p>\n<p>.image {<br \/>\nmax-width: 100%;<br \/>\nmax-height: 300px;<br \/>\nobject-fit: contain;<br \/>\ntransition: 0.3s;<br \/>\nmargin: 50px auto;<br \/>\n}<\/p>\n<p>.title {<br \/>\nfont-size: 1.2em;<br \/>\nfont-weight: bold;<br \/>\n}<\/p>\n<p>.content {<br \/>\ntext-align: center;<br \/>\n}<\/p>\n<p>.description {<br \/>\nfont-style: italic;<br \/>\nfont-size: 0.8em;<br \/>\nmargin: 15px auto;<br \/>\ntext-align: left;<br \/>\n}<\/p>\n<p>.price {<br \/>\nfont-weight: bold;<br \/>\nfont-size: 2em;<br \/>\n}<\/p>\n<p>.category {<br \/>\nbackground-color: darkblue;<br \/>\ncolor: white;<br \/>\nborder-radius: 100px;<br \/>\nwidth: fit-content;<br \/>\npadding: 2px 10px;<br \/>\n}<\/p>\n<p>.image:hover {<br \/>\ntransform: scale(1.2);<br \/>\nposition: relative;<br \/>\n}<\/p>\n<p>.product:hover {<br \/>\ntransition: 0.3s ease-in;<br \/>\n}<\/p>\n<p>.title:hover,<br \/>\n.image:hover {<br \/>\ncursor: pointer;<br \/>\n}<\/p>\n<p>.addToCartBtn {<br \/>\nbackground-color: transparent;<br \/>\nborder: 2px solid rgb(19, 19, 19);<br \/>\nmin-width: 100px;<br \/>\npadding-left: 10px;<br \/>\npadding-right: 10px;<br \/>\npadding-top: 5px;<br \/>\npadding-bottom: 5px;<br \/>\nborder-radius: 15px;<br \/>\ntransition: 0.3s;<br \/>\n}<\/p>\n<p>.addToCartBtn:hover {<br \/>\nbackground-color: rgb(19, 19, 19);<br \/>\ncolor: white;<br \/>\ncursor: pointer;<br \/>\n}<\/p>\n<\/details>\n<h1>\u6b65\u9aa45\uff1a\u521b\u5efa\u8054\u7cfb\u9875\u9762<\/h1>\n<p>\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u8054\u7cfb\u9875\u9762\u3002<br \/>\n\u6839\u636e\u767b\u5f55\u72b6\u6001\uff0c\u4f7f\u7528 useState \u6765\u5207\u6362\u5c4f\u5e55\u663e\u793a\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/contact.css<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">Contact<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">username<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setUsername<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">password<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setPassword<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">isLogin<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setIsLogin<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\r\n\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleUsername<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nf\">setUsername<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"p\">};<\/span>\r\n\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handlePassword<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nf\">setPassword<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"p\">};<\/span>\r\n\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleLogin<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">username<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"\"<\/span> <span class=\"o\">||<\/span> <span class=\"nx\">password<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nf\">setIsLogin<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"p\">};<\/span>\r\n\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleLogout<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nf\">setUsername<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"nf\">setPassword<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"nf\">setIsLogin<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"p\">};<\/span>\r\n\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"wrapper\"<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"content\"<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"si\">{<\/span><span class=\"nx\">isLogin<\/span> <span class=\"p\">?<\/span> <span class=\"p\">(<\/span>\r\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"button\"<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handleLogout<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\r\n            logout\r\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"p\">(<\/span>\r\n          <span class=\"p\">&lt;&gt;<\/span>\r\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"input\"<\/span><span class=\"p\">&gt;<\/span>\r\n              \u30e6\u30fc\u30b6\u30fc\u540d:\r\n              <span class=\"p\">&lt;<\/span><span class=\"nt\">input<\/span>\r\n                <span class=\"na\">type<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text\"<\/span>\r\n                <span class=\"na\">name<\/span><span class=\"p\">=<\/span><span class=\"s\">\"username\"<\/span>\r\n                <span class=\"na\">id<\/span><span class=\"p\">=<\/span><span class=\"s\">\"username\"<\/span>\r\n                <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"username\"<\/span>\r\n                <span class=\"na\">onChange<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handleUsername<\/span><span class=\"si\">}<\/span>\r\n              <span class=\"p\">\/&gt;<\/span>\r\n            <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"input\"<\/span><span class=\"p\">&gt;<\/span>\r\n              \u30d1\u30b9\u30ef\u30fc\u30c9:\r\n              <span class=\"p\">&lt;<\/span><span class=\"nt\">input<\/span>\r\n                <span class=\"na\">type<\/span><span class=\"p\">=<\/span><span class=\"s\">\"password\"<\/span>\r\n                <span class=\"na\">name<\/span><span class=\"p\">=<\/span><span class=\"s\">\"password\"<\/span>\r\n                <span class=\"na\">id<\/span><span class=\"p\">=<\/span><span class=\"s\">\"password\"<\/span>\r\n                <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"password\"<\/span>\r\n                <span class=\"na\">onChange<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handlePassword<\/span><span class=\"si\">}<\/span>\r\n              <span class=\"p\">\/&gt;<\/span>\r\n            <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"button\"<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handleLogin<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\r\n              login\r\n            <span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\r\n          <span class=\"p\">&lt;\/&gt;<\/span>\r\n        <span class=\"p\">)<\/span><span class=\"si\">}<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">);<\/span>\r\n<span class=\"p\">};<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Contact<\/span><span class=\"p\">;<\/span>\r\n\r\n<\/code><\/pre>\n<details>\u4ee5\u4e0b\u662f\u539f\u751f\u4e2d\u6587\u7684\u91cd\u65b0\u8868\u8ff0\uff08\u4ec5\u4f9b\u53c2\u8003\uff09\uff1acontact.css<\/p>\n<p>src\/app\/contact\/contact.css<br \/>\n.wrapper {<br \/>\n\u663e\u793a\uff1aflex;<br \/>\n\u5bf9\u9f50\u9879\u76ee\uff1a\u5c45\u4e2d;<br \/>\n\u9ad8\u5ea6\uff1a90vh;<br \/>\n}<\/p>\n<p>.content {<br \/>\n\u5bbd\u5ea6\uff1a\u9002\u5e94\u5185\u5bb9;<br \/>\n\u8fb9\u8ddd\uff1a\u81ea\u52a8;<br \/>\n\u6587\u672c\u5bf9\u9f50\uff1a\u5c45\u4e2d;<br \/>\n}<\/p>\n<p>.input {<br \/>\n\u8fb9\u8ddd\uff1a10px \u81ea\u52a8;<br \/>\n}<\/p>\n<p>.username,<br \/>\n.password {<br \/>\n\u663e\u793a\uff1a\u5185\u8054\u5757;<br \/>\n\u5de6\u8fb9\u8ddd\uff1a5px;<br \/>\n\u586b\u5145\uff1a2.5\u50cf\u7d20 5\u50cf\u7d20;<br \/>\n}<\/p>\n<p>.button {<br \/>\n\u5b57\u91cd\uff1a\u7c97\u4f53;<br \/>\n\u586b\u5145\uff1a5\u50cf\u7d20;<br \/>\n}<\/p>\n<\/details>\n<h1>\u7b2c\u516d\u6b65 \u521b\u5efa\u8d2d\u7269\u8f66\u9875\u9762<\/h1>\n<p>\u6211\u5011\u5c07\u5275\u5efa\u8cfc\u7269\u8eca\u9801\u9762\u3002<br \/>\n\u9996\u5148\uff0c\u56e0\u70ba\u6211\u5011\u60f3\u8981\u8abf\u6574\u7248\u9762\uff0c\u6240\u4ee5\u66ab\u6642\u653e\u5165\u4e86\u5716\u50cf\u7b49\u8cc7\u6599\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/cart.css<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">Cart<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"cart\"<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\u30ab\u30fc\u30c8\u306e\u5546\u54c1<span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"cart\"<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"cartItem\"<\/span><span class=\"p\">&gt;<\/span>\r\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">img<\/span> <span class=\"na\">src<\/span><span class=\"p\">=<\/span><span class=\"s\">\"https:\/\/fakestoreapi.com\/img\/81fPKd-2AYL._AC_SL1500_.jpg\"<\/span> <span class=\"p\">\/&gt;<\/span>\r\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"description\"<\/span><span class=\"p\">&gt;<\/span>\r\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n              <span class=\"p\">&lt;<\/span><span class=\"nt\">b<\/span><span class=\"p\">&gt;<\/span>name<span class=\"p\">&lt;\/<\/span><span class=\"nt\">b<\/span><span class=\"p\">&gt;<\/span>\r\n            <span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>price<span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"countHandler\"<\/span><span class=\"p\">&gt;<\/span>\r\n              <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span> - <span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\r\n              <span class=\"p\">&lt;<\/span><span class=\"nt\">input<\/span> <span class=\"na\">value<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">1<\/span><span class=\"dl\">\"<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\r\n              <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span> + <span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\r\n            <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"checkout\"<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\u5c0f\u8a08: xxxx<span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\u8cb7\u3044\u7269\u3092\u7d9a\u3051\u308b<span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\u30c1\u30a7\u30c3\u30af\u30a2\u30a6\u30c8<span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">);<\/span>\r\n<span class=\"p\">};<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Cart<\/span><span class=\"p\">;<\/span>\r\n\r\n<\/code><\/pre>\n<details>cart.csssrc\/app\/cart\/cart.css<br \/>\n.cart {<br \/>\ndisplay: flex;<br \/>\nflex-direction: column;<br \/>\njustify-content: center;<br \/>\nalign-items: center;<br \/>\nmargin-top: 30px;<br \/>\n}<\/p>\n<p>.cartItem {<br \/>\nwidth: 700px;<br \/>\nheight: 250px;<br \/>\ndisplay: flex;<br \/>\nalign-items: center;<br \/>\nbox-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);<br \/>\nborder-radius: 25px;<br \/>\nmargin: 30px;<br \/>\npadding: 20px;<br \/>\n}<\/p>\n<p>.cartItem img {<br \/>\nwidth: 200px;<br \/>\nmax-height: 90%;<br \/>\nobject-fit: contain;<br \/>\n}<\/p>\n<p>.cartItem .description {<br \/>\nwidth: 100%;<br \/>\nfont-size: 30px;<br \/>\npadding-left: 20px;<br \/>\n}<\/p>\n<p>.cartItemTitle {<br \/>\nfont-weight: bold;<br \/>\nfont-size: 18px;<br \/>\nmargin-bottom: 10px;<br \/>\n}<\/p>\n<p>countHandler input {<br \/>\nwidth: 40px;<br \/>\ntext-align: center;<br \/>\nfont-weight: bolder;<br \/>\nmargin: 0 5px;<br \/>\n}<\/p>\n<p>countHandler button {<br \/>\npadding: 0 0.5em;<br \/>\n}<\/p>\n<p>subtotal {<br \/>\nmargin-top: 20px;<br \/>\nfont-size: 24px;<br \/>\n}<\/p>\n<p>total {<br \/>\nfont-size: 36px;<br \/>\n}<\/p>\n<p>checkout button {<br \/>\nwidth: 150px;<br \/>\nheight: 50px;<br \/>\nbackground-color: rgb(19, 19, 19);<br \/>\ncolor: white;<br \/>\nborder: none;<br \/>\nborder-radius: 8px;<br \/>\nmargin: 10px;<br \/>\ncursor: pointer;<br \/>\n}<\/p>\n<\/details>\n<h1>\u7b2c\u4e03\u6b65\u3010\u91cd\u8981\uff01\u3011\u4f7f\u7528useContext\u8fdb\u884c\u72b6\u6001\u7ba1\u7406\u3002<\/h1>\n<p>\u5728\u6e90\u6587\u4ef6\u5939\u7684\u76f4\u63a5\u4e0b\u65b9\u521b\u5efa\u4e00\u4e2a\u4e0a\u4e0b\u6587\u6587\u4ef6\u5939\uff0c<br \/>\n\u5e76\u521b\u5efa\u4e00\u4e2a\u540d\u4e3ashop-context.js\u7684\u6587\u4ef6\u3002<\/p>\n<div>\n<p>\u8bf7\u53c2\u8003\u4ee5\u4e0b\u6587\u7ae0\u4ee5\u83b7\u5f97\u6709\u5173useContext\u7684\u8be6\u7ec6\u4f7f\u7528\u65b9\u6cd5\uff01<\/p>\n<p>React Context\u7684\u4f7f\u7528\u65b9\u6cd5\uff08useContext\uff09<br \/>\n\u3010React Hooks\u3011useContext\u662f\u4ec0\u4e48\uff1f\u6982\u5ff5\u548c\u4f7f\u7528\u65b9\u6cd5\u7684\u8be6\u7ec6\u89e3\u91ca\uff01<\/p>\n<\/div>\n<pre class=\"post-pre\"><code> \u2514\u2500src\r\n     \u251c\u2500app\r\n     \u2502  \u251c\u2500cart\r\n     \u2502  \u251c\u2500components\r\n<span class=\"gi\">+    \u2502  \u2514\u2500contact\r\n<\/span>     \u2514\u2500context\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">createContext<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"c1\">\/\/ \u30b0\u30ed\u30fc\u30d0\u30eb\u306aprops\u3092\u5b9a\u7fa9\u3057\u3001\u521d\u671f\u5024\u3092\u6e21\u3059<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">ShopContext<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createContext<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\r\n\r\n<span class=\"c1\">\/\/ \u30ab\u30fc\u30c8\u5185\u306e\u5546\u54c1\u306e\u521d\u671f\u72b6\u614b\u3092\u751f\u6210<\/span>\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">getDefaultCart<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">productsLength<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">20<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"kd\">let<\/span> <span class=\"nx\">cart<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{};<\/span>\r\n  <span class=\"k\">for <\/span><span class=\"p\">(<\/span><span class=\"kd\">let<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">&lt;<\/span> <span class=\"nx\">productsLength<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nx\">cart<\/span><span class=\"p\">[<\/span><span class=\"nx\">i<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"p\">}<\/span>\r\n  <span class=\"k\">return<\/span> <span class=\"nx\">cart<\/span><span class=\"p\">;<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">ShopContextProvider<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">cartItems<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setCartItems<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"nf\">getDefaultCart<\/span><span class=\"p\">());<\/span>\r\n\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">getTotalCartAmount<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kd\">let<\/span> <span class=\"nx\">totalAmount<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"k\">for <\/span><span class=\"p\">(<\/span><span class=\"kd\">const<\/span> <span class=\"nx\">item<\/span> <span class=\"k\">in<\/span> <span class=\"nx\">cartItems<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">cartItems<\/span><span class=\"p\">[<\/span><span class=\"nx\">item<\/span><span class=\"p\">]<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kd\">let<\/span> <span class=\"nx\">itemInfo<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">items<\/span><span class=\"p\">.<\/span><span class=\"nf\">find<\/span><span class=\"p\">((<\/span><span class=\"nx\">product<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">product<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nc\">Number<\/span><span class=\"p\">(<\/span><span class=\"nx\">item<\/span><span class=\"p\">));<\/span>\r\n        <span class=\"nx\">totalAmount<\/span> <span class=\"o\">+=<\/span> <span class=\"nx\">cartItems<\/span><span class=\"p\">[<\/span><span class=\"nx\">item<\/span><span class=\"p\">]<\/span> <span class=\"o\">*<\/span> <span class=\"nx\">itemInfo<\/span><span class=\"p\">.<\/span><span class=\"nx\">price<\/span><span class=\"p\">;<\/span>\r\n      <span class=\"p\">}<\/span>\r\n    <span class=\"p\">}<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"nx\">totalAmount<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"p\">};<\/span>\r\n\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">addToCart<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">itemId<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nf\">setCartItems<\/span><span class=\"p\">((<\/span><span class=\"nx\">prev<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span> <span class=\"p\">...<\/span><span class=\"nx\">prev<\/span><span class=\"p\">,<\/span> <span class=\"p\">[<\/span><span class=\"nx\">itemId<\/span><span class=\"p\">]:<\/span> <span class=\"nx\">prev<\/span><span class=\"p\">[<\/span><span class=\"nx\">itemId<\/span><span class=\"p\">]<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span> <span class=\"p\">}));<\/span>\r\n  <span class=\"p\">};<\/span>\r\n\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">removeFromCart<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">itemId<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nf\">setCartItems<\/span><span class=\"p\">((<\/span><span class=\"nx\">prev<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span> <span class=\"p\">...<\/span><span class=\"nx\">prev<\/span><span class=\"p\">,<\/span> <span class=\"p\">[<\/span><span class=\"nx\">itemId<\/span><span class=\"p\">]:<\/span> <span class=\"nx\">prev<\/span><span class=\"p\">[<\/span><span class=\"nx\">itemId<\/span><span class=\"p\">]<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span> <span class=\"p\">}));<\/span>\r\n  <span class=\"p\">};<\/span>\r\n\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">updateCartItemCount<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">newAmount<\/span><span class=\"p\">,<\/span> <span class=\"nx\">itemId<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nf\">setCartItems<\/span><span class=\"p\">((<\/span><span class=\"nx\">prev<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span> <span class=\"p\">...<\/span><span class=\"nx\">prev<\/span><span class=\"p\">,<\/span> <span class=\"p\">[<\/span><span class=\"nx\">itemId<\/span><span class=\"p\">]:<\/span> <span class=\"nx\">newAmount<\/span> <span class=\"p\">}));<\/span>\r\n  <span class=\"p\">};<\/span>\r\n\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">checkout<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nf\">setCartItems<\/span><span class=\"p\">(<\/span><span class=\"nf\">getDefaultCart<\/span><span class=\"p\">());<\/span>\r\n  <span class=\"p\">};<\/span>\r\n\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">contextValue<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nx\">cartItems<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nx\">getTotalCartAmount<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nx\">addToCart<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nx\">removeFromCart<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nx\">updateCartItemCount<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nx\">checkout<\/span>\r\n  <span class=\"p\">};<\/span>\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nc\">ShopContext<\/span><span class=\"p\">.<\/span><span class=\"nc\">Provider<\/span> <span class=\"na\">value<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">contextValue<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"si\">{<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"si\">}<\/span>\r\n    <span class=\"p\">&lt;\/<\/span><span class=\"nc\">ShopContext<\/span><span class=\"p\">.<\/span><span class=\"nc\">Provider<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u5c06Provider\u4f20\u9012\u7ed9layout.js\u3002<br \/>\n\u4f7f\u7528ShopContextProvider\u5c06\u6574\u4e2a\u5185\u5bb9\u5305\u56f4\u8d77\u6765\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Inter<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next\/font\/google<\/span><span class=\"dl\">'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/globals.css<\/span><span class=\"dl\">'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Navbar<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/components\/navbar<\/span><span class=\"dl\">'<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ShopContextProvider<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@\/context\/shop-context<\/span><span class=\"dl\">'<\/span>\r\n<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">inter<\/span> <span class=\"o\">=<\/span> <span class=\"nc\">Inter<\/span><span class=\"p\">({<\/span> <span class=\"na\">subsets<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">latin<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span> <span class=\"p\">})<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">metadata<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Create Next App<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Generated by create next app<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">RootLayout<\/span><span class=\"p\">({<\/span> <span class=\"nx\">children<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">html<\/span> <span class=\"na\">lang<\/span><span class=\"p\">=<\/span><span class=\"s\">\"en\"<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">body<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">inter<\/span><span class=\"p\">.<\/span><span class=\"nx\">className<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\r\n<span class=\"hil\">+        <span class=\"p\">&lt;<\/span><span class=\"nc\">ShopContextProvider<\/span><span class=\"p\">&gt;<\/span>\r\n<\/span>           <span class=\"p\">&lt;<\/span><span class=\"nc\">Navbar<\/span> <span class=\"p\">\/&gt;<\/span>\r\n           <span class=\"si\">{<\/span><span class=\"nx\">children<\/span><span class=\"si\">}<\/span>\r\n<span class=\"hil\">+        <span class=\"p\">&lt;\/<\/span><span class=\"nc\">ShopContextProvider<\/span><span class=\"p\">&gt;<\/span>\r\n<\/span>      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">body<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">html<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<\/code><\/pre>\n<h3>\u5c06Shop\u7ec4\u4ef6\u62c6\u5206\u5e76\u521b\u5efaItem\u7ec4\u4ef6<\/h3>\n<pre class=\"post-pre\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/shop.css<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span><span class=\"k\">import<\/span> <span class=\"nx\">Item<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/item<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span>\r\n<span class=\"kd\">function<\/span> <span class=\"nf\">Shop<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">items<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setItems<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">([]);<\/span>\r\n\r\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">https:\/\/fakestoreapi.com\/products<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\r\n      <span class=\"p\">.<\/span><span class=\"nf\">then<\/span><span class=\"p\">((<\/span><span class=\"nx\">res<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">res<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">())<\/span>\r\n      <span class=\"p\">.<\/span><span class=\"nf\">then<\/span><span class=\"p\">((<\/span><span class=\"nx\">json<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">json<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"nf\">setItems<\/span><span class=\"p\">(<\/span><span class=\"nx\">json<\/span><span class=\"p\">);<\/span>\r\n      <span class=\"p\">});<\/span>\r\n  <span class=\"p\">},<\/span> <span class=\"p\">[]);<\/span>\r\n\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"shop\"<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"shopTitle\"<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>E-commerce Shop<span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"products\"<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"si\">{<\/span><span class=\"nx\">items<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">item<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span>         <span class=\"o\">&lt;<\/span><span class=\"nx\">Item<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>           <span class=\"nx\">id<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>           <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>           <span class=\"nx\">image<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">image<\/span><span class=\"p\">}<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>           <span class=\"nx\">price<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">price<\/span><span class=\"p\">}<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>           <span class=\"nx\">description<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">description<\/span><span class=\"p\">}<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>           <span class=\"nx\">category<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">category<\/span><span class=\"p\">}<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>           <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>         <span class=\"o\">\/&gt;<\/span>\r\n<\/span>        <span class=\"p\">))<\/span><span class=\"si\">}<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">);<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Shop<\/span><span class=\"p\">;<\/span>\r\n\r\n<\/code><\/pre>\n<p>\u4eceshop.jsx\u63a5\u6536props\uff0c\u521b\u5efaItem\u7ec4\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">function<\/span> <span class=\"nf\">Item<\/span><span class=\"p\">({<\/span> <span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"nx\">title<\/span><span class=\"p\">,<\/span> <span class=\"nx\">image<\/span><span class=\"p\">,<\/span> <span class=\"nx\">price<\/span><span class=\"p\">,<\/span> <span class=\"nx\">description<\/span><span class=\"p\">,<\/span> <span class=\"nx\">category<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">key<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">id<\/span><span class=\"si\">}<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"product\"<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"content\"<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"title\"<\/span><span class=\"p\">&gt;<\/span>\r\n          <span class=\"si\">{<\/span><span class=\"nx\">id<\/span><span class=\"si\">}<\/span>. <span class=\"si\">{<\/span><span class=\"nx\">title<\/span><span class=\"si\">}<\/span>\r\n        <span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">img<\/span> <span class=\"na\">src<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">image<\/span><span class=\"si\">}<\/span> <span class=\"na\">alt<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">title<\/span><span class=\"si\">}<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"image\"<\/span> <span class=\"p\">\/&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"price\"<\/span><span class=\"p\">&gt;<\/span>$<span class=\"si\">{<\/span><span class=\"nx\">price<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"description\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">description<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"category\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">category<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"addToCartBtn\"<\/span><span class=\"p\">&gt;<\/span>ADD<span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">);<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Item<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<h1>\u6b65\u9aa48 \u5b9e\u73b0\u8d2d\u7269\u8f66\u6309\u94ae<\/h1>\n<p>\u6211\u5011\u5c07\u5728Item\u7d44\u4ef6\u4e2d\u5be6\u73fe\u8cfc\u7269\u8eca\u6309\u9215\u3002<\/p>\n<p>\u4f7f\u7528useContext\u94a9\u5b50\uff0c\u83b7\u53d6\u5168\u5c40\u72b6\u6001\u53d8\u91cf\u3002<br \/>\n\u6b64\u5916\uff0c\u5c06props\u4f5c\u4e3a\u4e00\u4e2a\u5bf9\u8c61\u8fdb\u884c\u5e38\u91cf\u58f0\u660e\uff0c\u91c7\u7528\u4e86\u5c06\u5176\u5c5e\u6027\u4e00\u5e76\u5b58\u50a8\u7684\u65b9\u5f0f\u3002<br \/>\n\u5b9a\u4e49\u5e38\u91cf{id, title, image, price, description, category} = props\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ShopContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/context\/shop-context<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span>\r\n<span class=\"kd\">function<\/span> <span class=\"nf\">Item<\/span><span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"nx\">title<\/span><span class=\"p\">,<\/span> <span class=\"nx\">image<\/span><span class=\"p\">,<\/span> <span class=\"nx\">price<\/span><span class=\"p\">,<\/span> <span class=\"nx\">description<\/span><span class=\"p\">,<\/span> <span class=\"nx\">category<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">props<\/span><span class=\"p\">;<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span> <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">addToCart<\/span><span class=\"p\">,<\/span> <span class=\"nx\">cartItems<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useContext<\/span><span class=\"p\">(<\/span><span class=\"nx\">ShopContext<\/span><span class=\"p\">);<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">cartItemCount<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">cartItems<\/span><span class=\"p\">[<\/span><span class=\"nx\">id<\/span><span class=\"p\">];<\/span>\r\n<\/span>\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">key<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">id<\/span><span class=\"si\">}<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"product\"<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"content\"<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"title\"<\/span><span class=\"p\">&gt;<\/span>\r\n          <span class=\"si\">{<\/span><span class=\"nx\">id<\/span><span class=\"si\">}<\/span>. <span class=\"si\">{<\/span><span class=\"nx\">title<\/span><span class=\"si\">}<\/span>\r\n        <span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">img<\/span> <span class=\"na\">src<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">image<\/span><span class=\"si\">}<\/span> <span class=\"na\">alt<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">title<\/span><span class=\"si\">}<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"image\"<\/span> <span class=\"p\">\/&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"price\"<\/span><span class=\"p\">&gt;<\/span>$<span class=\"si\">{<\/span><span class=\"nx\">price<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"description\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">description<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"category\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">category<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n<span class=\"hil\">+      <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"addToCartBtn\"<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">addToCart<\/span><span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\r\n<\/span><span class=\"hil\">+        \u30ab\u30fc\u30c8\u306b\u8ffd\u52a0\u3059\u308b <span class=\"si\">{<\/span><span class=\"nx\">cartItemCount<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">0<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">&lt;<\/span><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span>(<span class=\"si\">{<\/span><span class=\"nx\">cartItemCount<\/span><span class=\"si\">}<\/span>\u500b)<span class=\"p\">&lt;\/<\/span><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">}<\/span>\r\n<\/span><span class=\"hil\">+      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\r\n<\/span>    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">);<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Item<\/span><span class=\"p\">;<\/span>\r\n\r\n<\/code><\/pre>\n<h1>\u7b2c\u4e5d\u6b65 \u5b9e\u73b0\u8d2d\u7269\u8f66\u903b\u8f91<\/h1>\n<p>\u6211\u5011\u5c07\u7528useContext\u4f86\u5be6\u73fe\u4e4b\u524d\u66ab\u6642\u5b58\u653e\u7684\u6578\u64da\u3002<\/p>\n<p>\u5c06\u8d2d\u7269\u8f66\u4e2d\u7684\u5546\u54c1\u62c6\u5206\u5e76\u5728cartItem\u7ec4\u4ef6\u4e2d\u5b9e\u73b0\u3002<br \/>\n\u4f7f\u7528data\u5c5e\u6027\uff0c\u5c06props\u4f20\u9012\u7ed9cartItem\u7ec4\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"hil\"><span class=\"o\">+ <\/span><span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span>  <span class=\"k\">import<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/cart.css<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span><span class=\"k\">import<\/span> <span class=\"nx\">CartItem<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/cartItem<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ShopContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/context\/shop-context<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span>\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">Cart<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span> <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">items<\/span><span class=\"p\">,<\/span> <span class=\"nx\">cartItems<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useContext<\/span><span class=\"p\">(<\/span><span class=\"nx\">ShopContext<\/span><span class=\"p\">);<\/span>\r\n<\/span>\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"cart\"<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\u30ab\u30fc\u30c8\u306e\u5546\u54c1<span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"cart\"<\/span><span class=\"p\">&gt;<\/span>\r\n<span class=\"hil\">+        <span class=\"si\">{<\/span><span class=\"nx\">items<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">item<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>         <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">cartItems<\/span><span class=\"p\">[<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">]<\/span> <span class=\"o\">!==<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>           <span class=\"k\">return<\/span> <span class=\"p\">&lt;<\/span><span class=\"nc\">CartItem<\/span> <span class=\"na\">data<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">item<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>         <span class=\"p\">}<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"p\">})<\/span><span class=\"si\">}<\/span>\r\n<\/span>      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"checkout\"<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\u5c0f\u8a08: xxxx<span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\u8cb7\u3044\u7269\u3092\u7d9a\u3051\u308b<span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\u30c1\u30a7\u30c3\u30af\u30a2\u30a6\u30c8<span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">);<\/span>\r\n<span class=\"p\">};<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Cart<\/span><span class=\"p\">;<\/span>\r\n\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ShopContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/context\/shop-context<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">function<\/span> <span class=\"nf\">CartItem<\/span><span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"nx\">title<\/span><span class=\"p\">,<\/span> <span class=\"nx\">image<\/span><span class=\"p\">,<\/span> <span class=\"nx\">price<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">cartItems<\/span><span class=\"p\">,<\/span> <span class=\"nx\">addToCart<\/span><span class=\"p\">,<\/span> <span class=\"nx\">removeFromCart<\/span><span class=\"p\">,<\/span> <span class=\"nx\">updateCartItemCount<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span>\r\n    <span class=\"nf\">useContext<\/span><span class=\"p\">(<\/span><span class=\"nx\">ShopContext<\/span><span class=\"p\">);<\/span>\r\n\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"cartItem\"<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">img<\/span> <span class=\"na\">src<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">image<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"description\"<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"cartItemTitle\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">title<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>$ <span class=\"si\">{<\/span><span class=\"nx\">price<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"countHandler\"<\/span><span class=\"p\">&gt;<\/span>\r\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">removeFromCart<\/span><span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span> - <span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\r\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">input<\/span>\r\n            <span class=\"na\">value<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">cartItems<\/span><span class=\"p\">[<\/span><span class=\"nx\">id<\/span><span class=\"p\">]<\/span><span class=\"si\">}<\/span>\r\n            <span class=\"na\">onChange<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">updateCartItemCount<\/span><span class=\"p\">(<\/span><span class=\"nc\">Number<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">),<\/span> <span class=\"nx\">id<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span>\r\n          <span class=\"p\">\/&gt;<\/span>\r\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">addToCart<\/span><span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span> + <span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">);<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">CartItem<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<h1>\u7b2c\u5341\u6b65 \u5b9e\u73b0\u663e\u793a\u603b\u91d1\u989d\u548c\u6e05\u7a7a\u8d2d\u7269\u8f66\u529f\u80fd<\/h1>\n<pre class=\"post-pre\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/cart.css<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">CartItem<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/cartItem<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ShopContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/context\/shop-context<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">Cart<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span><span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">items<\/span><span class=\"p\">,<\/span> <span class=\"nx\">cartItems<\/span><span class=\"p\">,<\/span> <span class=\"nx\">getTotalCartAmount<\/span><span class=\"p\">,<\/span> <span class=\"nx\">checkout<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span>\r\n<\/span>    <span class=\"nf\">useContext<\/span><span class=\"p\">(<\/span><span class=\"nx\">ShopContext<\/span><span class=\"p\">);<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span><span class=\"c1\">\/\/ \u5c0f\u6570\u70b9\u7b2c2\u4f4d\u3067\u56db\u6368\u4e94\u5165<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span><span class=\"kd\">const<\/span> <span class=\"nx\">totalAmount<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Math<\/span><span class=\"p\">.<\/span><span class=\"nf\">round<\/span><span class=\"p\">(<\/span><span class=\"nf\">getTotalCartAmount<\/span><span class=\"p\">()<\/span> <span class=\"o\">*<\/span> <span class=\"mi\">100<\/span><span class=\"p\">)<\/span> <span class=\"o\">\/<\/span> <span class=\"mi\">100<\/span><span class=\"p\">;<\/span>\r\n<\/span>\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"cart\"<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\u30ab\u30fc\u30c8\u306e\u5546\u54c1<span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"cart\"<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"si\">{<\/span><span class=\"nx\">items<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">item<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n          <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">cartItems<\/span><span class=\"p\">[<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">]<\/span> <span class=\"o\">!==<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n            <span class=\"k\">return<\/span> <span class=\"p\">&lt;<\/span><span class=\"nc\">CartItem<\/span> <span class=\"na\">data<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">item<\/span><span class=\"si\">}<\/span> <span class=\"na\">key<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;;<\/span>\r\n          <span class=\"p\">}<\/span>\r\n        <span class=\"p\">})<\/span><span class=\"si\">}<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n\r\n<span class=\"hil\">+      <span class=\"si\">{<\/span><span class=\"nx\">totalAmount<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">0<\/span> <span class=\"p\">?<\/span> <span class=\"p\">(<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">checkout<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>         <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">total<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">\u5408\u8a08<\/span><span class=\"p\">:<\/span> <span class=\"nx\">$<\/span><span class=\"p\">{<\/span><span class=\"nx\">totalAmount<\/span><span class=\"p\">}&lt;<\/span><span class=\"err\">\/<\/span><span class=\"na\">p<\/span><span class=\"p\">&gt;<\/span>\r\n<\/span><span class=\"hil\">+          <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span>\r\n<\/span><span class=\"hil\"><span class=\"err\">+<\/span>            <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>             <span class=\"nf\">checkout<\/span><span class=\"p\">();<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>           <span class=\"p\">}<\/span><span class=\"si\">}<\/span>\r\n<\/span><span class=\"hil\"><span class=\"err\">+<\/span>          <span class=\"p\">&gt;<\/span>\r\n<\/span><span class=\"hil\">+            \u30ab\u30fc\u30c8\u3092\u7a7a\u306b\u3059\u308b\r\n<\/span><span class=\"hil\">+          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\r\n<\/span><span class=\"hil\">+        <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>    <span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"p\">(<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span> <span class=\"nx\">cart<\/span> <span class=\"nx\">is<\/span> <span class=\"nx\">empty<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>    <span class=\"p\">)<\/span><span class=\"si\">}<\/span>\r\n<\/span>    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">);<\/span>\r\n<span class=\"p\">};<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Cart<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ShopContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/context\/shop-context<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">function<\/span> <span class=\"nf\">CartItem<\/span><span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"nx\">title<\/span><span class=\"p\">,<\/span> <span class=\"nx\">image<\/span><span class=\"p\">,<\/span> <span class=\"nx\">price<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">cartItems<\/span><span class=\"p\">,<\/span> <span class=\"nx\">addToCart<\/span><span class=\"p\">,<\/span> <span class=\"nx\">removeFromCart<\/span><span class=\"p\">,<\/span> <span class=\"nx\">updateCartItemCount<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span>\r\n    <span class=\"nf\">useContext<\/span><span class=\"p\">(<\/span><span class=\"nx\">ShopContext<\/span><span class=\"p\">);<\/span>\r\n\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"cartItem\"<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">img<\/span> <span class=\"na\">src<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">image<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"description\"<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"cartItemTitle\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">title<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>$ <span class=\"si\">{<\/span><span class=\"nx\">price<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"countHandler\"<\/span><span class=\"p\">&gt;<\/span>\r\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">removeFromCart<\/span><span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span> - <span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\r\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">input<\/span>\r\n            <span class=\"na\">value<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">cartItems<\/span><span class=\"p\">[<\/span><span class=\"nx\">id<\/span><span class=\"p\">]<\/span><span class=\"si\">}<\/span>\r\n            <span class=\"na\">onChange<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">updateCartItemCount<\/span><span class=\"p\">(<\/span><span class=\"nc\">Number<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">),<\/span> <span class=\"nx\">id<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span>\r\n          <span class=\"p\">\/&gt;<\/span>\r\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">addToCart<\/span><span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span> + <span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n<span class=\"hil\">+        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"subtotal\"<\/span><span class=\"p\">&gt;<\/span>\u5c0f\u8a08: $<span class=\"si\">{<\/span><span class=\"nx\">price<\/span> <span class=\"o\">*<\/span> <span class=\"nx\">cartItems<\/span><span class=\"p\">[<\/span><span class=\"nx\">id<\/span><span class=\"p\">]<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\r\n<\/span>      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">);<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">CartItem<\/span><span class=\"p\">;<\/span>\r\n\r\n<\/code><\/pre>\n<p>\u5df2\u5b8c\u6210\uff01<\/p>\n<h1>\u603b\u7ed3<\/h1>\n<p>\u4f7f\u7528Next.js\uff0c\u60a8\u80fd\u591f\u8f7b\u677e\u5730\u521b\u5efa\u4e00\u4e2a\u8d2d\u7269\u7f51\u7ad9\uff0c\u5e76\u4e14\u80fd\u591f\u8f7b\u677e\u90e8\u7f72\u3002<br \/>\n\u8bf7\u5c1d\u8bd5\u6dfb\u52a0\u767b\u5f55\u529f\u80fd\u7b49\uff0c\u5e0c\u671b\u60a8\u80fd\u8fdb\u884c\u4e00\u4e9b\u521b\u610f\u8c03\u6574\uff01<\/p>\n<p>\u5982\u679c\u60a8\u6709\u4efb\u4f55\u4e0d\u660e\u767d\u6216\u6709\u7591\u95ee\u7684\u5730\u65b9\uff0c\u8bf7\u968f\u65f6\u63d0\u95ee\uff01\u6211\u4f1a\u5c3d\u529b\u56de\u7b54\u3002<\/p>\n<h1>\u6700\u540e<\/h1>\n<p>\u6211\u4eec\u516c\u53f8\u6b63\u5728\u79ef\u6781\u62db\u8058\u5de5\u7a0b\u5e08\uff01\uff01<\/p>\n<p>\u5728\u682a\u5f0f\u4f1a\u793e\u30ef\u30af\u30c8\uff0c\u60f3\u628a\u4f60\u7684\u300c\u5174\u594b\u300d\u53d8\u6210\u5de5\u4f5c\u5417\uff1f<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u8fd9\u6b21\u7684\u4f5c\u54c1 &nbsp; GitHub\u7684\u4ed3\u5e93 &nbsp; \u5b9e\u65bd\u529f\u80fd \u5546\u54c1\u4e00\u89a7\u3092\u8868\u793a(Top\u753b\u9762) \u30ed\u30b0\u30a4\u30f3\u30fb [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38603","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u3010\u6b22\u8fce\u521d\u5b66\u8005\ud83d\udd30\u3011\u4f7f\u7528Next.js\u6784\u5efa\u8d2d\u7269\u7f51\u7ad9\ud83d\uded2 - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u3010\u6b22\u8fce\u521d\u5b66\u8005\ud83d\udd30\u3011\u4f7f\u7528next-js\u6784\u5efa\u8d2d\u7269\u7f51\u7ad9\ud83d\uded2\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u3010\u6b22\u8fce\u521d\u5b66\u8005\ud83d\udd30\u3011\u4f7f\u7528Next.js\u6784\u5efa\u8d2d\u7269\u7f51\u7ad9\ud83d\uded2\" \/>\n<meta property=\"og:description\" content=\"\u8fd9\u6b21\u7684\u4f5c\u54c1 &nbsp; GitHub\u7684\u4ed3\u5e93 &nbsp; \u5b9e\u65bd\u529f\u80fd \u5546\u54c1\u4e00\u89a7\u3092\u8868\u793a(Top\u753b\u9762) \u30ed\u30b0\u30a4\u30f3\u30fb [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u3010\u6b22\u8fce\u521d\u5b66\u8005\ud83d\udd30\u3011\u4f7f\u7528next-js\u6784\u5efa\u8d2d\u7269\u7f51\u7ad9\ud83d\uded2\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-19T15:32:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T10:31:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d356a37434c4406c6c81a\/6-0.gif\" \/>\n<meta name=\"author\" content=\"\u9038, \u79d1\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u9038, \u79d1\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e6%ac%a2%e8%bf%8e%e5%88%9d%e5%ad%a6%e8%80%85%f0%9f%94%b0%e3%80%91%e4%bd%bf%e7%94%a8next-js%e6%9e%84%e5%bb%ba%e8%b4%ad%e7%89%a9%e7%bd%91%e7%ab%99%f0%9f%9b%92\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e6%ac%a2%e8%bf%8e%e5%88%9d%e5%ad%a6%e8%80%85%f0%9f%94%b0%e3%80%91%e4%bd%bf%e7%94%a8next-js%e6%9e%84%e5%bb%ba%e8%b4%ad%e7%89%a9%e7%bd%91%e7%ab%99%f0%9f%9b%92\/\",\"name\":\"\u3010\u6b22\u8fce\u521d\u5b66\u8005\ud83d\udd30\u3011\u4f7f\u7528Next.js\u6784\u5efa\u8d2d\u7269\u7f51\u7ad9\ud83d\uded2 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-04-19T15:32:41+00:00\",\"dateModified\":\"2024-04-29T10:31:28+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e6%ac%a2%e8%bf%8e%e5%88%9d%e5%ad%a6%e8%80%85%f0%9f%94%b0%e3%80%91%e4%bd%bf%e7%94%a8next-js%e6%9e%84%e5%bb%ba%e8%b4%ad%e7%89%a9%e7%bd%91%e7%ab%99%f0%9f%9b%92\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e6%ac%a2%e8%bf%8e%e5%88%9d%e5%ad%a6%e8%80%85%f0%9f%94%b0%e3%80%91%e4%bd%bf%e7%94%a8next-js%e6%9e%84%e5%bb%ba%e8%b4%ad%e7%89%a9%e7%bd%91%e7%ab%99%f0%9f%9b%92\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e6%ac%a2%e8%bf%8e%e5%88%9d%e5%ad%a6%e8%80%85%f0%9f%94%b0%e3%80%91%e4%bd%bf%e7%94%a8next-js%e6%9e%84%e5%bb%ba%e8%b4%ad%e7%89%a9%e7%bd%91%e7%ab%99%f0%9f%9b%92\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u3010\u6b22\u8fce\u521d\u5b66\u8005\ud83d\udd30\u3011\u4f7f\u7528Next.js\u6784\u5efa\u8d2d\u7269\u7f51\u7ad9\ud83d\uded2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487\",\"name\":\"\u9038, \u79d1\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"caption\":\"\u9038, \u79d1\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e6%ac%a2%e8%bf%8e%e5%88%9d%e5%ad%a6%e8%80%85%f0%9f%94%b0%e3%80%91%e4%bd%bf%e7%94%a8next-js%e6%9e%84%e5%bb%ba%e8%b4%ad%e7%89%a9%e7%bd%91%e7%ab%99%f0%9f%9b%92\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u3010\u6b22\u8fce\u521d\u5b66\u8005\ud83d\udd30\u3011\u4f7f\u7528Next.js\u6784\u5efa\u8d2d\u7269\u7f51\u7ad9\ud83d\uded2 - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u3010\u6b22\u8fce\u521d\u5b66\u8005\ud83d\udd30\u3011\u4f7f\u7528next-js\u6784\u5efa\u8d2d\u7269\u7f51\u7ad9\ud83d\uded2\/","og_locale":"zh_CN","og_type":"article","og_title":"\u3010\u6b22\u8fce\u521d\u5b66\u8005\ud83d\udd30\u3011\u4f7f\u7528Next.js\u6784\u5efa\u8d2d\u7269\u7f51\u7ad9\ud83d\uded2","og_description":"\u8fd9\u6b21\u7684\u4f5c\u54c1 &nbsp; GitHub\u7684\u4ed3\u5e93 &nbsp; \u5b9e\u65bd\u529f\u80fd \u5546\u54c1\u4e00\u89a7\u3092\u8868\u793a(Top\u753b\u9762) \u30ed\u30b0\u30a4\u30f3\u30fb [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u3010\u6b22\u8fce\u521d\u5b66\u8005\ud83d\udd30\u3011\u4f7f\u7528next-js\u6784\u5efa\u8d2d\u7269\u7f51\u7ad9\ud83d\uded2\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-04-19T15:32:41+00:00","article_modified_time":"2024-04-29T10:31:28+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d356a37434c4406c6c81a\/6-0.gif"}],"author":"\u9038, \u79d1","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u9038, \u79d1","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"11 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e6%ac%a2%e8%bf%8e%e5%88%9d%e5%ad%a6%e8%80%85%f0%9f%94%b0%e3%80%91%e4%bd%bf%e7%94%a8next-js%e6%9e%84%e5%bb%ba%e8%b4%ad%e7%89%a9%e7%bd%91%e7%ab%99%f0%9f%9b%92\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e6%ac%a2%e8%bf%8e%e5%88%9d%e5%ad%a6%e8%80%85%f0%9f%94%b0%e3%80%91%e4%bd%bf%e7%94%a8next-js%e6%9e%84%e5%bb%ba%e8%b4%ad%e7%89%a9%e7%bd%91%e7%ab%99%f0%9f%9b%92\/","name":"\u3010\u6b22\u8fce\u521d\u5b66\u8005\ud83d\udd30\u3011\u4f7f\u7528Next.js\u6784\u5efa\u8d2d\u7269\u7f51\u7ad9\ud83d\uded2 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-04-19T15:32:41+00:00","dateModified":"2024-04-29T10:31:28+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e6%ac%a2%e8%bf%8e%e5%88%9d%e5%ad%a6%e8%80%85%f0%9f%94%b0%e3%80%91%e4%bd%bf%e7%94%a8next-js%e6%9e%84%e5%bb%ba%e8%b4%ad%e7%89%a9%e7%bd%91%e7%ab%99%f0%9f%9b%92\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e6%ac%a2%e8%bf%8e%e5%88%9d%e5%ad%a6%e8%80%85%f0%9f%94%b0%e3%80%91%e4%bd%bf%e7%94%a8next-js%e6%9e%84%e5%bb%ba%e8%b4%ad%e7%89%a9%e7%bd%91%e7%ab%99%f0%9f%9b%92\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e6%ac%a2%e8%bf%8e%e5%88%9d%e5%ad%a6%e8%80%85%f0%9f%94%b0%e3%80%91%e4%bd%bf%e7%94%a8next-js%e6%9e%84%e5%bb%ba%e8%b4%ad%e7%89%a9%e7%bd%91%e7%ab%99%f0%9f%9b%92\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u3010\u6b22\u8fce\u521d\u5b66\u8005\ud83d\udd30\u3011\u4f7f\u7528Next.js\u6784\u5efa\u8d2d\u7269\u7f51\u7ad9\ud83d\uded2"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487","name":"\u9038, \u79d1","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","caption":"\u9038, \u79d1"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90%e6%ac%a2%e8%bf%8e%e5%88%9d%e5%ad%a6%e8%80%85%f0%9f%94%b0%e3%80%91%e4%bd%bf%e7%94%a8next-js%e6%9e%84%e5%bb%ba%e8%b4%ad%e7%89%a9%e7%bd%91%e7%ab%99%f0%9f%9b%92\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=38603"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38603\/revisions"}],"predecessor-version":[{"id":86923,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38603\/revisions\/86923"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=38603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=38603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=38603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}