{"id":66607,"date":"2026-01-27T00:05:13","date_gmt":"2026-01-26T16:05:13","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/66607.html"},"modified":"2026-01-27T00:05:13","modified_gmt":"2026-01-26T16:05:13","slug":"next-js%e5%85%a8%e6%a0%88%e5%bc%80%e5%8f%91%ef%bc%9a%e4%bb%8e%e5%85%a5%e9%97%a8%e5%88%b0%e7%b2%be%e9%80%9a","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/66607.html","title":{"rendered":"Next.js\u5168\u6808\u5f00\u53d1\uff1a\u4ece\u5165\u95e8\u5230\u7cbe\u901a"},"content":{"rendered":"<h2>\u200b\u76ee\u5f55<\/h2>\n<h3>\u7b2c\u4e00\u90e8\u5206&#xff1a;\u601d\u60f3\u4e0e\u57fa\u77f3\u2014\u2014\u4e07\u6cd5\u5f52\u5b97&#xff0c;\u7b51\u57fa\u95ee\u9053<\/h3>\n<h4>\u7b2c1\u7ae0&#xff1a;Web \u7684\u8f6e\u56de\u4e0e\u8fdb\u5316\u2014\u2014Next.js \u7684\u4e16\u754c\u89c2<\/h4>\n<ul>\n<li>\n<p>1.1 \u4f55\u4e3a\u5168\u6808&#xff1f;\u00a0\u4ece\u201c\u524d\u540e\u7aef\u5206\u79bb\u201d\u5230\u201c\u5168\u6808\u540c\u6784\u201d\u7684\u54f2\u5b66\u56de\u5f52<\/p>\n<\/li>\n<li>\n<p>1.2 Web \u6e32\u67d3\u7b80\u53f2&#xff1a;\u00a0\u4ece PHP\/JSP \u5230 SPA&#xff0c;\u518d\u5230 SSR\/SSG \u7684\u6f14\u8fdb\u903b\u8f91<\/p>\n<\/li>\n<li>\n<p>1.3 \u4e3a\u4f55\u662f Next.js&#xff1f;\u00a0\u201c\u751f\u4ea7\u73af\u5883\u5c31\u7eea\u201d\u7684 Node.js \u6846\u67b6\u6807\u6746<\/p>\n<\/li>\n<li>\n<p>1.4 \u7834\u9664\u8ff7\u601d&#xff1a;\u00a0App Router \u662f React \u7684\u672a\u6765&#xff0c;\u8fd8\u662f\u8fc7\u5ea6\u8bbe\u8ba1&#xff1f;<\/p>\n<\/li>\n<\/ul>\n<h4>\u7b2c2\u7ae0&#xff1a;\u5de5\u6b32\u5584\u5176\u4e8b\u2014\u2014\u5f00\u53d1\u73af\u5883\u4e0e\u6838\u5fc3\u5de5\u5177\u94fe<\/h4>\n<ul>\n<li>\n<p>2.1 \u201c\u4e7e\u5764\u5728\u63e1\u201d&#xff1a;\u00a0Node.js \u8fd0\u884c\u65f6\u3001PNPM \u4e0e TypeScript \u7684\u6781\u81f4\u914d\u7f6e<\/p>\n<\/li>\n<li>\n<p>2.2 \u201c\u811a\u624b\u67b6\u4e4b\u7f8e\u201d&#xff1a;\u00a0create-next-app\u00a0\u80cc\u540e\u9690\u85cf\u7684\u5de5\u7a0b\u5316\u7ec6\u8282<\/p>\n<\/li>\n<li>\n<p>2.3 \u201c\u5f00\u53d1\u5229\u5668\u201d&#xff1a;\u00a0VS Code \u63d2\u4ef6\u751f\u6001\u4e0e Turbopack \u6784\u5efa\u52a0\u901f\u5668<\/p>\n<\/li>\n<li>\n<p>2.4 \u201c\u4ee3\u7801\u89c4\u8303\u201d&#xff1a;\u00a0ESLint\u3001Prettier \u4e0e Husky \u7684\u5de5\u7a0b\u5316\u7ea6\u675f<\/p>\n<\/li>\n<\/ul>\n<h4>\u7b2c3\u7ae0&#xff1a;\u67b6\u6784\u7684\u5fc3\u6cd5\u2014\u2014React Server Components (RSC)<\/h4>\n<ul>\n<li>\n<p>3.1 \u201c\u4e8c\u5143\u8bba\u201d&#xff1a;\u00a0\u6df1\u5ea6\u7406\u89e3\u670d\u52a1\u7aef\u7ec4\u4ef6&#xff08;Server&#xff09;\u4e0e\u5ba2\u6237\u7aef\u7ec4\u4ef6&#xff08;Client&#xff09;<\/p>\n<\/li>\n<li>\n<p>3.2 \u201c\u6c34\u5408\u201d\u7684\u827a\u672f&#xff1a;\u00a0\u7406\u89e3 Hydration \u7684\u539f\u7406\u53ca\u5176\u5e26\u6765\u7684\u6027\u80fd\u6311\u6218<\/p>\n<\/li>\n<li>\n<p>3.3 \u201c\u8fb9\u754c\u611f\u201d&#xff1a;\u00a0\u4f55\u65f6\u8be5\u7528\u00a0&#039;use client&#039;&#xff1f;\u2014\u2014\u7ec4\u4ef6\u804c\u8d23\u7684\u5212\u5206\u79d1\u5b66<\/p>\n<\/li>\n<\/ul>\n<h4>\u7b2c4\u7ae0&#xff1a;\u8def\u7531\u7684\u7f57\u76d8\u2014\u2014App Router \u5168\u89e3<\/h4>\n<ul>\n<li>\n<p>4.1 \u201c\u5f84\u7531\u5fc3\u751f\u201d&#xff1a;\u00a0\u57fa\u4e8e\u6587\u4ef6\u7cfb\u7edf\u7684\u8def\u7531\u534f\u8bae\u4e0e\u6587\u4ef6\u5939\u7ea6\u5b9a<\/p>\n<\/li>\n<li>\n<p>4.2 \u201c\u5d4c\u5957\u4e4b\u7f8e\u201d&#xff1a;\u00a0Layout&#xff08;\u5e03\u5c40&#xff09;\u3001Template&#xff08;\u6a21\u677f&#xff09;\u4e0e Slot&#xff08;\u63d2\u69fd&#xff09;<\/p>\n<\/li>\n<li>\n<p>4.3 \u201c\u52a8\u6001\u611f\u77e5\u201d&#xff1a;\u00a0\u52a8\u6001\u8def\u7531\u3001\u901a\u914d\u8def\u7531\u4e0e\u5e76\u884c\u8def\u7531&#xff08;Parallel Routes&#xff09;<\/p>\n<\/li>\n<li>\n<p>4.4 \u201c\u5f02\u5e38\u5904\u7406\u201d&#xff1a;\u00a0Loading \u6001\u3001Error \u8fb9\u754c\u4e0e NotFound \u7684\u4f18\u96c5\u964d\u7ea7<\/p>\n<\/li>\n<\/ul>\n<hr \/>\n<h3>\u7b2c\u4e8c\u90e8\u5206&#xff1a;\u672f\u6cd5\u4e07\u5343\u2014\u2014\u6838\u5fc3\u529f\u80fd\u4e0e\u6e32\u67d3\u5f15\u64ce\u8be6\u89e3<\/h3>\n<h4>\u7b2c5\u7ae0&#xff1a;\u6570\u636e\u7684\u5fc3\u6cd5\u2014\u2014\u83b7\u53d6\u3001\u7f13\u5b58\u4e0e\u540c\u6b65<\/h4>\n<ul>\n<li>\n<p>5.1 \u201c\u76f4\u53d6\u6e90\u5934\u201d&#xff1a;\u00a0\u5728\u670d\u52a1\u7aef\u7ec4\u4ef6\u4e2d\u76f4\u63a5\u8bf7\u6c42\u6570\u636e\u5e93\u4e0e API<\/p>\n<\/li>\n<li>\n<p>5.2 \u201c\u8bb0\u5fc6\u5316\u4e0e\u7f13\u5b58\u201d&#xff1a;\u00a0\u7406\u89e3 Next.js \u5bf9\u00a0fetch\u00a0\u7684\u539f\u751f\u589e\u5f3a<\/p>\n<\/li>\n<li>\n<p>5.3 \u201c\u670d\u52a1\u5668\u64cd\u4f5c\u201d (Server Actions)&#xff1a;\u00a0\u544a\u522b\u5197\u4f59 API&#xff0c;\u5b9e\u73b0\u51fd\u6570\u5f0f\u8868\u5355\u63d0\u4ea4<\/p>\n<\/li>\n<li>\n<p>5.4 \u201c\u5b9e\u65f6\u66f4\u65b0\u201d&#xff1a;\u00a0\u6570\u636e\u91cd\u65b0\u9a8c\u8bc1&#xff08;Revalidation&#xff09;\u7684\u7b56\u7565\u9009\u62e9<\/p>\n<\/li>\n<\/ul>\n<h4>\u7b2c6\u7ae0&#xff1a;\u6e32\u67d3\u4e4b\u53d8\u2014\u2014SSG\u3001SSR\u3001ISR \u4e0e PPR<\/h4>\n<ul>\n<li>\n<p>6.1 \u9759\u6001\u751f\u6210 (SSG)&#xff1a;\u00a0\u6784\u5efa\u65f6\u9884\u6e32\u67d3&#xff0c;\u6253\u9020\u6781\u81f4\u6781\u81f4\u901f\u5ea6<\/p>\n<\/li>\n<li>\n<p>6.2 \u670d\u52a1\u7aef\u6e32\u67d3 (SSR)&#xff1a;\u00a0\u52a8\u6001\u5185\u5bb9\u7684\u5b9e\u65f6\u751f\u6210\u4e4b\u9053<\/p>\n<\/li>\n<li>\n<p>6.3 \u589e\u91cf\u9759\u6001\u518d\u751f (ISR)&#xff1a;\u00a0\u5728\u4e0d\u91cd\u65b0\u90e8\u7f72\u7684\u60c5\u51b5\u4e0b\u66f4\u65b0\u9759\u6001\u9875\u9762<\/p>\n<\/li>\n<li>\n<p>6.4 \u90e8\u5206\u9884\u6e32\u67d3 (PPR)&#xff1a;\u00a0\u9759\u6001\u4e0e\u52a8\u6001\u5728\u540c\u4e00\u9875\u9762\u4e0b\u7684\u5b8c\u7f8e\u878d\u5408<\/p>\n<\/li>\n<\/ul>\n<h4>\u7b2c7\u7ae0&#xff1a;\u89c6\u89c9\u7684\u4fee\u884c\u2014\u2014\u6837\u5f0f\u3001\u56fe\u50cf\u4e0e\u5b57\u4f53\u4f18\u5316<\/h4>\n<ul>\n<li>\n<p>7.1 \u201c\u5feb\u5982\u95ea\u7535\u201d&#xff1a;\u00a0\u4f7f\u7528 Tailwind CSS \u6784\u5efa\u54cd\u5e94\u5f0f UI<\/p>\n<\/li>\n<li>\n<p>7.2 \u201c\u56fe\u50cf\u4e4b\u738b\u201d&#xff1a;\u00a0next\/image\u00a0\u7684\u81ea\u52a8\u88c1\u526a\u3001\u61d2\u52a0\u8f7d\u4e0e\u683c\u5f0f\u8f6c\u6362<\/p>\n<\/li>\n<li>\n<p>7.3 \u201c\u544a\u522b\u95ea\u70c1\u201d&#xff1a;\u00a0next\/font\u00a0\u5b9e\u73b0\u672c\u5730\u5b57\u4f53\u96f6\u504f\u79fb\u52a0\u8f7d<\/p>\n<\/li>\n<li>\n<p>7.4 \u201c\u5143\u6570\u636e\u7ba1\u7406\u201d&#xff1a;\u00a0SEO \u4f18\u5316\u7684\u5fc3\u6cd5\u4e0e Metadata API<\/p>\n<\/li>\n<\/ul>\n<h4>\u7b2c8\u7ae0&#xff1a;\u5168\u6808\u7684\u6865\u6881\u2014\u2014Route Handlers (API \u8def\u7531)<\/h4>\n<ul>\n<li>\n<p>8.1 \u201cNode.js \u4e4b\u9b42\u201d&#xff1a;\u00a0\u5728 Next.js \u4e2d\u7f16\u5199 RESTful API<\/p>\n<\/li>\n<li>\n<p>8.2 \u201c\u4e2d\u95f4\u4ef6 (Middleware)\u201d&#xff1a;\u00a0\u8fb9\u7f18\u8ba1\u7b97\u3001\u8bf7\u6c42\u8fc7\u6ee4\u4e0e\u56fd\u9645\u5316\u5904\u7406<\/p>\n<\/li>\n<li>\n<p>8.3 \u201c\u6d41\u5f0f\u4f20\u8f93 (Streaming)\u201d&#xff1a;\u00a0\u5229\u7528 HTTP \u6d41\u63d0\u5347\u957f\u4efb\u52a1\u7684\u7528\u6237\u4f53\u9a8c<\/p>\n<\/li>\n<\/ul>\n<hr \/>\n<h3>\u7b2c\u4e09\u90e8\u5206&#xff1a;\u767b\u5802\u5165\u5ba4\u2014\u2014\u9ad8\u7ea7\u4e13\u9898\u4e0e\u5b9e\u6218\u6f14\u7ec3<\/h3>\n<h4>\u7b2c9\u7ae0&#xff1a;\u8eab\u4efd\u4e0e\u5b88\u62a4\u2014\u2014\u8eab\u4efd\u9a8c\u8bc1\u4e0e\u5b89\u5168<\/h4>\n<ul>\n<li>\n<p>9.1 \u8ba4\u8bc1\u9635\u5730&#xff1a;\u00a0NextAuth.js (Auth.js) \u7684\u5168\u6d41\u7a0b\u914d\u7f6e<\/p>\n<\/li>\n<li>\n<p>9.2 \u6743\u9650\u63a7\u5236&#xff1a;\u00a0\u57fa\u4e8e\u89d2\u8272 (RBAC) \u7684\u670d\u52a1\u7aef\u4e0e\u5ba2\u6237\u7aef\u6821\u9a8c<\/p>\n<\/li>\n<li>\n<p>9.3 \u5b89\u5168\u9632\u7ebf&#xff1a;\u00a0CSRF \u9632\u62a4\u3001\u73af\u5883\u53d8\u91cf\u7ba1\u7406\u4e0e\u6570\u636e\u8131\u654f<\/p>\n<\/li>\n<\/ul>\n<h4>\u7b2c10\u7ae0&#xff1a;\u5b9e\u6218\u9879\u76ee\u4e00&#xff1a;\u5168\u6808\u5185\u5bb9\u7cfb\u7edf\u2014\u2014\u73b0\u4ee3\u535a\u5ba2\u5e73\u53f0<\/h4>\n<ul>\n<li>\n<p>10.1 \u6280\u672f\u9009\u578b&#xff1a;\u00a0Next.js &#043; Contentlayer &#043; MDX<\/p>\n<\/li>\n<li>\n<p>10.2 \u529f\u80fd\u5b9e\u73b0&#xff1a;\u00a0\u6587\u7ae0\u5206\u7c7b\u3001\u641c\u7d22\u4f18\u5316\u3001\u8bc4\u8bba\u7cfb\u7edf\u96c6\u6210<\/p>\n<\/li>\n<li>\n<p>10.3 \u6027\u80fd\u4f18\u5316&#xff1a;\u00a0\u751f\u6210\u9759\u6001\u7ad9\u70b9\u5730\u56fe&#xff08;Sitemap&#xff09;\u4e0e RSS \u8ba2\u9605<\/p>\n<\/li>\n<\/ul>\n<h4>\u7b2c11\u7ae0&#xff1a;\u5b9e\u6218\u9879\u76ee\u4e8c&#xff1a;\u4ea4\u4e92\u5f0f\u7535\u5546\u2014\u2014\u9ad8\u6027\u80fd\u5546\u57ce\u524d\u7aef<\/h4>\n<ul>\n<li>\n<p>11.1 \u72b6\u6001\u7ba1\u7406&#xff1a;\u00a0Zustand \u4e0e React \u72b6\u6001\u7684\u6743\u8861<\/p>\n<\/li>\n<li>\n<p>11.2 \u590d\u6742\u4ea4\u4e92&#xff1a;\u00a0\u8d2d\u7269\u8f66\u903b\u8f91\u3001\u591a\u51c6\u5219\u641c\u7d22\u4e0e\u652f\u4ed8\u96c6\u6210&#xff08;Stripe&#xff09;<\/p>\n<\/li>\n<li>\n<p>11.3 \u6570\u636e\u5e93\u8054\u52a8&#xff1a;\u00a0\u4f7f\u7528 Prisma \u6216 Drizzle ORM \u64cd\u4f5c\u5173\u7cfb\u578b\u6570\u636e\u5e93<\/p>\n<\/li>\n<\/ul>\n<h4>\u7b2c12\u7ae0&#xff1a;\u5de5\u7a0b\u5316\u4e0e\u767b\u4ed9\u2014\u2014\u90e8\u7f72\u3001\u76d1\u63a7\u4e0e\u7ef4\u62a4<\/h4>\n<ul>\n<li>\n<p>12.1 \u90e8\u7f72\u7684\u7ec8\u6781\u9009\u62e9&#xff1a;\u00a0Vercel \u5e73\u53f0\u7684\u539f\u751f\u9002\u914d\u4e0e\u8fb9\u7f18\u51fd\u6570<\/p>\n<\/li>\n<li>\n<p>12.2 \u201c\u9003\u79bb Vercel\u201d&#xff1a;\u00a0\u4f7f\u7528 Docker \u5c06 Next.js \u90e8\u7f72\u5230\u79c1\u6709\u4e91<\/p>\n<\/li>\n<li>\n<p>12.3 \u6027\u80fd\u5ea6\u91cf&#xff1a;\u00a0Core Web Vitals (LCP, FID, CLS) \u7684\u76d1\u63a7\u4e0e\u8c03\u4f18<\/p>\n<\/li>\n<li>\n<p>12.4 CI\/CD \u5de5\u4f5c\u6d41&#xff1a;\u00a0GitHub Actions \u81ea\u52a8\u5316\u6d4b\u8bd5\u4e0e\u90e8\u7f72<\/p>\n<\/li>\n<\/ul>\n<h4>\u7b2c13\u7ae0&#xff1a;\u8d85\u8d8a\u4ee3\u7801\u2014\u2014\u67b6\u6784\u5e08\u7684\u8fdb\u9636\u4e4b\u8def<\/h4>\n<ul>\n<li>\n<p>13.1 \u5fae\u524d\u7aef\u67b6\u6784&#xff1a;\u00a0\u5728\u5927\u578b\u4f01\u4e1a\u4e2d\u7ec4\u5408\u591a\u4e2a Next.js \u5e94\u7528<\/p>\n<\/li>\n<li>\n<p>13.2 \u79bb\u7ebf\u80fd\u529b&#xff1a;\u00a0PWA \u4e0e Service Worker \u7684\u96c6\u6210<\/p>\n<\/li>\n<li>\n<p>13.3 \u201c\u77e5\u884c\u5408\u4e00\u201d&#xff1a;\u00a0\u4fdd\u6301\u5bf9 React \u751f\u6001&#xff08;\u5982 React Forget \u7f16\u8bd1\u5668&#xff09;\u7684\u6301\u7eed\u654f\u9510<\/p>\n<\/li>\n<\/ul>\n<hr \/>\n<h3>\u9644\u5f55<\/h3>\n<ul>\n<li>\n<p>A. JavaScript\/TypeScript \u6838\u5fc3\u6982\u5ff5\u56de\u987e&#xff08;\u5f02\u6b65\u5904\u7406\u3001\u89e3\u6784\u3001\u6cdb\u578b&#xff09;<\/p>\n<\/li>\n<li>\n<p>B. Next.js \u5e38\u7528 API \u901f\u67e5\u8868<\/p>\n<\/li>\n<li>\n<p>C. \u4ece\u65e7\u7248 Pages Router \u8fc1\u79fb\u5230 App Router \u7684\u6307\u5357<\/p>\n<\/li>\n<li>\n<p>D. \u5f00\u6e90\u8d44\u6e90\u4e0e\u5168\u6808\u5f00\u53d1\u8005\u5de5\u5177\u7bb1<\/p>\n<\/li>\n<\/ul>\n<hr \/>\n<h2>\u7b2c1\u7ae0&#xff1a;Web \u7684\u8f6e\u56de\u4e0e\u8fdb\u5316\u2014\u2014Next.js \u7684\u4e16\u754c\u89c2<\/h2>\n<ul>\n<li>\n<p>1.1 \u4f55\u4e3a\u5168\u6808&#xff1f;\u00a0\u4ece\u201c\u524d\u540e\u7aef\u5206\u79bb\u201d\u5230\u201c\u5168\u6808\u540c\u6784\u201d\u7684\u54f2\u5b66\u56de\u5f52<\/p>\n<\/li>\n<li>\n<p>1.2 Web \u6e32\u67d3\u7b80\u53f2&#xff1a;\u00a0\u4ece PHP\/JSP \u5230 SPA&#xff0c;\u518d\u5230 SSR\/SSG \u7684\u6f14\u8fdb\u903b\u8f91<\/p>\n<\/li>\n<li>\n<p>1.3 \u4e3a\u4f55\u662f Next.js&#xff1f;\u00a0\u201c\u751f\u4ea7\u73af\u5883\u5c31\u7eea\u201d\u7684 Node.js \u6846\u67b6\u6807\u6746<\/p>\n<\/li>\n<li>\n<p>1.4 \u7834\u9664\u8ff7\u601d&#xff1a;\u00a0App Router \u662f React \u7684\u672a\u6765&#xff0c;\u8fd8\u662f\u8fc7\u5ea6\u8bbe\u8ba1&#xff1f;<\/p>\n<\/li>\n<\/ul>\n<h3>1.1 \u4f55\u4e3a\u5168\u6808&#xff1f;\u4ece\u201c\u524d\u540e\u7aef\u5206\u79bb\u201d\u5230\u201c\u5168\u6808\u540c\u6784\u201d\u7684\u54f2\u5b66\u56de\u5f52<\/h3>\n<p>\u5728\u8ba1\u7b97\u673a\u79d1\u5b66\u7684\u6f2b\u957f\u6f14\u8fdb\u4e2d&#xff0c;Web \u5f00\u53d1\u7684\u5386\u53f2\u5982\u540c\u4e00\u573a\u6ce2\u6f9c\u58ee\u9614\u7684\u8f6e\u56de\u3002\u6211\u4eec\u66fe\u7ecf\u4ece\u4e00\u4e2a\u6781\u7aef\u8d70\u5411\u53e6\u4e00\u4e2a\u6781\u7aef&#xff0c;\u800c\u4eca&#xff0c;Next.js \u6b63\u5f15\u9886\u7740\u6211\u4eec\u56de\u5f52\u5230\u4e00\u4e2a\u66f4\u9ad8\u7ef4\u5ea6\u7684\u7ec8\u70b9\u3002<\/p>\n<p>\u8981\u7406\u89e3 Next.js \u7684\u4e16\u754c\u89c2&#xff0c;\u6211\u4eec\u4e0d\u80fd\u4ec5\u4ec5\u5173\u6ce8\u4ee3\u7801\u5982\u4f55\u7f16\u5199&#xff0c;\u800c\u5fc5\u987b\u4ece\u201c\u5168\u6808\u201d\u8fd9\u4e00\u6982\u5ff5\u7684\u6f14\u8fdb\u4e2d&#xff0c;\u6d1e\u5bdf\u6280\u672f\u8303\u5f0f\u7684\u6df1\u5c42\u8109\u52a8\u3002<\/p>\n<p>\u4e00\u3001 \u6eaf\u6e90&#xff1a;\u6df7\u6c8c\u521d\u5f00\u7684\u201c\u4e00\u4f53\u5316\u201d\u65f6\u4ee3<\/p>\n<p>\u5728\u4e92\u8054\u7f51\u7684\u62d3\u8352\u5e74\u4ee3&#xff0c;Web \u5f00\u53d1\u5e76\u65e0\u201c\u524d\u540e\u7aef\u201d\u4e4b\u5206\u3002\u90a3\u662f\u4e00\u4e2a\u4ee5 PHP\u3001JSP\u3001ASP \u4e3a\u4e3b\u89d2\u7684\u65f6\u4ee3\u3002\u5f00\u53d1\u8005\u7f16\u5199\u4e00\u6bb5\u4ee3\u7801&#xff0c;\u65e2\u5904\u7406\u6570\u636e\u5e93\u8fde\u63a5&#xff0c;\u53c8\u8d1f\u8d23\u751f\u6210 HTML \u6807\u7b7e\u3002<\/p>\n<ul>\n<li>\n<p>\u601d\u60f3\u5185\u6838&#xff1a;\u00a0\u9875\u9762\u662f\u670d\u52a1\u5668\u7684\u4ea7\u7269\u3002\u6bcf\u5f53\u7528\u6237\u70b9\u51fb\u4e00\u4e2a\u94fe\u63a5&#xff0c;\u670d\u52a1\u5668\u5c31\u4f1a\u50cf\u4e00\u53f0\u7cbe\u5bc6\u7684\u5370\u5237\u673a&#xff0c;\u5b9e\u65f6\u5370\u5236\u51fa\u4e00\u5f20\u5168\u65b0\u7684 HTML \u9875\u9762&#xff0c;\u5e76\u901a\u8fc7\u7f51\u7edc\u90ae\u5bc4\u7ed9\u6d4f\u89c8\u5668\u3002<\/p>\n<\/li>\n<li>\n<p>\u54f2\u5b66\u7684\u8d28\u6734&#xff1a;\u00a0\u8fd9\u79cd\u6a21\u5f0f\u5728\u5f53\u65f6\u662f\u6781\u5176\u81ea\u7136\u7684\u3002\u201c\u6570\u636e\u201d\u4e0e\u201c\u8868\u73b0\u201d\u5728\u670d\u52a1\u5668\u7684\u5185\u5b58\u4e2d\u4eb2\u5bc6\u65e0\u95f4\u5730\u878d\u5408\u3002\u00a0\u5f00\u53d1\u8005\u62e5\u6709\u4e0a\u5e1d\u89c6\u89d2&#xff0c;\u4ed6\u4eec\u77e5\u9053\u6bcf\u4e00\u884c\u6570\u636e\u5c06\u5982\u4f55\u53d8\u6210\u6bcf\u4e00\u884c DOM\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u7136\u800c&#xff0c;\u8fd9\u79cd\u539f\u59cb\u7684\u4e00\u4f53\u5316\u4f34\u968f\u7740\u81f4\u547d\u7684\u7f3a\u9677&#xff1a;\u968f\u7740\u4e1a\u52a1\u903b\u8f91\u7684\u81a8\u80c0&#xff0c;\u4ee3\u7801\u53d8\u6210\u4e86\u96be\u4ee5\u7ef4\u62a4\u7684\u201c\u610f\u5927\u5229\u9762\u6761\u201d\u3002\u4e3a\u4e86\u4fee\u6539\u4e00\u4e2a\u6309\u94ae\u7684\u989c\u8272&#xff0c;\u4f60\u53ef\u80fd\u4e0d\u5f97\u4e0d\u7ffb\u904d\u6570\u5343\u884c\u4ea4\u7ec7\u7740 SQL \u8bed\u53e5\u548c HTML \u5b57\u7b26\u4e32\u7684\u903b\u8f91\u3002\u6b64\u65f6&#xff0c;\u884c\u4e1a\u5f00\u59cb\u6e34\u671b\u4e00\u79cd\u529b\u91cf&#xff0c;\u5c06\u8fd9\u79cd\u6df7\u6c8c\u8fdb\u884c\u62c6\u89e3\u3002<\/p>\n<p>\u4e8c\u3001 \u88c2\u53d8&#xff1a;\u524d\u540e\u7aef\u5206\u79bb\u7684\u201c\u51b7\u6218\u201d\u4e0e\u7e41\u8363<\/p>\n<p>\u968f\u7740 Ajax \u6280\u672f\u7684\u8bde\u751f\u548c Google \u63d0\u51fa\u5355\u9875\u5e94\u7528&#xff08;SPA&#xff09;\u7684\u6982\u5ff5&#xff0c;Web \u5f00\u53d1\u8fce\u6765\u4e86\u4e00\u573a\u77f3\u7834\u5929\u60ca\u7684\u201c\u5927\u88c2\u53d8\u201d\u3002<\/p>\n<p>\u6211\u4eec\u4eba\u4e3a\u5730\u5728\u6d4f\u89c8\u5668\u4e0e\u670d\u52a1\u5668\u4e4b\u95f4\u7b51\u8d77\u4e86\u4e00\u9053\u9ad8\u5899\u3002\u524d\u7aef&#xff08;Client-Side&#xff09;\u00a0\u53d8\u6210\u4e86\u8fd0\u884c\u5728\u7528\u6237\u8bbe\u5907\u4e0a\u7684\u72ec\u7acb\u5e94\u7528\u7a0b\u5e8f&#xff0c;\u4f7f\u7528 React\u3001Vue \u7b49\u6846\u67b6\u6784\u5efa&#xff1b;\u800c\u00a0\u540e\u7aef&#xff08;Server-Side&#xff09;\u00a0\u5219\u9000\u7f29\u5230\u9ed1\u76d2\u4e4b\u4e2d&#xff0c;\u4ec5\u901a\u8fc7 RESTful \u6216 GraphQL \u7b49\u534f\u8bae\u5411\u5916\u5410\u51fa\u51b0\u51b7\u7684 JSON \u6570\u636e\u3002<\/p>\n<p>\u8fd9\u4e00\u65f6\u671f&#xff0c;\u201c\u5168\u6808\u5de5\u7a0b\u5e08\u201d\u7684\u5b9a\u4e49\u5f00\u59cb\u53d8\u5f97\u6c89\u91cd\u3002\u5b83\u610f\u5473\u7740\u4f60\u65e2\u8981\u7cbe\u901a\u6d4f\u89c8\u5668\u7684\u6e32\u67d3\u673a\u5236\u3001CSS \u7684\u5947\u6280\u6deb\u5de7&#xff0c;\u53c8\u8981\u638c\u63e1\u6570\u636e\u5e93\u4f18\u5316\u3001\u5206\u5e03\u5f0f\u7f13\u5b58\u548c\u670d\u52a1\u5668\u8fd0\u7ef4\u3002<\/p>\n<ul>\n<li>\n<p>\u5206\u79bb\u7684\u7ea2\u5229&#xff1a;\u00a0\u804c\u8d23\u5206\u660e&#xff0c;\u5f00\u53d1\u6548\u7387\u5728\u7279\u5b9a\u9636\u6bb5\u5f97\u5230\u4e86\u91ca\u653e\u3002\u524d\u7aef\u53ef\u4ee5\u4e13\u6ce8\u4e8e\u4ea4\u4e92\u7684\u6781\u81f4\u6d41\u7545&#xff0c;\u540e\u7aef\u53ef\u4ee5\u4e13\u6ce8\u4e8e\u4e1a\u52a1\u903b\u8f91\u7684\u7a33\u5065\u3002<\/p>\n<\/li>\n<li>\n<p>\u9690\u85cf\u7684\u4ee3\u4ef7&#xff1a;\u00a0\u8fd9\u79cd\u88c2\u53d8\u5e26\u6765\u4e86\u5de8\u5927\u7684\u201c\u901a\u4fe1\u6210\u672c\u201d\u548c\u201c\u8ba4\u77e5\u8d1f\u62c5\u201d\u3002<\/p>\n<ul>\n<li>\n<p>\u91cd\u590d\u5de5\u4f5c&#xff1a;\u00a0\u4f60\u5728\u540e\u7aef\u5b9a\u4e49\u4e86\u4e00\u5957 API \u63a5\u53e3\u548c\u5bf9\u5e94\u7c7b\u6216\u8005\u6570\u636e\u7ed3\u6784&#xff0c;\u5728\u524d\u7aef\u4e0d\u5f97\u4e0d\u518d\u6b21\u5b9a\u4e49\u4e00\u904d\u7c7b\u4f3c\u7684\u6570\u636e\u7ed3\u6784\u4ee5\u786e\u4fdd\u7c7b\u578b\u5b89\u5168\u3002<\/p>\n<\/li>\n<li>\n<p>\u7f51\u7edc\u65ad\u5c42&#xff1a;\u00a0\u6570\u636e\u7684\u83b7\u53d6\u53d8\u6210\u4e86\u5f02\u6b65\u7684\u7011\u5e03\u6d41\u3002\u7528\u6237\u5728\u9762\u5bf9\u767d\u5c4f\u65f6&#xff0c;\u6d4f\u89c8\u5668\u6b63\u5fd9\u7740\u5728\u201c\u8bf7\u6c42-\u7b49\u5f85-\u89e3\u6790-\u518d\u8bf7\u6c42\u201d\u7684\u5faa\u73af\u4e2d\u6323\u624e\u3002<\/p>\n<\/li>\n<li>\n<p>SEO\u56f0\u5883&#xff1a;\u00a0\u641c\u7d22\u5f15\u64ce\u7684\u722c\u866b\u9762\u5bf9\u7a7a\u8361\u8361\u7684 HTML \u5916\u58f3&#xff0c;\u5f80\u5f80\u53ea\u80fd\u671b\u800c\u5174\u53f9\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\u524d\u540e\u7aef\u5206\u79bb\u867d\u7136\u5728\u5de5\u7a0b\u4e0a\u5b9e\u73b0\u4e86\u7269\u7406\u62c6\u5206&#xff0c;\u5374\u5728\u67b6\u6784\u4e0a\u5bfc\u81f4\u4e86\u903b\u8f91\u7684\u7834\u788e\u3002\u5f00\u53d1\u8005\u88ab\u8feb\u5728\u4e24\u5957\u4f53\u7cfb\u3001\u4e24\u5957\u73af\u5883\u3001\u751a\u81f3\u4e24\u5957\u601d\u7ef4\u6a21\u5f0f\u4e4b\u95f4\u53cd\u590d\u6a2a\u8df3\u3002<\/p>\n<p>\u4e09\u3001 \u56de\u5f52&#xff1a;\u5168\u6808\u540c\u6784\u7684\u201c\u5927\u4e00\u7edf\u201d\u7406\u60f3<\/p>\n<p>\u5f53\u6211\u4eec\u7ad9\u5728 2024 \u5e74\u4ee5\u540e\u7684\u6280\u672f\u8282\u70b9\u56de\u671b&#xff0c;Next.js \u7684\u5d1b\u8d77\u5e76\u975e\u5076\u7136&#xff0c;\u5b83\u662f\u4e00\u573a\u9488\u5bf9\u201c\u5206\u79bb\u4ee3\u4ef7\u201d\u7684\u54f2\u5b66\u53cd\u601d\u3002Next.js \u63d0\u51fa\u7684\u6838\u5fc3\u7406\u5ff5\u662f\u00a0\u201c\u5168\u6808\u540c\u6784&#xff08;Full-Stack Isomorphism&#xff09;\u201d\u3002<\/p>\n<p>\u201c\u540c\u6784\u201d\u4e8c\u5b57&#xff0c;\u91cd\u82e5\u5343\u94a7\u3002\u00a0\u5b83\u610f\u5473\u7740&#xff1a;\u540c\u4e00\u5957\u4ee3\u7801\u903b\u8f91&#xff0c;\u65e2\u53ef\u4ee5\u5728\u670d\u52a1\u5668\u4e0a\u8fd0\u884c\u4ee5\u751f\u6210\u5185\u5bb9&#xff0c;\u4e5f\u53ef\u4ee5\u5728\u6d4f\u89c8\u5668\u4e2d\u8fd0\u884c\u4ee5\u5904\u7406\u4ea4\u4e92\u3002<\/p>\n<p>\u8fd9\u4e0d\u53ea\u662f\u7b80\u5355\u7684\u201c\u5728 Node.js \u91cc\u5199 JavaScript\u201d&#xff0c;\u800c\u662f\u4e00\u79cd\u8de8\u8d8a\u7a7a\u95f4\u7684\u903b\u8f91\u5bf9\u9f50\u3002\u5728 Next.js \u7684\u89c6\u89d2\u4e0b&#xff0c;\u5168\u6808\u4e0d\u518d\u662f\u201c\u524d\u7aef\u4ee3\u7801 &#043; \u540e\u7aef\u4ee3\u7801\u201d\u7684\u7269\u7406\u5806\u53e0&#xff0c;\u800c\u662f\u4e00\u4e2a\u6709\u673a\u6574\u4f53\u7684\u4e24\u4e2a\u4f4d\u9762\u3002<\/p>\n<p>1. \u6d88\u9664\u8fb9\u754c\u7684\u201c\u6d41\u6c34\u611f\u201d<\/p>\n<p>\u5728 Next.js \u7684 App Router \u67b6\u6784\u4e2d&#xff0c;\u4e00\u4e2a\u7ec4\u4ef6\u53ef\u4ee5\u5b9a\u4e49\u4e3a\u670d\u52a1\u7aef\u7ec4\u4ef6&#xff08;Server Components&#xff09;\u3002\u4f60\u53ef\u4ee5\u5728\u7ec4\u4ef6\u5185\u90e8\u76f4\u63a5\u901a\u8fc7\u00a0await db.query()\u00a0\u8bfb\u53d6\u6570\u636e\u5e93&#xff0c;\u7136\u540e\u76f4\u63a5\u8fd4\u56de JSX\u3002 \u8fd9\u91cc\u6ca1\u6709 API \u4e2d\u95f4\u5c42&#xff0c;\u6ca1\u6709 JSON \u7684\u5e8f\u5217\u5316\u4e0e\u53cd\u5e8f\u5217\u5316&#xff0c;\u6ca1\u6709 Fetch \u7684\u7b49\u5f85\u3002\u6570\u636e\u50cf\u6c34\u4e00\u6837&#xff0c;\u76f4\u63a5\u4ece\u6570\u636e\u5e93\u6d41\u5411\u4e86 UI \u6a21\u677f\u3002<\/p>\n<p>2. \u7c7b\u578b\u7cfb\u7edf\u7684\u201c\u5929\u7136\u878d\u5408\u201d<\/p>\n<p>\u5f97\u76ca\u4e8e\u540c\u6784&#xff0c;TypeScript \u7684\u7c7b\u578b\u5b9a\u4e49\u4e0d\u518d\u9700\u8981\u8de8\u7f51\u7edc\u540c\u6b65\u3002\u4f60\u5728\u670d\u52a1\u7aef\u83b7\u53d6\u7684\u6570\u636e\u6a21\u578b&#xff0c;\u76f4\u63a5\u5c31\u662f UI \u7ec4\u4ef6\u63a5\u6536\u5230\u7684 Props \u7ea6\u675f\u3002\u8fd9\u79cd\u201c\u7aef\u5230\u7aef\u7684\u7c7b\u578b\u5b89\u5168&#xff08;End-to-End Type Safety&#xff09;\u201d\u662f\u5168\u6808\u540c\u6784\u5728\u5de5\u7a0b\u6548\u7387\u4e0a\u7684\u5dc5\u5cf0\u4f53\u73b0\u3002<\/p>\n<p>3. \u6027\u80fd\u7684\u201c\u964d\u7ef4\u6253\u51fb\u201d<\/p>\n<p>\u5168\u6808\u540c\u6784\u5141\u8bb8\u6846\u67b6\u6839\u636e\u4e1a\u52a1\u9700\u6c42&#xff0c;\u81ea\u7531\u5730\u51b3\u5b9a\u6bcf\u4e00\u884c\u4ee3\u7801\u5e94\u8be5\u5728\u54ea\u91cc\u6267\u884c\u3002<\/p>\n<ul>\n<li>\n<p>\u5bf9\u4e8e\u4fa7\u91cd\u5185\u5bb9\u5c55\u793a\u7684\u90e8\u5206&#xff0c;\u5b83\u5728\u670d\u52a1\u5668\u5b8c\u6210\u9884\u6e32\u67d3&#xff0c;\u7ed9\u7528\u6237\u79d2\u5f00\u7684\u4f53\u9a8c&#xff08;SSR\/SSG&#xff09;\u3002<\/p>\n<\/li>\n<li>\n<p>\u5bf9\u4e8e\u4fa7\u91cd\u4ea4\u4e92\u7684\u90e8\u5206&#xff0c;\u5b83\u5728\u6d4f\u89c8\u5668\u4e2d\u6fc0\u6d3b&#xff08;Hydration&#xff09;&#xff0c;\u8d4b\u4e88\u5e94\u7528\u7075\u52a8\u7684\u751f\u547d\u529b\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u56db\u3001 \u54f2\u5b66\u5347\u534e&#xff1a;\u4ece\u201c\u6280\u201d\u5230\u201c\u9053\u201d\u7684\u6f14\u8fdb<\/p>\n<p>\u5982\u679c\u6211\u4eec\u501f\u9274\u9ed1\u683c\u5c14\u7684\u8fa9\u8bc1\u6cd5&#xff0c;Web \u5f00\u53d1\u7684\u6f14\u8fdb\u5b8c\u7f8e\u7b26\u5408\u201c\u80af\u5b9a\u3001\u5426\u5b9a\u3001\u5426\u5b9a\u4e4b\u5426\u5b9a\u201d\u7684\u89c4\u5f8b&#xff1a;<\/p>\n<li>\n<p>\u5408&#xff08;\u80af\u5b9a&#xff09;&#xff1a;\u00a0\u65e9\u671f\u7684\u4e00\u4f53\u5316&#xff08;PHP\/JSP&#xff09;&#xff0c;\u4ee3\u7801\u4e0e\u6570\u636e\u5728\u4e00\u8d77\u3002<\/p>\n<\/li>\n<li>\n<p>\u5206&#xff08;\u5426\u5b9a&#xff09;&#xff1a;\u00a0\u524d\u540e\u7aef\u5206\u79bb&#xff08;SPA &#043; API&#xff09;&#xff0c;\u4ee3\u7801\u4e0e\u6570\u636e\u88ab\u7269\u7406\u9694\u7edd\u3002<\/p>\n<\/li>\n<li>\n<p>\u5927\u4e00\u7edf&#xff08;\u5426\u5b9a\u4e4b\u5426\u5b9a&#xff09;&#xff1a;\u00a0Next.js \u7684\u5168\u6808\u540c\u6784\u3002\u5b83\u770b\u8d77\u6765\u50cf\u56de\u5230\u4e86\u201c\u4e00\u4f53\u5316\u201d&#xff0c;\u4f46\u8fd9\u79cd\u56de\u5f52\u662f\u5e26\u6709 SPA \u5f3a\u5927\u4ea4\u4e92\u80fd\u529b\u548c\u5206\u5e03\u5f0f\u67b6\u6784\u601d\u7ef4\u7684\u9ad8\u7ef4\u5ea6\u56de\u5f52\u3002<\/p>\n<\/li>\n<p>\u201c\u4f55\u4e3a\u5168\u6808&#xff1f;\u201d\u00a0\u5728 Next.js \u7684\u8bed\u5883\u4e0b&#xff0c;\u5168\u6808\u4e0d\u518d\u662f\u6307\u4e00\u4e2a\u4eba\u80fd\u5e72\u4e24\u4e2a\u4eba\u7684\u6d3b&#xff0c;\u800c\u662f\u6307\u4e00\u79cd\u6d88\u9664\u6469\u64e6\u7684\u5f00\u53d1\u8303\u5f0f\u3002<\/p>\n<p>\u5b83\u8981\u6c42\u5f00\u53d1\u8005\u4ece\u201c\u6211\u6b63\u5728\u5199\u4e00\u4e2a\u524d\u7aef\u9875\u9762\u201d\u6216\u201c\u6211\u6b63\u5728\u5199\u4e00\u4e2a\u540e\u7aef\u63a5\u53e3\u201d\u7684\u72ed\u9698\u8ba4\u77e5\u4e2d\u8df3\u51fa\u6765&#xff0c;\u8f6c\u800c\u601d\u8003&#xff1a;\u201c\u6211\u6b63\u5728\u6784\u5efa\u4e00\u4e2a\u5b8c\u6574\u7684\u7528\u6237\u4f53\u9a8c\u3002\u8fd9\u4e2a\u4f53\u9a8c\u7684\u4e00\u90e8\u5206\u53d1\u751f\u5728\u4e91\u7aef&#xff0c;\u53e6\u4e00\u90e8\u5206\u53d1\u751f\u5728\u7528\u6237\u7684\u624b\u5fc3\u91cc\u3002\u201d<\/p>\n<p>\u4e94\u3001 \u5c0f\u7ed3&#xff1a;\u91cd\u5851\u5f00\u53d1\u8005\u7684\u7075\u9b42<\/p>\n<p>\u4f5c\u4e3a\u4e00\u540d\u8ba1\u7b97\u673a\u4e13\u5bb6&#xff0c;\u6211\u5e38\u5bf9\u5e74\u8f7b\u7684\u5f00\u53d1\u8005\u8bf4&#xff1a;\u6280\u672f\u603b\u662f\u5411\u7740\u201c\u964d\u4f4e\u71b5\u503c\u201d\u7684\u65b9\u5411\u8fdb\u5316\u7684\u3002<\/p>\n<p>\u524d\u540e\u7aef\u5206\u79bb\u66fe\u56e0\u89e3\u51b3\u4e86\u534f\u4f5c\u7684\u6df7\u4e71\u800c\u5927\u884c\u5176\u9053&#xff0c;\u5374\u4e5f\u56e0\u5f15\u5165\u4e86\u67b6\u6784\u7684\u71b5\u589e&#xff08;\u590d\u6742\u7684\u901a\u4fe1\u3001\u5272\u88c2\u7684\u72b6\u6001&#xff09;\u800c\u9762\u4e34\u6311\u6218\u3002Next.js \u5e26\u6765\u7684\u201c\u5168\u6808\u540c\u6784\u201d\u662f\u5bf9 Web \u672c\u8d28\u7684\u4e00\u6b21\u6df1\u523b\u56de\u5f52\u2014\u2014\u5373\u00a0Web \u59cb\u7ec8\u662f\u5173\u4e8e\u201c\u4fe1\u606f\u201d\u4e0e\u201c\u4ea4\u4e92\u201d\u7684\u7edf\u4e00\u4f53\u3002<\/p>\n<p>\u5728\u8fd9\u672c\u4e66\u4e2d&#xff0c;\u6211\u4eec\u5c06\u4e0d\u518d\u5b64\u7acb\u5730\u8ba8\u8bba React \u7ec4\u4ef6\u6216 Node.js \u670d\u52a1\u3002\u6211\u4eec\u5c06\u8ddf\u968f Next.js \u7684\u8bbe\u8ba1\u54f2\u5b66&#xff0c;\u5b66\u4e60\u5982\u4f55\u5728\u8fd9\u5957\u540c\u6784\u7684\u4f53\u7cfb\u4e2d&#xff0c;\u50cf\u6307\u6325\u4ea4\u54cd\u4e50\u56e2\u4e00\u6837\u534f\u8c03\u670d\u52a1\u5668\u4e0e\u5ba2\u6237\u7aef&#xff0c;\u594f\u54cd\u5168\u6808\u5f00\u53d1\u7684\u6700\u9ad8\u4e50\u7ae0\u3002<\/p>\n<p>\u8fd9\u5c31\u662f Next.js \u7684\u4e16\u754c\u89c2&#xff1a;\u4e07\u6cd5\u5f52\u5b97&#xff0c;\u8ba9\u590d\u6742\u6d88\u5931\u5728\u67b6\u6784\u7684\u4f18\u96c5\u4e4b\u4e2d\u3002<\/p>\n<h3>1.2 Web \u6e32\u67d3\u7b80\u53f2\u2014\u2014\u4ece\u201c\u670d\u52a1\u5668\u5370\u5237\u201d\u5230\u201c\u7aef\u4e91\u5171\u751f\u201d\u7684\u6f14\u8fdb\u903b\u8f91<\/h3>\n<p>\u5982\u679c\u8bf4 Web \u5f00\u53d1\u662f\u4e00\u90e8\u5173\u4e8e\u201c\u5982\u4f55\u5411\u7528\u6237\u5448\u73b0\u5185\u5bb9\u201d\u7684\u53f2\u8bd7&#xff0c;\u90a3\u4e48\u201c\u6e32\u67d3&#xff08;Rendering&#xff09;\u201d\u5c31\u662f\u8fd9\u90e8\u53f2\u8bd7\u7684\u6838\u5fc3\u51b2\u7a81\u70b9\u3002\u6240\u8c13\u6e32\u67d3&#xff0c;\u672c\u8d28\u4e0a\u662f\u5c06\u67af\u71e5\u7684\u6570\u636e&#xff08;Data&#xff09;\u8f6c\u5316\u4e3a\u751f\u52a8\u7684\u89c6\u56fe&#xff08;View&#xff09;\u7684\u8fc7\u7a0b\u3002<\/p>\n<p>\u5728\u8fc7\u53bb\u4e09\u5341\u5e74\u4e2d&#xff0c;\u8fd9\u4e2a\u8fc7\u7a0b\u5728\u670d\u52a1\u5668&#xff08;Server&#xff09;\u4e0e\u6d4f\u89c8\u5668&#xff08;Client&#xff09;\u4e4b\u95f4\u5f80\u590d\u6a2a\u8df3&#xff0c;\u50cf\u6781\u4e86\u54f2\u5b66\u4e0a\u7684\u201c\u5426\u5b9a\u4e4b\u5426\u5b9a\u201d\u3002\u6bcf\u4e00\u6b21\u6743\u529b\u7684\u4ea4\u63a5&#xff0c;\u90fd\u4f34\u968f\u7740\u6280\u672f\u7ea2\u5229\u7684\u7206\u53d1\u4e0e\u6027\u80fd\u74f6\u9888\u7684\u8f6c\u79fb\u3002<\/p>\n<p>\u4e00\u3001 \u53e4\u5178\u4e3b\u4e49\u65f6\u4ee3&#xff1a;\u670d\u52a1\u5668\u7684\u201c\u5b64\u6743\u7edf\u6cbb\u201d (MPA)<\/p>\n<p>\u5728 Web \u7684\u8fdc\u53e4\u65f6\u671f&#xff0c;\u6240\u6709\u7684\u6743\u529b\u90fd\u96c6\u4e2d\u5728\u670d\u52a1\u5668\u624b\u4e2d\u3002\u65e0\u8bba\u662f\u4ee5 PHP\u3001JSP \u8fd8\u662f ASP \u4e3a\u4ee3\u8868\u7684\u67b6\u6784&#xff0c;\u6211\u4eec\u7edf\u79f0\u4e3a\u00a0MPA&#xff08;Multi-Page Application&#xff0c;\u591a\u9875\u9762\u5e94\u7528&#xff09;\u3002<\/p>\n<p>1. \u6e32\u67d3\u903b\u8f91&#xff1a;\u5b9e\u65f6\u5370\u5237<\/p>\n<p>\u6bcf\u5f53\u7528\u6237\u70b9\u51fb\u4e00\u4e2a\u6309\u94ae&#xff0c;\u6d4f\u89c8\u5668\u5c31\u4f1a\u5411\u670d\u52a1\u5668\u53d1\u8d77\u4e00\u6b21\u5b8c\u6574\u7684 HTTP \u8bf7\u6c42\u3002\u670d\u52a1\u5668\u63a5\u5230\u6307\u4ee4\u540e&#xff0c;\u50cf\u4e00\u540d\u719f\u7ec3\u7684\u5370\u5237\u5de5\u4eba&#xff0c;\u4ece\u6570\u636e\u5e93\u4e2d\u63d0\u53d6\u6570\u636e&#xff0c;\u586b\u5165 HTML \u6a21\u677f&#xff0c;\u6700\u7ec8\u5c06\u4e00\u5f20\u5b8c\u6574\u7684\u201c\u62a5\u7eb8\u201d&#xff08;HTML \u6e90\u7801&#xff09;\u901a\u8fc7\u7f51\u7edc\u53d1\u9001\u7ed9\u7528\u6237\u3002<\/p>\n<p>$$Render_{Classic} &#061; \\\\text{Server}(f(Data, Template)) \\\\rightarrow \\\\text{Full HTML}$$<\/p>\n<p>2. \u4f18\u7f3a\u70b9\u8fa9\u8bc1<\/p>\n<ul>\n<li>\n<p>\u4f18\u52bf&#xff08;\u521d\u604b\u822c\u7684\u7f8e\u597d&#xff09;&#xff1a; \u8fd9\u79cd\u6a21\u5f0f\u5bf9\u641c\u7d22\u5f15\u64ce\u6781\u5176\u53cb\u597d&#xff0c;\u56e0\u4e3a\u722c\u866b\u6293\u53d6\u5230\u7684\u662f\u8d27\u771f\u4ef7\u5b9e\u7684\u6587\u5b57\u5185\u5bb9\u3002\u540c\u65f6&#xff0c;\u9996\u5c4f\u52a0\u8f7d\u6781\u5feb&#xff0c;\u56e0\u4e3a\u6d4f\u89c8\u5668\u62ff\u5230 HTML \u540e\u5373\u53ef\u7acb\u5373\u89e3\u6790\u663e\u793a\u3002<\/p>\n<\/li>\n<li>\n<p>\u5f0a\u7aef&#xff08;\u6c89\u91cd\u7684\u8d1f\u62c5&#xff09;&#xff1a; \u6bcf\u6b21\u4ea4\u4e92\u90fd\u9700\u8981\u201c\u767d\u5c4f\u5237\u65b0\u201d\u3002\u7528\u6237\u4ec5\u4ec5\u662f\u70b9\u4e86\u4e00\u4e2a\u8d5e&#xff0c;\u6574\u4e2a\u9875\u9762\u5c31\u8981\u91cd\u65b0\u52a0\u8f7d\u3002\u8fd9\u79cd\u201c\u95ea\u70c1\u201d\u611f\u6210\u4e3a\u4e86 Web \u8fc8\u5411\u201c\u4e1d\u6ed1\u5e94\u7528\u201d\u7684\u6700\u5927\u969c\u788d\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e8c\u3001 \u6d6a\u6f2b\u4e3b\u4e49\u65f6\u4ee3&#xff1a;\u6d4f\u89c8\u5668\u7684\u201c\u5168\u6743\u59d4\u6258\u201d (SPA)<\/p>\n<p>\u968f\u7740 Google \u5728 Gmail \u4e2d\u5927\u89c4\u6a21\u5e94\u7528 Ajax \u6280\u672f&#xff0c;\u4ee5\u53ca React\u3001Vue\u3001Angular \u4e09\u8db3\u9f0e\u7acb\u5c40\u9762\u7684\u5f62\u6210&#xff0c;Web \u8fdb\u5165\u4e86\u00a0SPA&#xff08;Single-Page Application&#xff0c;\u5355\u9875\u5e94\u7528&#xff09;\u00a0\u7684\u9ec4\u91d1\u65f6\u4ee3\u3002<\/p>\n<p>1. \u6e32\u67d3\u903b\u8f91&#xff1a;\u6bdb\u576f\u623f\u4ea4\u4ed8<\/p>\n<p>\u5728 SPA \u65f6\u4ee3&#xff0c;\u6743\u529b\u7684\u5929\u5e73\u5267\u70c8\u5730\u503e\u5411\u4e86\u6d4f\u89c8\u5668\u3002\u670d\u52a1\u5668\u4e0d\u518d\u53d1\u9001\u201c\u62a5\u7eb8\u201d&#xff0c;\u800c\u662f\u53d1\u9001\u4e00\u4e2a\u6781\u5176\u7b80\u5355\u7684\u201c\u6bdb\u576f\u623f\u201d\u2014\u2014\u4e00\u4e2a\u51e0\u4e4e\u4e3a\u7a7a\u7684 HTML \u6587\u4ef6\u3002<\/p>\n<p>\u6240\u6709\u7684\u903b\u8f91\u90fd\u88ab\u6253\u5305\u8fdb\u4e86\u4e00\u4e2a\u5de8\u5927\u7684 JavaScript \u6587\u4ef6\u4e2d\u3002\u5f53\u6d4f\u89c8\u5668\u4e0b\u8f7d\u5b8c\u8fd9\u4e2a JS \u540e&#xff0c;\u7a0b\u5e8f\u624d\u6b63\u5f0f\u542f\u52a8&#xff1a;\u5b83\u4f1a\u5411\u540e\u7aef\u8bf7\u6c42\u6570\u636e&#xff0c;\u7136\u540e\u5728\u7528\u6237\u672c\u5730\u751f\u6210\u6240\u6709\u7684 DOM \u8282\u70b9\u3002<\/p>\n<p>$$Render_{SPA} &#061; \\\\text{Browser}(f(Data_{API}, JS\\\\_Bundle)) \\\\rightarrow \\\\text{DOM}$$<\/p>\n<p>2. \u9635\u75db\u4e0e\u5371\u673a<\/p>\n<ul>\n<li>\n<p>\u7528\u6237\u4f53\u9a8c\u7684\u98de\u8dc3&#xff1a; \u9875\u9762\u5207\u6362\u4e0d\u518d\u5237\u65b0&#xff0c;\u50cf\u539f\u751f\u5e94\u7528\u4e00\u6837\u6d41\u7545\u3002<\/p>\n<\/li>\n<li>\n<p>SEO \u7684\u5669\u68a6&#xff1a; \u641c\u7d22\u5f15\u64ce\u722c\u866b\u770b\u5230\u7684\u662f\u4e00\u7247\u7a7a\u767d&#xff08;div id&#061;&#034;app&#034;&#xff09;&#xff0c;\u5b83\u4eec\u8ba4\u4e3a\u8fd9\u662f\u4e00\u4e2a\u6ca1\u6709\u5185\u5bb9\u7684\u7f51\u7ad9\u3002<\/p>\n<\/li>\n<li>\n<p>\u201c\u9996\u5c4f\u767d\u5c4f\u201d&#xff1a; \u968f\u7740 JS \u4f53\u79ef\u8d8a\u6765\u8d8a\u5927&#xff0c;\u7528\u6237\u5728\u770b\u5230\u4efb\u4f55\u5185\u5bb9\u4e4b\u524d&#xff0c;\u5fc5\u987b\u7b49\u5f85\u51e0\u5146\u5b57\u8282\u7684\u4ee3\u7801\u4e0b\u8f7d\u5e76\u6267\u884c\u5b8c\u6bd5\u3002\u8fd9\u5728\u79fb\u52a8\u7aef\u5f31\u7f51\u73af\u5883\u4e0b\u7b80\u76f4\u662f\u707e\u96be\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e09\u3001 \u4fee\u6b63\u4e3b\u4e49\u65f6\u4ee3&#xff1a;SSR \u4e0e SSG \u7684\u4e8c\u5143\u5e76\u8fdb<\/p>\n<p>\u4e3a\u4e86\u89e3\u51b3 SPA \u7684\u75db\u70b9&#xff0c;\u5f00\u53d1\u8005\u4eec\u5f00\u59cb\u53cd\u601d&#xff1a;\u80fd\u4e0d\u80fd\u65e2\u8981 SPA \u7684\u4e1d\u6ed1\u4ea4\u4e92&#xff0c;\u53c8\u8981 MPA \u7684\u9996\u5c4f\u901f\u5ea6&#xff1f;\u00a0\u4e8e\u662f&#xff0c;\u670d\u52a1\u5668\u5f00\u59cb\u201c\u90e8\u5206\u6536\u56de\u201d\u6e32\u67d3\u6743\u3002<\/p>\n<p>1. SSR&#xff08;Server-Side Rendering&#xff09;&#xff1a;\u52a8\u6001\u540c\u6784<\/p>\n<p>Next.js \u7684\u65e9\u671f\u6210\u529f\u6b63\u662f\u5efa\u7acb\u5728 SSR \u4e4b\u4e0a\u3002\u5b83\u7684\u903b\u8f91\u662f&#xff1a;\u5f53\u8bf7\u6c42\u5230\u6765\u65f6&#xff0c;\u670d\u52a1\u5668\u5148\u5728\u5185\u5b58\u91cc\u8dd1\u4e00\u904d React \u4ee3\u7801&#xff0c;\u751f\u6210 HTML \u7247\u6bb5\u53d1\u7ed9\u6d4f\u89c8\u5668&#xff0c;\u8ba9\u7528\u6237\u5148\u770b\u4e0a\u5185\u5bb9&#xff1b;\u968f\u540e\u6d4f\u89c8\u5668\u518d\u4e0b\u8f7d JS \u8d4b\u4e88\u9875\u9762\u4ea4\u4e92\u80fd\u529b&#xff08;\u8fd9\u4e00\u6b65\u88ab\u79f0\u4e3a\u00a0Hydration&#xff0c;\u6c34\u5408&#xff09;\u3002<\/p>\n<p>2. SSG&#xff08;Static Site Generation&#xff09;&#xff1a;\u6781\u81f4\u7684\u9884\u5224<\/p>\n<p>\u5982\u679c\u8bf4 SSR \u662f\u201c\u73b0\u505a\u73b0\u5356\u201d&#xff0c;\u90a3\u4e48 SSG \u5c31\u662f\u201c\u9884\u5236\u83dc\u201d\u3002\u5b83\u5728\u6784\u5efa\u9636\u6bb5&#xff08;Build Time&#xff09;\u5c31\u628a\u6240\u6709\u7684\u9875\u9762\u6e32\u67d3\u6210\u9759\u6001 HTML\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" height=\"67\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/01\/20260126160512-697790b866aa4.png\" width=\"600\" \/><\/p>\n<ul>\n<li>\n<p>\u6027\u80fd\u5dc5\u5cf0&#xff1a; \u7531\u4e8e\u662f\u9759\u6001\u6587\u4ef6&#xff0c;\u5b83\u4eec\u53ef\u4ee5\u90e8\u7f72\u5728 CDN \u4e0a&#xff0c;\u79bb\u7528\u6237\u6700\u8fd1&#xff0c;\u54cd\u5e94\u65f6\u95f4\u901a\u5e38\u5728\u6beb\u79d2\u7ea7\u3002<\/p>\n<\/li>\n<li>\n<p>\u5c40\u9650\u6027&#xff1a; \u53ea\u8981\u6570\u636e\u4e00\u53d8&#xff08;\u4f8b\u5982\u7535\u5546\u7684\u4ef7\u683c&#xff09;&#xff0c;\u5c31\u9700\u8981\u91cd\u65b0\u6784\u5efa\u6574\u4e2a\u7f51\u7ad9&#xff0c;\u8fd9\u663e\u7136\u65e0\u6cd5\u5904\u7406\u5927\u89c4\u6a21\u52a8\u6001\u6570\u636e\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u56db\u3001 \u73b0\u4ee3\u7efc\u5408\u8bba&#xff1a;ISR \u4e0e PPR \u7684\u827a\u672f<\/p>\n<p>\u5386\u53f2\u5728 Next.js \u7684\u63a8\u52a8\u4e0b&#xff0c;\u8fdb\u5165\u4e86\u66f4\u7cbe\u7ec6\u5316\u7684\u9636\u6bb5\u3002\u6280\u672f\u4e0d\u518d\u662f\u975e\u9ed1\u5373\u767d\u7684\u3002<\/p>\n<p>1. ISR&#xff08;Incremental Static Regeneration&#xff09;&#xff1a;\u6d41\u52a8\u7684\u9759\u6001<\/p>\n<p>Next.js \u5f15\u5165\u4e86 ISR&#xff0c;\u5b83\u5141\u8bb8\u5f00\u53d1\u8005\u5728\u4e0d\u91cd\u65b0\u6784\u5efa\u6574\u4e2a\u5e94\u7528\u7684\u60c5\u51b5\u4e0b&#xff0c;\u6bcf\u9694\u4e00\u6bb5\u65f6\u95f4\u81ea\u52a8\u66f4\u65b0\u7279\u5b9a\u7684\u9759\u6001\u9875\u9762\u3002\u8fd9\u662f\u4e00\u79cd\u201c\u81ea\u6108\u201d\u5f0f\u7684\u67b6\u6784&#xff0c;\u5e73\u8861\u4e86\u9759\u6001\u7684\u901f\u5ea6\u4e0e\u6570\u636e\u7684\u5b9e\u65f6\u6027\u3002<\/p>\n<p>2. PPR&#xff08;Partial Prerendering&#xff09;&#xff1a;\u6e32\u67d3\u7684\u7ec8\u6781\u5f62\u6001<\/p>\n<p>\u8fd9\u662f Next.js 14\/15 \u5f15\u5165\u7684\u6700\u8ff7\u4eba\u7684\u6982\u5ff5\u3002\u5728\u4e00\u4e2a\u9875\u9762\u4e2d&#xff0c;\u9759\u6001\u7684&#xff08;Static&#xff09;\u548c\u52a8\u6001\u7684&#xff08;Dynamic&#xff09;\u53ef\u4ee5\u5171\u5b58\u3002<\/p>\n<p>\u60f3\u8c61\u4e00\u4e2a\u7535\u5546\u9875\u9762&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u5546\u54c1\u6807\u9898\u3001\u56fe\u7247\u662f\u9759\u6001\u7684&#xff0c;\u4ece\u6784\u5efa\u65f6\u5c31\u5b9a\u597d\u4e86&#xff0c;\u77ac\u95f4\u52a0\u8f7d\u3002<\/p>\n<\/li>\n<li>\n<p>\u4ef7\u683c\u3001\u5e93\u5b58\u3001\u8d2d\u7269\u8f66\u72b6\u6001\u662f\u52a8\u6001\u7684&#xff0c;\u901a\u8fc7\u670d\u52a1\u7aef\u6d41&#xff08;Streaming&#xff09;\u5f02\u6b65\u6ce8\u5165\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u8fd9\u79cd\u6a21\u5f0f\u6253\u7834\u4e86\u201c\u6574\u4e2a\u9875\u9762\u5fc5\u987b\u662f\u540c\u4e00\u79cd\u6e32\u67d3\u6a21\u5f0f\u201d\u7684\u65e7\u6846\u6846&#xff0c;\u5b9e\u73b0\u4e86\u201c\u7a7a\u7a74\u586b\u8865\u201d\u5f0f\u7684\u6781\u81f4\u6027\u80fd\u4f18\u5316\u3002<\/p>\n<p>\u4e94\u3001 \u7ed3\u8bed&#xff1a;\u4ece\u201c\u5982\u4f55\u6e32\u67d3\u201d\u5230\u201c\u4f55\u65f6\u4f55\u5730\u6e32\u67d3\u201d<\/p>\n<p>\u56de\u987e\u8fd9\u6bb5\u7b80\u53f2&#xff0c;\u4f60\u4f1a\u53d1\u73b0 Web \u6e32\u67d3\u7684\u6f14\u8fdb\u903b\u8f91\u5e76\u4e0d\u662f\u4e00\u79cd\u6280\u672f\u53d6\u4ee3\u53e6\u4e00\u79cd\u6280\u672f&#xff0c;\u800c\u662f\u5728\u65f6\u95f4\u8f74&#xff08;\u6784\u5efa\u65f6 vs \u8bf7\u6c42\u65f6&#xff09;\u548c\u7a7a\u95f4\u8f74&#xff08;\u670d\u52a1\u7aef vs \u5ba2\u6237\u7aef&#xff09;\u4e0a\u5bfb\u627e\u6700\u4f18\u89e3\u3002<\/p>\n<ul>\n<li>\n<p>MPA\u00a0\u662f\u670d\u52a1\u5668\u7684\u5b64\u72ec\u3002<\/p>\n<\/li>\n<li>\n<p>SPA\u00a0\u662f\u6d4f\u89c8\u5668\u7684\u72c2\u6b22\u3002<\/p>\n<\/li>\n<li>\n<p>Next.js \u7684\u73b0\u4ee3\u67b6\u6784\u00a0\u5219\u662f\u7aef\u4e0e\u4e91\u7684\u5171\u821e\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u73b0\u5728\u7684\u5168\u6808\u5f00\u53d1&#xff0c;\u4e0d\u518d\u662f\u7ea0\u7ed3\u4e8e\u201c\u6211\u8be5\u7528\u54ea\u79cd\u6e32\u67d3\u6a21\u5f0f\u201d&#xff0c;\u800c\u662f\u50cf\u4e00\u540d\u67b6\u6784\u5e08&#xff0c;\u6839\u636e\u4e1a\u52a1\u573a\u666f&#xff08;\u662f\u535a\u5ba2&#xff1f;\u662f\u4eea\u8868\u76d8&#xff1f;\u8fd8\u662f\u793e\u4ea4\u5a92\u4f53&#xff1f;&#xff09;\u53bb\u7075\u6d3b\u7ec4\u5408\u8fd9\u4e9b\u80fd\u529b\u3002Next.js \u7684\u4f1f\u5927\u4e4b\u5904\u5728\u4e8e&#xff0c;\u5b83\u5c06\u8fd9\u4e9b\u590d\u6742\u7684\u6e32\u67d3\u6a21\u5f0f\u5c01\u88c5\u6210\u4e86\u7b80\u5355\u7684 API&#xff0c;\u8ba9\u5f00\u53d1\u8005\u5728\u8ffd\u6c42\u6781\u81f4\u6027\u80fd\u7684\u9053\u8def\u4e0a&#xff0c;\u4e0d\u518d\u9700\u8981\u505a\u75db\u82e6\u7684\u9009\u62e9\u9898\u3002<\/p>\n<h3>1.3 \u4e3a\u4f55\u662f Next.js&#xff1f;\u2014\u2014\u201c\u751f\u4ea7\u73af\u5883\u5c31\u7eea\u201d\u7684 Node.js \u6846\u67b6\u6807\u6746<\/h3>\n<p>\u5728 Node.js \u7684\u751f\u6001\u957f\u6cb3\u4e2d&#xff0c;\u6846\u67b6\u7684\u66f4\u8fed\u901f\u5ea6\u66fe\u8ba9\u5f00\u53d1\u8005\u4eec\u9677\u5165\u6df1\u6c89\u7684\u201c\u9009\u62e9\u75b2\u52b3\u201d\u3002\u4ece\u65e9\u671f\u7684 Express\u3001Koa \u7684\u6781\u7b80\u4e3b\u4e49&#xff0c;\u5230 NestJS \u7684\u9ad8\u5ea6\u5de5\u7a0b\u5316&#xff0c;\u6bcf\u4e00\u4e2a\u6846\u67b6\u90fd\u8bd5\u56fe\u89e3\u51b3\u7279\u5b9a\u7ef4\u5ea6\u7684\u95ee\u9898\u3002<\/p>\n<p>\u7136\u800c&#xff0c;\u5f53\u6211\u4eec\u628a\u76ee\u5149\u6295\u5411\u201c\u751f\u4ea7\u73af\u5883&#xff08;Production Ready&#xff09;\u201d\u8fd9\u4e00\u6781\u5176\u82db\u523b\u7684\u6807\u51c6\u65f6&#xff0c;Next.js \u8131\u9896\u800c\u51fa&#xff0c;\u6210\u4e3a\u4e86\u5168\u7403\u5927\u5382\u4e0e\u521b\u4e1a\u8005\u7684\u5171\u8bc6\u3002\u5b83\u4e0d\u4ec5\u4ec5\u662f\u4e00\u4e2a\u6846\u67b6&#xff0c;\u66f4\u662f\u4e00\u5957\u5173\u4e8e\u201c\u5982\u4f55\u5de5\u4e1a\u5316\u5730\u751f\u4ea7\u9ad8\u8d28\u91cf Web \u5e94\u7528\u201d\u7684\u6807\u51c6\u7b54\u6848\u3002<\/p>\n<p>\u4e00\u3001 \u7ec8\u7ed3\u201c\u51b3\u7b56\u75b2\u52b3\u201d&#xff1a;\u7ea6\u5b9a\u4f18\u4e8e\u914d\u7f6e\u7684\u80dc\u5229<\/p>\n<p>\u5728\u4f20\u7edf\u7684 Node.js \u5f00\u53d1\u4e2d&#xff0c;\u642d\u5efa\u4e00\u4e2a\u751f\u4ea7\u7ea7\u522b\u7684\u9879\u76ee\u5c31\u50cf\u7ec4\u88c5\u4e00\u53f0\u9ad8\u5ea6\u590d\u6742\u7684\u673a\u5668\u3002\u4f60\u9700\u8981\u4eb2\u81ea\u9009\u578b&#xff1a;\u8def\u7531\u600e\u4e48\u505a&#xff1f;SSR \u600e\u4e48\u5199&#xff1f;\u4ee3\u7801\u5206\u5272&#xff08;Code Splitting&#xff09;\u5982\u4f55\u5904\u7406&#xff1f;Webpack \u600e\u4e48\u8c03\u4f18&#xff1f;<\/p>\n<p>\u8fd9\u79cd\u6781\u81f4\u7684\u81ea\u7531\u5e26\u6765\u7684\u4ee3\u4ef7\u662f\u6781\u81f4\u7684\u6df7\u4e71\u3002\u6bcf\u4e2a\u56e2\u961f\u7684\u67b6\u6784\u90fd\u50cf\u4e00\u6735\u5947\u8469&#xff0c;\u65b0\u6210\u5458\u5165\u804c\u9700\u8981\u6570\u5468\u65f6\u95f4\u624d\u80fd\u6478\u6e05\u8def\u7531\u8df3\u8f6c\u7684\u6697\u95e8\u3002<\/p>\n<p>Next.js \u7684\u51fa\u73b0&#xff0c;\u5ba3\u544a\u4e86\u201c\u6df7\u6c8c\u65f6\u4ee3\u201d\u7684\u7ec8\u7ed3\u3002 \u5b83\u63a8\u884c \u7ea6\u5b9a\u4f18\u4e8e\u914d\u7f6e&#xff08;Convention over Configuration&#xff09; \u7684\u54f2\u5b66&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u6587\u4ef6\u5939\u5373\u8def\u7531&#xff1a; \u65e0\u9700\u7f16\u5199\u5e9e\u5927\u7684\u8def\u7531\u8868&#xff0c;\u7ed3\u6784\u4e00\u76ee\u4e86\u7136\u3002<\/p>\n<\/li>\n<li>\n<p>\u96f6\u914d\u7f6e\u6784\u5efa&#xff1a; \u4ee3\u7801\u5206\u5272\u3001\u538b\u7f29\u3001\u70ed\u66f4\u65b0\u5728\u5e95\u5c42\u9759\u9ed8\u8fd0\u884c&#xff0c;\u4e14\u7531\u5b98\u65b9\u8fdb\u884c\u6700\u6df1\u5ea6\u7684 Turbopack \u8c03\u4f18\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u8fd9\u79cd\u7ea6\u5b9a\u4e0d\u4ec5\u964d\u4f4e\u4e86\u8ba4\u77e5\u8d1f\u62c5&#xff0c;\u66f4\u91cd\u8981\u7684\u662f&#xff0c;\u5b83\u5efa\u7acb\u4e86\u4e00\u5957\u8de8\u56e2\u961f\u7684\u901a\u7528\u8bed\u8a00\u3002\u65e0\u8bba\u662f\u5728\u7845\u8c37\u7684\u521d\u521b\u516c\u53f8&#xff0c;\u8fd8\u662f\u5728\u56fd\u5185\u7684\u4e92\u8054\u7f51\u5de8\u5934&#xff0c;\u53ea\u8981\u662f Next.js \u9879\u76ee&#xff0c;\u4efb\u4f55\u5f00\u53d1\u8005\u90fd\u80fd\u5728\u5341\u5206\u949f\u5185\u627e\u5230\u4e1a\u52a1\u903b\u8f91\u7684\u5207\u5165\u70b9\u3002<\/p>\n<p>\u4e8c\u3001 \u6027\u80fd\u7684\u201c\u62a4\u57ce\u6cb3\u201d&#xff1a;\u8ba9\u4f18\u79c0\u6210\u4e3a\u9ed8\u8ba4\u8bbe\u7f6e<\/p>\n<p>\u5728 Web \u5f00\u53d1\u4e2d&#xff0c;\u6027\u80fd\u5f80\u5f80\u662f\u201c\u4e8b\u540e\u8865\u6551\u201d\u7684\u4ea7\u7269\u3002\u4f46\u5728 Next.js \u7684\u4e16\u754c\u89c2\u91cc&#xff0c;\u6027\u80fd\u662f\u5185\u7f6e\u7684\u57fa\u56e0\u3002<\/p>\n<p>\u5fae\u8f6f\u7684\u9ad8\u7ea7\u5de5\u7a0b\u5e08\u66fe\u63d0\u51fa\u8fc7\u4e00\u4e2a\u6982\u5ff5\u53eb\u00a0\u201c\u6210\u529f\u7684\u9677\u9631&#xff08;The Pit of Success&#xff09;\u201d&#xff1a;\u4e00\u4e2a\u597d\u7684\u6846\u67b6\u5e94\u8be5\u901a\u8fc7\u5176\u8bbe\u8ba1&#xff0c;\u8ba9\u5f00\u53d1\u8005\u5373\u4fbf\u4e0d\u523b\u610f\u8ffd\u6c42&#xff0c;\u4e5f\u4f1a\u81ea\u7136\u800c\u7136\u5730\u843d\u5165\u6210\u529f\u7684\u5883\u5730\u3002Next.js \u4fbf\u662f\u8fd9\u4e00\u7406\u5ff5\u7684\u96c6\u5927\u6210\u8005\u3002<\/p>\n<p>1. \u56fe\u50cf\u4e0e\u5b57\u4f53\u7684\u6781\u81f4\u5185\u5377<\/p>\n<p>\u666e\u901a\u7684\u00a0&lt;img&gt;\u00a0\u6807\u7b7e\u662f\u6027\u80fd\u7684\u6740\u624b&#xff0c;\u5bfc\u81f4\u5e03\u5c40\u6296\u52a8&#xff08;CLS&#xff09;\u548c\u5e26\u5bbd\u6d6a\u8d39\u3002\u800c Next.js \u7684\u00a0next\/image\u00a0\u5f3a\u5236\u8981\u6c42\u5f00\u53d1\u8005\u8003\u8651\u5c3a\u5bf8\u3001\u9884\u52a0\u8f7d\u548c\u683c\u5f0f\u8f6c\u6362\u3002<\/p>\n<p>2. \u9884\u53d6&#xff08;Prefetching&#xff09;\u7684\u9b54\u6cd5<\/p>\n<p>\u5f53\u4f60\u4f7f\u7528\u00a0next\/link\u00a0\u65f6&#xff0c;Next.js \u4f1a\u5728\u540e\u53f0\u81ea\u52a8\u9884\u53d6\u7684\u89c6\u53e3\u5185\u53ef\u89c1\u7684\u8def\u7531\u4ee3\u7801\u3002\u7528\u6237\u70b9\u51fb\u7684\u90a3\u4e00\u523b&#xff0c;\u9875\u9762\u5176\u5b9e\u5df2\u7ecf\u9759\u5019\u5728\u672c\u5730\u7f13\u5b58\u4e2d\u3002\u8fd9\u79cd\u201c\u77ac\u65f6\u611f\u201d\u662f\u624b\u52a8\u914d\u7f6e Webpack \u6781\u96be\u4f01\u53ca\u7684\u3002<\/p>\n<p>3. \u5b57\u4f53\u4f18\u5316\u7684\u7ec6\u8282\u63a7<\/p>\n<p>next\/font\u00a0\u5c06 Google Fonts \u6216\u81ea\u5b9a\u4e49\u5b57\u4f53\u76f4\u63a5\u6253\u5305\u5230\u6784\u5efa\u4ea7\u7269\u4e2d&#xff0c;\u5f7b\u5e95\u6d88\u9664\u4e86\u7531\u4e8e\u5b57\u4f53\u4e0b\u8f7d\u5ef6\u8fdf\u5bfc\u81f4\u7684\u201c\u6587\u5b57\u95ea\u70c1\u201d\u95ee\u9898\u3002\u8fd9\u4e9b\u770b\u4f3c\u5fae\u5c0f\u7684\u70b9&#xff0c;\u7d2f\u52a0\u8d77\u6765\u4fbf\u6784\u6210\u4e86\u751f\u4ea7\u73af\u5883\u4e0b\u65e0\u6cd5\u903e\u8d8a\u7684\u6027\u80fd\u58c1\u5792\u3002<\/p>\n<p>\u4e09\u3001 React \u7684\u201c\u5f71\u5b50\u653f\u5e9c\u201d&#xff1a;\u4e0e\u5b98\u65b9\u56e2\u961f\u7684\u6df1\u5ea6\u5171\u751f<\/p>\n<p>\u4e3a\u4ec0\u4e48\u8bf4 Next.js \u662f React \u7684\u672a\u6765&#xff1f;\u56e0\u4e3a\u5b83\u7684\u5f00\u53d1\u516c\u53f8 Vercel \u6df1\u5ea6\u53c2\u4e0e\u4e86 React \u6838\u5fc3\u7279\u6027\u7684\u5236\u5b9a\u3002<\/p>\n<p>\u4e8b\u5b9e\u4e0a&#xff0c;React Server Components (RSC) \u7b49\u9769\u547d\u6027\u7279\u6027&#xff0c;\u51e0\u4e4e\u662f\u4e0e Next.js App Router \u4f34\u751f\u7814\u53d1\u7684\u3002\u8fd9\u4f7f\u5f97 Next.js \u5b9e\u9645\u4e0a\u6210\u4e3a\u4e86 React \u5b98\u65b9\u8bbe\u8ba1\u7406\u5ff5\u7684\u201c\u5934\u53f7\u8bd5\u9a8c\u573a\u201d\u4e0e\u201c\u53c2\u8003\u5b9e\u73b0\u201d\u3002<\/p>\n<ul>\n<li>\n<p>\u5982\u679c\u4f60\u60f3\u5728\u751f\u4ea7\u73af\u5883\u4f7f\u7528 React \u7684\u6700\u65b0\u5f02\u6b65\u7279\u6027&#xff0c;Next.js \u662f\u552f\u4e00\u7684\u3001\u4e5f\u662f\u6700\u7a33\u5065\u7684\u9009\u62e9\u3002<\/p>\n<\/li>\n<li>\n<p>\u5b83\u5f25\u8865\u4e86 React \u4f5c\u4e3a\u4e00\u4e2a\u201cUI \u5e93\u201d\u5728\u6846\u67b6\u5c42\u9762\u7684\u7f3a\u5931&#xff0c;\u63d0\u4f9b\u4e86\u4e00\u5957\u5b8c\u6574\u7684\u3001\u4ece\u6570\u636e\u83b7\u53d6\u5230\u6e32\u67d3\u7684\u751f\u547d\u5468\u671f\u7ba1\u7406\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u56db\u3001 \u5de5\u4e1a\u5316\u7684\u7a33\u5b9a\u6027&#xff1a;Vercel \u7684\u8d44\u672c\u4e0e\u751f\u6001\u80cc\u4e66<\/p>\n<p>\u201c\u751f\u4ea7\u73af\u5883\u5c31\u7eea\u201d\u6700\u6838\u5fc3\u7684\u6307\u6807\u662f\u7a33\u5b9a\u6027\u3002<\/p>\n<p>Next.js \u80cc\u540e\u7ad9\u7740 Vercel&#xff0c;\u8fd9\u4e0d\u4ec5\u610f\u5473\u7740\u5f3a\u5927\u7684\u8d44\u91d1\u652f\u6301&#xff0c;\u66f4\u610f\u5473\u7740\u5b83\u62e5\u6709\u76ee\u524d\u5730\u7403\u4e0a\u6700\u5148\u8fdb\u7684\u8fb9\u7f18\u8ba1\u7b97\u00a0\u548c\u00a0Serverless\u00a0\u90e8\u7f72\u57fa\u7840\u8bbe\u65bd\u3002<\/p>\n<p>\u4e13\u5bb6\u89c2\u70b9&#xff1a;\u00a0\u4e00\u4e2a\u6846\u67b6\u7684\u4e0a\u9650&#xff0c;\u5f80\u5f80\u53d6\u51b3\u4e8e\u5b83\u7684\u90e8\u7f72\u5929\u82b1\u677f\u3002<\/p>\n<p>Next.js \u5728\u8bbe\u8ba1\u4e0a\u5c31\u8003\u8651\u4e86\u6c34\u5e73\u6269\u5c55\u3002\u65e0\u8bba\u662f\u5904\u7406\u9ed1\u8272\u661f\u671f\u4e94\u7684\u7535\u5546\u6d41\u91cf\u5927\u6f6e&#xff0c;\u8fd8\u662f\u652f\u6491\u5343\u4e07\u7ea7\u7684\u4e2a\u4eba\u535a\u5ba2&#xff0c;\u5176\u6784\u5efa\u51fa\u7684\u201c\u65e0\u72b6\u6001&#xff08;Stateless&#xff09;\u201d\u548c\u201c\u8fb9\u7f18\u5c31\u7eea&#xff08;Edge Ready&#xff09;\u201d\u7684\u7279\u6027&#xff0c;\u8ba9\u90e8\u7f72\u4e0d\u518d\u662f\u8fd0\u7ef4\u7684\u5669\u68a6\u3002<\/p>\n<p>\u4e94\u3001 \u5168\u6808\u7684\u5e95\u8272&#xff1a;API \u8def\u7531\u4e0e\u4e2d\u95f4\u4ef6<\/p>\n<p>Next.js \u5e76\u6ca1\u6709\u56e0\u4e3a\u5b83\u5f3a\u5927\u7684\u524d\u7aef\u8868\u73b0\u529b\u800c\u5ffd\u7565\u540e\u7aef\u3002\u5b83\u7684\u00a0Route Handlers\u00a0\u5141\u8bb8\u4f60\u5728\u540c\u4e00\u4e2a\u9879\u76ee\u91cc\u7f16\u5199\u6807\u51c6\u7684 Node.js \u6216 Edge \u8fd0\u884c\u65f6\u63a5\u53e3\u3002<\/p>\n<p>\u8fd9\u610f\u5473\u7740\u4f60\u4e0d\u518d\u9700\u8981\u7ef4\u62a4\u4e00\u5957\u72ec\u7acb\u7684 Express \u540e\u7aef\u6765\u5904\u7406\u7b80\u5355\u7684\u8868\u5355\u63d0\u4ea4\u3001\u8eab\u4efd\u6821\u9a8c\u6216 Webhook \u901a\u77e5\u3002\u524d\u540e\u7aef\u7684\u4ee3\u7801\u4e0d\u4ec5\u540c\u8bed\u8a00&#xff0c;\u66f4\u540c\u4ed3\u5e93\u3001\u540c\u751f\u547d\u5468\u671f\u3002\u00a0\u8fd9\u79cd\u7d27\u51d1\u6027&#xff0c;\u6b63\u662f\u73b0\u4ee3\u5feb\u901f\u8fed\u4ee3\u5f00\u53d1&#xff08;Agile Development&#xff09;\u6240\u6e34\u6c42\u7684\u201c\u654f\u6377\u4e4b\u6e90\u201d\u3002<\/p>\n<p>\u516d\u3001 \u7ed3\u8bed&#xff1a;\u4e3a\u4ec0\u4e48\u5b83\u662f\u6807\u6746&#xff1f;<\/p>\n<p>\u5982\u679c\u8bf4\u65e9\u671f\u7684 Node.js \u6846\u67b6\u662f\u63d0\u4f9b\u7ed9\u5f00\u53d1\u8005\u7684\u201c\u96f6\u4ef6\u7bb1\u201d&#xff0c;\u90a3\u4e48 Next.js \u5c31\u662f\u4e00\u53f0\u5df2\u7ecf\u8c03\u8bd5\u5b8c\u6bd5\u3001\u6b63\u5f85\u70b9\u706b\u7684\u201c\u8d5b\u8f66\u201d\u3002<\/p>\n<p>\u5b83\u4e4b\u6240\u4ee5\u80fd\u6210\u4e3a\u6807\u6746&#xff0c;\u662f\u56e0\u4e3a\u5b83\u89e3\u51b3\u4e86\u4e00\u4e2a\u5173\u952e\u77db\u76fe&#xff1a;\u5b83\u65e2\u6ee1\u8db3\u4e86\u5f00\u53d1\u8005\u5bf9\u7075\u6d3b\u6027&#xff08;React \u751f\u6001&#xff09;\u7684\u8ffd\u6c42&#xff0c;\u53c8\u6ee1\u8db3\u4e86\u4f01\u4e1a\u5bf9\u53ef\u7ef4\u62a4\u6027\u3001\u6027\u80fd\u548c\u7a33\u5b9a\u6027\u7684\u521a\u9700\u3002<\/p>\n<p>\u9009\u62e9 Next.js&#xff0c;\u672c\u8d28\u4e0a\u662f\u9009\u62e9\u4e86\u4e00\u79cd\u201c\u4e0d\u518d\u91cd\u9020\u8f6e\u5b50\u201d\u7684\u5de5\u7a0b\u6001\u5ea6\u3002\u5b83\u8ba9\u6211\u4eec\u80fd\u591f\u5c06\u5b9d\u8d35\u7684\u667a\u529b\u6210\u672c&#xff0c;\u4ece\u7410\u788e\u7684\u6253\u5305\u914d\u7f6e\u548c\u6e32\u67d3\u4f18\u5316\u4e2d\u89e3\u653e\u51fa\u6765&#xff0c;\u5168\u8eab\u5fc3\u5730\u6295\u5165\u5230\u4e1a\u52a1\u903b\u8f91\u7684\u521b\u9020\u4e2d\u53bb\u3002<\/p>\n<p>\u6b63\u5982\u6240\u6709\u9876\u5c16\u5de5\u5177\u7684\u5f52\u5bbf\u4e00\u6837&#xff0c;Next.js \u6b63\u5728\u53d8\u5f97\u8d8a\u6765\u8d8a\u201c\u65e0\u611f\u201d\u3002\u5b83\u50cf\u7a7a\u6c14\u4e00\u6837\u652f\u6491\u7740\u73b0\u4ee3 Web \u7684\u8fd0\u884c&#xff0c;\u800c\u5f53\u4f60\u56de\u8fc7\u5934\u6765\u5ba1\u89c6\u5b83\u7684\u8bbe\u8ba1\u7ec6\u8282&#xff0c;\u4f60\u624d\u4f1a\u88ab\u90a3\u6df1\u85cf\u4e0d\u9732\u7684\u5de5\u4e1a\u7f8e\u611f\u6240\u9707\u64bc\u3002<\/p>\n<h3>1.4 \u7834\u9664\u8ff7\u601d\u2014\u2014App Router \u662f React \u7684\u672a\u6765&#xff0c;\u8fd8\u662f\u8fc7\u5ea6\u8bbe\u8ba1&#xff1f;<\/h3>\n<p>\u5982\u679c\u8bf4 Next.js \u7684\u6f14\u8fdb\u662f\u4e00\u573a\u9769\u547d&#xff0c;\u90a3\u4e48\u00a0App Router\u00a0\u7684\u53d1\u5e03\u65e0\u7591\u662f\u8fd9\u573a\u9769\u547d\u4e2d\u6700\u5177\u4e89\u8bae\u7684\u201c\u5236\u5baa\u4f1a\u8bae\u201d\u3002<\/p>\n<p>\u5f53 Vercel \u8054\u624b React \u6838\u5fc3\u56e2\u961f\u63a8\u5012\u4e86\u6cbf\u7528\u591a\u5e74\u7684 Pages Router \u8303\u5f0f&#xff0c;\u8f6c\u800c\u6784\u5efa\u57fa\u4e8e\u00a0React Server Components (RSC)\u00a0\u7684\u65b0\u4e16\u754c\u65f6&#xff0c;\u5f00\u53d1\u8005\u793e\u533a\u7206\u53d1\u4e86\u524d\u6240\u672a\u6709\u7684\u8ba8\u8bba\u3002\u6709\u4eba\u6b22\u547c Web \u5f00\u53d1\u7ec8\u4e8e\u8fce\u6765\u4e86\u201c\u7b2c\u4e8c\u66f2\u7ebf\u201d&#xff0c;\u4e5f\u6709\u4eba\u8d28\u7591\u8fd9\u662f\u5426\u4e3a\u4e86\u521b\u65b0\u800c\u521b\u65b0\u7684\u201c\u8fc7\u5ea6\u8bbe\u8ba1\u201d\u3002<\/p>\n<p>\u7ad9\u5728\u67b6\u6784\u5e08\u7684\u89c6\u89d2&#xff0c;\u6211\u4eec\u5fc5\u987b\u5265\u5f00\u8bed\u6cd5\u7cd6\u7684\u8868\u8c61&#xff0c;\u53bb\u76f4\u9762\u90a3\u4e2a\u6838\u5fc3\u547d\u9898&#xff1a;App Router \u7a76\u7adf\u89e3\u51b3\u4e86\u4ec0\u4e48\u672c\u8d28\u95ee\u9898&#xff1f;<\/p>\n<p>\u4e00\u3001 \u51b2\u7a81\u7684\u8d77\u6e90&#xff1a;\u88ab\u6253\u7834\u7684\u201c\u5fc3\u7406\u8212\u9002\u533a\u201d<\/p>\n<p>\u5728 Pages Router \u65f6\u4ee3&#xff0c;React \u5f00\u53d1\u8005\u62e5\u6709\u4e00\u79cd\u7b80\u5355\u7684\u5feb\u4e50&#xff1a;\u4ee3\u7801\u5373\u7ec4\u4ef6&#xff0c;\u7ec4\u4ef6\u5373\u5ba2\u6237\u7aef\u903b\u8f91\u3002\u867d\u7136\u6709\u00a0getServerSideProps\u00a0\u8fd9\u79cd\u670d\u52a1\u7aef\u94a9\u5b50&#xff0c;\u4f46\u672c\u8d28\u4e0a&#xff0c;\u6574\u4e2a\u5e94\u7528\u8fd8\u662f\u56f4\u7ed5\u7740\u201c\u6d4f\u89c8\u5668\u91cc\u7684\u72b6\u6001\u673a\u201d\u5728\u8f6c\u3002<\/p>\n<p>\u7136\u800c&#xff0c;App Router \u5f3a\u5236\u5f15\u5165\u4e86\u00a0\u201c\u670d\u52a1\u7aef\u4f18\u5148\u201d\u00a0\u7684\u76f4\u89c9\u3002\u4f60\u5fc5\u987b\u5728\u5199\u4e0b\u7b2c\u4e00\u884c\u4ee3\u7801\u524d\u5c31\u51b3\u5b9a&#xff1a;\u8fd9\u4e2a\u7ec4\u4ef6\u662f\u5c5e\u4e8e\u201c\u4e91\u7aef\u201d\u7684&#xff0c;\u8fd8\u662f\u5c5e\u4e8e\u201c\u7aef\u201d\u7684&#xff1f;<\/p>\n<p>\u8fd9\u79cd\u601d\u7ef4\u7684\u65ad\u88c2&#xff0c;\u8ba9\u8bb8\u591a\u4e60\u60ef\u4e86\u201c\u4e00\u628a\u6293\u201d\u5f00\u53d1\u6a21\u5f0f\u7684\u4eba\u611f\u5230\u75db\u82e6\u3002\u8fd9\u79cd\u75db\u82e6\u5e76\u975e\u6765\u81ea\u6280\u672f\u672c\u8eab&#xff0c;\u800c\u662f\u6765\u81ea\u5bf9\u00a0\u201c\u5fc3\u667a\u6a21\u578b&#xff08;Mental Model&#xff09;\u201d\u00a0\u7684\u91cd\u5851\u3002\u4eba\u4eec\u4e0d\u7981\u81ea\u95ee&#xff1a;\u4e3a\u4e86\u63d0\u5347\u90a3\u51e0\u767e\u6beb\u79d2\u7684\u6027\u80fd&#xff0c;\u5f15\u5165\u5982\u6b64\u590d\u6742\u7684\u201c\u7ec4\u4ef6\u4e8c\u5143\u8bba\u201d\u771f\u7684\u503c\u5417&#xff1f;<\/p>\n<p>\u4e8c\u3001 \u6838\u5fc3\u8fa9\u8bc1&#xff1a;\u4e3a\u4ec0\u4e48\u201c\u8fc7\u5ea6\u8bbe\u8ba1\u201d\u662f\u5fc5\u8981\u7684&#xff1f;<\/p>\n<p>\u8981\u56de\u7b54\u8fd9\u4e2a\u95ee\u9898&#xff0c;\u6211\u4eec\u9700\u8981\u770b\u6e05 Web \u5e94\u7528\u6b63\u5728\u9762\u4e34\u7684\u201cJS \u503a\u52a1\u5371\u673a\u201d\u3002<\/p>\n<p>1. \u6d88\u9664\u201c\u6c34\u5408&#xff08;Hydration&#xff09;\u201d\u7684\u91cd\u7a0e<\/p>\n<p>\u5728\u4f20\u7edf\u7684 SPA \u6216 SSR \u6a21\u5f0f\u4e0b&#xff0c;\u5373\u4fbf\u4e00\u4e2a\u7ec4\u4ef6\u5728\u670d\u52a1\u5668\u4e0a\u5df2\u7ecf\u6e32\u67d3\u597d\u4e86 HTML&#xff0c;\u6d4f\u89c8\u5668\u4f9d\u7136\u9700\u8981\u4e0b\u8f7d\u5bf9\u5e94\u7684 JavaScript \u4ee3\u7801&#xff0c;\u5e76\u5728\u672c\u5730\u91cd\u65b0\u8dd1\u4e00\u904d\u903b\u8f91&#xff0c;\u4ee5\u786e\u4fdd\u9875\u9762\u662f\u53ef\u4ea4\u4e92\u7684\u3002\u8fd9\u5c31\u662f\u6240\u8c13\u7684\u201c\u6c34\u5408\u201d\u3002<\/p>\n<p>\u60f3\u8c61\u4e00\u4e0b&#xff0c;\u4e00\u4e2a\u5145\u6ee1\u9759\u6001\u6587\u5b57\u7684\u4fa7\u8fb9\u680f&#xff0c;\u4ec5\u4ec5\u56e0\u4e3a\u5b83\u662f\u4e00\u4e2a React \u7ec4\u4ef6&#xff0c;\u4f60\u5c31\u5fc5\u987b\u8ba9\u7528\u6237\u4e0b\u8f7d\u51e0\u5341 KB \u7684 JS\u3002\u8fd9\u5728\u67b6\u6784\u4e0a\u662f\u4e00\u79cd\u6781\u5927\u7684\u6d6a\u8d39\u3002<\/p>\n<p>App Router \u7684\u54f2\u5b66&#xff1a; \u5b83\u662f\u5bf9\u201c\u6c34\u5408\u201d\u7a0e\u6536\u7684\u7cbe\u51c6\u51cf\u514d\u3002\u901a\u8fc7 Server Components&#xff0c;\u9759\u6001\u90e8\u5206\u7684\u4ee3\u7801\u6c38\u8fdc\u7559\u5728\u670d\u52a1\u5668&#xff0c;\u53d1\u9001\u7ed9\u6d4f\u89c8\u5668\u7684\u53ea\u6709\u8f7b\u91cf\u7ea7\u7684\u201c\u6e32\u67d3\u6307\u4ee4\u201d\u3002<\/p>\n<ul>\n<li>\n<p>\u975e\u8fc7\u5ea6\u8bbe\u8ba1\u7406\u7531&#xff1a; \u5f53\u4f60\u7684\u9879\u76ee\u89c4\u6a21\u8fbe\u5230\u4e00\u5b9a\u7a0b\u5ea6&#xff0c;\u8fd9\u79cd\u5bf9 JS \u675f\u4f53\u79ef\u7684\u6781\u81f4\u538b\u69a8&#xff0c;\u662f\u901a\u5f80\u201c\u5353\u8d8a\u6027\u80fd\u201d\u7684\u552f\u4e00\u8def\u5f84\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u89e3\u51b3\u201c\u6570\u636e\u7011\u5e03\u201d\u7684\u987d\u75be<\/p>\n<p>\u5728\u65e7\u6a21\u5f0f\u4e0b&#xff0c;\u6211\u4eec\u7ecf\u5e38\u770b\u5230\u9875\u9762\u52a0\u8f7d\u65f6&#xff0c;\u591a\u4e2a API \u8bf7\u6c42\u50cf\u7011\u5e03\u4e00\u6837\u9010\u7ea7\u5c55\u5f00&#xff1a;\u7236\u7ec4\u4ef6\u52a0\u8f7d\u5b8c\u624d\u89e6\u53d1\u5b50\u7ec4\u4ef6\u8bf7\u6c42&#xff0c;\u5bfc\u81f4\u9875\u9762\u5728\u53cd\u590d\u6296\u52a8\u4e2d\u7f13\u6162\u5448\u73b0\u3002<\/p>\n<p>App Router \u5229\u7528\u4e86\u670d\u52a1\u5668\u4e0e\u6570\u636e\u5e93\u4e4b\u95f4\u6781\u4f4e\u7684\u5ef6\u8fdf&#xff0c;\u5c06\u6570\u636e\u83b7\u53d6\u903b\u8f91\u201c\u5c31\u8fd1\u201d\u90e8\u7f72\u5728 Server Components \u4e2d\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" height=\"93\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/01\/20260126160512-697790b892d55.png\" width=\"500\" \/><\/p>\n<p>\u901a\u8fc7\u5728\u670d\u52a1\u7aef\u8fdb\u884c\u5e76\u884c\u8bf7\u6c42\u548c\u6d41\u5f0f\u6e32\u67d3&#xff08;Streaming&#xff09;&#xff0c;\u5b83\u8ba9\u6570\u636e\u7684\u6d41\u52a8\u4ece\u201c\u4e32\u884c\u201d\u53d8\u6210\u4e86\u201c\u5e76\u884c\u201d&#xff0c;\u4ece\u201c\u6574\u9875\u52a0\u8f7d\u201d\u53d8\u6210\u4e86\u201c\u5c40\u90e8\u6d8c\u73b0\u201d\u3002<\/p>\n<p>\u4e09\u3001 \u7834\u9664\u8ff7\u601d&#xff1a;\u5173\u4e8e App Router \u7684\u4e09\u4e2a\u8bef\u533a<\/p>\n<p>\u8bef\u533a\u4e00&#xff1a;\u5b83\u8ba9\u5f00\u53d1\u53d8\u5f97\u66f4\u590d\u6742\u4e86<\/p>\n<p>\u4e8b\u5b9e\u662f&#xff1a;\u5b83\u5c06\u590d\u6742\u5ea6\u4ece\u201c\u8fd0\u884c\u65f6\u201d\u8f6c\u79fb\u5230\u4e86\u201c\u8bbe\u8ba1\u65f6\u201d\u3002<\/p>\n<p>\u786e\u5b9e&#xff0c;\u4f60\u9700\u8981\u5b66\u4e60 &#039;use client&#039;&#xff0c;\u9700\u8981\u7406\u89e3 RSC \u7684\u9650\u5236\u3002\u4f46\u4e00\u65e6\u8de8\u8d8a\u8fd9\u6761\u66f2\u7ebf&#xff0c;\u4f60\u4f1a\u53d1\u73b0\u4f60\u4e0d\u518d\u9700\u8981\u5904\u7406\u590d\u6742\u7684 useEffect \u7ade\u6001\u95ee\u9898&#xff0c;\u4e0d\u518d\u9700\u8981\u4e3a\u4e86 SEO \u8fd9\u79cd\u57fa\u7840\u9700\u6c42\u53bb\u6298\u817e\u590d\u6742\u7684\u914d\u7f6e\u3002\u5b83\u901a\u8fc7\u89c4\u5219\u7684\u201c\u521a\u6027\u201d&#xff0c;\u6362\u53d6\u4e86\u7cfb\u7edf\u7684\u201c\u7a33\u5065\u6027\u201d\u3002<\/p>\n<p>\u8bef\u533a\u4e8c&#xff1a;Server Components \u5c31\u662f\u4ee5\u524d\u7684 SSR<\/p>\n<p>\u8fd9\u662f\u4e00\u4e2a\u6df1\u523b\u7684\u8bef\u89e3\u3002<\/p>\n<p>\u4f20\u7edf\u7684 SSR \u53ea\u662f\u201c\u9996\u5c4f\u5feb&#xff0c;\u540e\u9762\u8fd8\u662f SPA\u201d&#xff1b;\u800c RSC \u662f\u4e00\u4e2a\u6301\u7eed\u7684\u67b6\u6784\u3002\u5373\u4f7f\u5728\u9875\u9762\u8df3\u8f6c\u65f6&#xff0c;Server Components \u4f9d\u7136\u53ef\u4ee5\u7531\u670d\u52a1\u5668\u6e32\u67d3\u5e76\u6d41\u5f0f\u4f20\u8f93\u3002\u5b83\u662f\u5bf9\u201c\u6e32\u67d3\u6743\u201d\u7684\u52a8\u6001\u5206\u914d&#xff0c;\u800c\u975e\u4e00\u6b21\u6027\u7684\u201c\u9759\u6001\u5316\u201d\u3002<\/p>\n<p>\u8bef\u533a\u4e09&#xff1a;\u8fd9\u53ea\u662f Vercel \u4e3a\u4e86\u9501\u6b7b\u7528\u6237\u7684\u624b\u6bb5<\/p>\n<p>\u867d\u7136 Next.js \u662f App Router \u7684\u9996\u9009\u5b9e\u73b0&#xff0c;\u4f46 RSC \u89c4\u8303\u662f React \u6838\u5fc3\u56e2\u961f\u7684\u610f\u5fd7\u3002\u8fd9\u4e00\u8f6c\u53d8\u4ee3\u8868\u4e86 React \u4ece\u4e00\u4e2a\u201cUI \u5e93\u201d\u5411\u4e00\u4e2a\u201c\u5168\u6808 UI \u8fd0\u884c\u65f6\u201d\u7684\u6b63\u5f0f\u8f6c\u578b\u3002\u65e0\u8bba\u4f60\u662f\u5426\u4f7f\u7528 Next.js&#xff0c;\u8fd9\u79cd\u201c\u7ec4\u4ef6\u7ea7\u670d\u52a1\u7aef\u6e32\u67d3\u201d\u7684\u601d\u60f3\u90fd\u5c06\u4e3b\u5bfc\u672a\u6765\u5341\u5e74\u7684 Web \u67b6\u6784\u3002<\/p>\n<p>\u56db\u3001 \u67b6\u6784\u5e08\u7684\u6743\u8861&#xff1a;\u4f55\u65f6\u8be5\u62e5\u62b1\u5b83&#xff1f;<\/p>\n<p>\u4f5c\u4e3a\u4e13\u5bb6&#xff0c;\u6211\u4e0d\u4f1a\u544a\u8bc9\u4f60 App Router \u6c38\u8fdc\u662f\u552f\u4e00\u7684\u9009\u62e9\u3002<\/p>\n<ul>\n<li>\n<p>\u5982\u679c\u4f60\u7684\u5e94\u7528\u662f\u4e00\u4e2a\u9ad8\u5ea6\u4ea4\u4e92\u3001\u7eaf\u5de5\u5177\u578b\u7684 Dashboard&#xff08;\u5982\u5728\u7ebf\u56fe\u7247\u7f16\u8f91\u5668&#xff09;&#xff0c;Pages Router \u751a\u81f3\u7eaf SPA \u6a21\u5f0f\u4f9d\u7136\u80fd\u6253\u3002\u56e0\u4e3a\u4f60\u7684\u903b\u8f91\u51e0\u4e4e\u90fd\u5728\u5ba2\u6237\u7aef\u3002<\/p>\n<\/li>\n<li>\n<p>\u5982\u679c\u4f60\u7684\u5e94\u7528\u662f\u4e00\u4e2a\u5185\u5bb9\u9a71\u52a8\u3001\u6ce8\u91cd\u9996\u5c4f\u4e0e SEO\u3001\u4e14\u5177\u6709\u590d\u6742\u6570\u636e\u5c42\u7ea7\u7684\u5168\u6808\u5e94\u7528&#xff08;\u5982\u7535\u5546\u3001\u793e\u4ea4\u3001\u5185\u5bb9\u5e73\u53f0&#xff09;&#xff0c;\u90a3\u4e48 App Router \u5c31\u662f\u4f60\u5bf9\u6297\u6280\u672f\u8150\u5316\u7684\u6700\u5f3a\u6b66\u5668\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e94\u3001 \u7ed3\u8bed&#xff1a;\u8fdb\u5316\u7684\u4ee3\u4ef7<\/p>\n<p>\u751f\u7269\u8fdb\u5316\u7684\u8fc7\u7a0b\u4e2d&#xff0c;\u810a\u690e\u7684\u51fa\u73b0\u589e\u52a0\u4e86\u590d\u6742\u7684\u795e\u7ecf\u7cfb\u7edf&#xff0c;\u4f46\u4e5f\u8ba9\u751f\u547d\u5f97\u4ee5\u7ad9\u7acb\u5e76\u884c\u3002<\/p>\n<p>App Router \u5c31\u50cf\u662f Web \u5f00\u53d1\u7684\u90a3\u6839\u810a\u690e\u3002\u5b83\u786e\u5b9e\u5e26\u6765\u4e86\u5b66\u4e60\u7684\u9635\u75db&#xff0c;\u6253\u7834\u4e86\u6211\u4eec\u5bf9 React \u201c\u7eaf\u51c0\u524d\u7aef\u201d\u7684\u5e7b\u89c9\u3002\u4f46\u5b83\u4e5f\u8d4b\u4e88\u4e86\u6211\u4eec\u524d\u6240\u672a\u6709\u7684\u80fd\u529b&#xff1a;\u5728\u540c\u4e00\u4e2a\u8bed\u6cd5\u4f53\u7cfb\u4e0b&#xff0c;\u4ee5\u524d\u6240\u672a\u6709\u7684\u7ec6\u817b\u5ea6&#xff0c;\u53bb\u8c03\u914d\u4e91\u7aef\u4e0e\u7ec8\u7aef\u7684\u7b97\u529b\u3002<\/p>\n<p>\u5b83\u4e0d\u662f\u201c\u8fc7\u5ea6\u8bbe\u8ba1\u201d&#xff0c;\u800c\u662f\u00a0\u201c\u9762\u5411\u672a\u6765\u7684\u5de5\u7a0b\u91cd\u5851\u201d\u3002\u5b83\u627f\u8ba4\u4e86 Web \u73af\u5883\u7684\u5f02\u6784\u6027\u2014\u2014\u6709\u7684\u5730\u65b9\u9002\u5408\u9759\u5982\u6b62\u6c34&#xff08;\u670d\u52a1\u5668&#xff09;&#xff0c;\u6709\u7684\u5730\u65b9\u9002\u5408\u52a8\u82e5\u8131\u5154&#xff08;\u6d4f\u89c8\u5668&#xff09;\u3002\u800c App Router&#xff0c;\u6b63\u662f\u8fde\u63a5\u8fd9\u4e24\u8005\u7684\u90a3\u5ea7\u6700\u4f18\u96c5\u7684\u6865\u6881\u3002<\/p>\n<p>\u5230\u6b64\u4e3a\u6b62&#xff0c;\u6211\u4eec\u5df2\u7ecf\u5b8c\u6210\u4e86\u5bf9 Next.js \u4e16\u754c\u89c2\u7684\u5168\u9762\u5de1\u793c\u3002\u4ece\u5168\u6808\u7684\u54f2\u5b66\u5230\u6e32\u67d3\u7684\u8f6e\u56de&#xff0c;\u4ece\u5de5\u4e1a\u5316\u7684\u6807\u6746\u5230\u67b6\u6784\u7684\u6289\u62e9\u3002<\/p>\n<p>\u4f60\u662f\u5426\u5df2\u7ecf\u51c6\u5907\u597d&#xff0c;\u4ece\u8fd9\u4e9b\u5b8f\u5927\u7684\u601d\u60f3\u4e2d\u62bd\u8eab&#xff0c;\u53bb\u4eb2\u624b\u6784\u5efa\u4f60\u7684\u7b2c\u4e00\u4e2a Next.js \u9879\u76ee&#xff1f;\u4e0b\u4e00\u7ae0&#xff0c;\u6211\u4eec\u5c06\u6b63\u5f0f\u8fdb\u5165\u201c\u5de5\u6b32\u5584\u5176\u4e8b\u201d\u7684\u5b9e\u6218\u9636\u6bb5&#xff0c;\u4ece\u73af\u5883\u914d\u7f6e\u4e0e\u5de5\u5177\u94fe\u5f00\u59cb&#xff0c;\u7b51\u8d77\u4f60\u7684\u5168\u6808\u4e4b\u57fa\u3002<\/p>\n<h2>\u7b2c2\u7ae0&#xff1a;\u5de5\u6b32\u5584\u5176\u4e8b\u2014\u2014\u5f00\u53d1\u73af\u5883\u4e0e\u6838\u5fc3\u5de5\u5177\u94fe<\/h2>\n<ul>\n<li>\n<p>2.1 \u201c\u4e7e\u5764\u5728\u63e1\u201d&#xff1a;\u00a0Node.js \u8fd0\u884c\u65f6\u3001PNPM \u4e0e TypeScript \u7684\u6781\u81f4\u914d\u7f6e<\/p>\n<\/li>\n<li>\n<p>2.2 \u201c\u811a\u624b\u67b6\u4e4b\u7f8e\u201d&#xff1a;\u00a0create-next-app\u00a0\u80cc\u540e\u9690\u85cf\u7684\u5de5\u7a0b\u5316\u7ec6\u8282<\/p>\n<\/li>\n<li>\n<p>2.3 \u201c\u5f00\u53d1\u5229\u5668\u201d&#xff1a;\u00a0VS Code \u63d2\u4ef6\u751f\u6001\u4e0e Turbopack \u6784\u5efa\u52a0\u901f\u5668<\/p>\n<\/li>\n<li>\n<p>2.4 \u201c\u4ee3\u7801\u89c4\u8303\u201d&#xff1a;\u00a0ESLint\u3001Prettier \u4e0e Husky \u7684\u5de5\u7a0b\u5316\u7ea6\u675f<\/p>\n<\/li>\n<\/ul>\n<h3>2.1 \u201c\u4e7e\u5764\u5728\u63e1\u201d\u2014\u2014Node.js \u8fd0\u884c\u65f6\u3001PNPM \u4e0e TypeScript \u7684\u6781\u81f4\u914d\u7f6e<\/h3>\n<p>\u5728\u5168\u6808\u5f00\u53d1\u7684\u5f81\u9014\u4e2d&#xff0c;\u5982\u679c\u8bf4\u67b6\u6784\u8bbe\u8ba1\u662f\u8fd0\u7b79\u5e37\u5e44\u7684\u201c\u5fc3\u6cd5\u201d&#xff0c;\u90a3\u4e48\u5f00\u53d1\u73af\u5883\u5c31\u662f\u624b\u4e2d\u5288\u5c71\u65a9\u68d8\u7684\u201c\u5229\u5203\u201d\u3002\u4e00\u4e2a\u4f18\u79c0\u7684\u5f00\u53d1\u8005&#xff0c;\u7edd\u4e0d\u4f1a\u5728\u73af\u5883\u914d\u7f6e\u4e0a\u968f\u9047\u800c\u5b89\u3002\u6b63\u5982\u4e00\u4f4d\u5251\u5ba2\u5728\u51fa\u5f81\u524d\u5fc5\u5148\u53cd\u590d\u6dec\u70bc\u5251\u950b&#xff0c;\u6211\u4eec\u5728\u5f00\u542f Next.js \u4e4b\u65c5\u524d&#xff0c;\u5fc5\u987b\u5bf9\u00a0Node.js \u8fd0\u884c\u65f6\u3001\u5305\u7ba1\u7406\u5668 PNPM\u00a0\u4ee5\u53ca\u00a0TypeScript\u00a0\u8fdb\u884c\u6781\u81f4\u7684\u914d\u7f6e\u3002\u8fd9\u4e0d\u4ec5\u662f\u4e3a\u4e86\u8ba9\u4ee3\u7801\u8dd1\u8d77\u6765&#xff0c;\u66f4\u662f\u4e3a\u4e86\u6784\u5efa\u4e00\u4e2a\u4f4e\u71b5\u3001\u9ad8\u54cd\u5e94\u3001\u7c7b\u578b\u5b89\u5168\u7684\u5f00\u53d1\u95ed\u73af&#xff0c;\u8fbe\u5230\u201c\u4e7e\u5764\u5728\u63e1\u201d\u7684\u638c\u63a7\u611f\u3002<\/p>\n<p>\u4e00\u3001 Node.js \u8fd0\u884c\u65f6&#xff1a;\u65f6\u4ee3\u7684\u5f15\u64ce\u4e0e\u7248\u672c\u7ba1\u7406\u827a\u672f<\/p>\n<p>Node.js \u662f Next.js \u7684\u5fc3\u810f\u3002Next.js \u7684\u5f88\u591a\u7279\u6027&#xff08;\u5982\u6e32\u67d3\u4f18\u5316\u3001\u6d41\u5f0f\u4f20\u8f93&#xff09;\u90fd\u9ad8\u5ea6\u4f9d\u8d56\u4e8e Node.js \u8fd0\u884c\u65f6\u7684\u5e95\u5c42\u80fd\u529b\u3002<\/p>\n<p>1. LTS \u7684\u9009\u62e9&#xff1a;\u7a33\u5065\u4e0e\u524d\u6cbf\u7684\u5e73\u8861<\/p>\n<p>\u5bf9\u4e8e\u751f\u4ea7\u73af\u5883&#xff0c;\u6211\u4eec\u6c38\u8fdc\u63a8\u5d07\u00a0LTS&#xff08;\u957f\u671f\u652f\u6301\u7248\u672c&#xff09;\u3002\u5b83\u4ee3\u8868\u4e86\u793e\u533a\u6700\u5e7f\u6cdb\u7684\u6d4b\u8bd5\u4e0e\u6700\u7a33\u5b9a\u7684\u5185\u5b58\u7ba1\u7406\u3002\u5728 2026 \u5e74\u7684\u5f53\u4e0b&#xff0c;\u786e\u4fdd\u4f60\u7684 Node.js \u7248\u672c\u5904\u4e8e\u5076\u6570\u4ee3&#xff08;\u5982 v20 \u6216 v22 \u4ee5\u4e0a&#xff09;&#xff0c;\u662f\u4eab\u53d7 Next.js \u6027\u80fd\u7ea2\u5229\u7684\u524d\u63d0\u3002<\/p>\n<p>2. \u7248\u672c\u7684\u201c\u4efb\u610f\u95e8\u201d&#xff1a;\u4ece NVM \u5230 FNM<\/p>\n<p>\u4f18\u79c0\u7684\u4e13\u5bb6\u4ece\u4e0d\u5168\u5c40\u5b89\u88c5 Node.js\u3002\u56e0\u4e3a\u4e0d\u540c\u7684\u9879\u76ee\u53ef\u80fd\u4f9d\u8d56\u4e0d\u540c\u7684\u8fd0\u884c\u65f6\u7248\u672c\u3002\u4f20\u7edf\u7684\u00a0nvm\u00a0\u867d\u7136\u7ecf\u5178&#xff0c;\u4f46\u5728 Shell \u542f\u52a8\u901f\u5ea6\u4e0a\u7565\u663e\u6c89\u91cd\u3002 \u6211\u5f3a\u70c8\u63a8\u8350\u4f7f\u7528\u00a0fnm (Fast Node Manager)\u3002\u5b83\u662f\u7528 Rust \u7f16\u5199\u7684&#xff0c;\u5feb\u5982\u95ea\u7535&#xff0c;\u80fd\u591f\u6839\u636e\u9879\u76ee\u6839\u76ee\u5f55\u7684\u00a0.node-version\u00a0\u6587\u4ef6\u81ea\u52a8\u5207\u6362\u7248\u672c\u3002<\/p>\n<p>\u4e13\u5bb6\u89c6\u70b9&#xff1a;\u00a0\u8fd9\u79cd\u81ea\u52a8\u5316\u7684\u7248\u672c\u611f\u77e5&#xff0c;\u6d88\u9664\u4e86\u7531\u4e8e\u8fd0\u884c\u65f6\u7248\u672c\u4e0d\u4e00\u81f4\u5bfc\u81f4\u7684\u201c\u5728\u6211\u673a\u5668\u4e0a\u662f\u597d\u7684\u201d\u8fd9\u79cd\u4f4e\u7ea7\u9519\u8bef\u3002<\/p>\n<p>\u4e8c\u3001 PNPM&#xff1a;\u5305\u7ba1\u7406\u5668\u7684\u7ec8\u6781\u9769\u547d<\/p>\n<p>\u957f\u671f\u4ee5\u6765&#xff0c;\u524d\u7aef\u5f00\u53d1\u8005\u90fd\u6df1\u53d7\u00a0node_modules\u00a0\u90a3\u4e2a\u201c\u9ed1\u6d1e\u201d\u7684\u56f0\u6270\u3002\u4f20\u7edf\u7684 NPM \u548c Yarn&#xff08;v1&#xff09;\u91c7\u7528\u6241\u5e73\u5316\u5b89\u88c5&#xff0c;\u4e0d\u4ec5\u6d6a\u8d39\u78c1\u76d8\u7a7a\u95f4&#xff0c;\u66f4\u4f1a\u5bfc\u81f4\u201c\u5e7d\u7075\u4f9d\u8d56&#xff08;Phantom Dependencies&#xff09;\u201d\u2014\u2014\u5373\u4f60\u53ef\u4ee5\u5728\u4ee3\u7801\u4e2d\u5f15\u5165\u5e76\u672a\u5728\u00a0package.json\u00a0\u4e2d\u58f0\u660e\u7684\u5305\u3002<\/p>\n<p>PNPM \u7684\u51fa\u73b0&#xff0c;\u662f\u4e00\u573a\u964d\u7ef4\u6253\u51fb\u3002<\/p>\n<p>1. \u786c\u94fe\u63a5&#xff08;Hard Links&#xff09;\u4e0e\u5185\u5bb9\u53ef\u5bfb\u5740\u5b58\u50a8<\/p>\n<p>PNPM \u4e0d\u4f1a\u4e3a\u6bcf\u4e2a\u9879\u76ee\u91cd\u590d\u4e0b\u8f7d\u5305\u3002\u5b83\u5728\u5168\u5c40\u7ef4\u62a4\u4e00\u4e2a\u5185\u5bb9\u5bfb\u5740\u5b58\u50a8\u4e2d\u5fc3\u3002\u5982\u679c\u591a\u4e2a\u9879\u76ee\u4f9d\u8d56\u540c\u4e00\u4e2a\u7248\u672c\u7684 React&#xff0c;PNPM \u53ea\u4f1a\u5728\u78c1\u76d8\u4e0a\u5b58\u4e00\u4efd&#xff0c;\u5176\u4ed6\u9879\u76ee\u901a\u8fc7\u786c\u94fe\u63a5\u6307\u5411\u5b83\u3002<\/p>\n<ul>\n<li>\n<p>\u6781\u81f4\u901f\u5ea6&#xff1a;\u00a0\u5b89\u88c5\u901f\u5ea6\u63d0\u5347 2x-3x\u3002<\/p>\n<\/li>\n<li>\n<p>\u8282\u7701\u7a7a\u95f4&#xff1a;\u00a0\u5373\u4f7f\u4f60\u6709 100 \u4e2a Next.js \u9879\u76ee&#xff0c;\u4f60\u7684\u786c\u76d8\u4e5f\u4e0d\u4f1a\u88ab\u70b8\u6bc1\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u4e25\u683c\u7684\u4f9d\u8d56\u62d3\u6251<\/p>\n<p>PNPM \u9ed8\u8ba4\u62d2\u7edd\u5e7d\u7075\u4f9d\u8d56\u3002\u5982\u679c\u4f60\u7684\u4ee3\u7801\u5f15\u7528\u4e86\u672a\u58f0\u660e\u7684\u5305&#xff0c;\u5b83\u4f1a\u7acb\u5373\u62a5\u9519\u3002\u8fd9\u79cd\u201c\u4e25\u8c28\u6027\u201d\u5728\u6784\u5efa\u5927\u578b Next.js \u5e94\u7528\u65f6\u81f3\u5173\u91cd\u8981&#xff0c;\u5b83\u786e\u4fdd\u4e86\u6784\u5efa\u4ea7\u7269\u7684\u53ef\u9884\u6d4b\u6027\u3002<\/p>\n<p>3. \u6781\u81f4\u914d\u7f6e&#xff1a;.npmrc\u00a0\u7684\u9b54\u6cd5<\/p>\n<p>\u5728\u9879\u76ee\u6839\u76ee\u5f55\u914d\u7f6e\u4e00\u4e2a\u7cbe\u5e72\u7684\u00a0.npmrc&#xff0c;\u53ef\u4ee5\u8fdb\u4e00\u6b65\u4f18\u5316\u5168\u6808\u4f53\u9a8c&#xff1a;<\/p>\n<p>shamefully-hoist&#061;false # \u62d2\u7edd\u6241\u5e73\u5316&#xff0c;\u4fdd\u6301\u4f9d\u8d56\u6811\u7684\u7eaf\u51c0<br \/>\nshell-emulator&#061;true    # \u5728\u4e0d\u540c\u7cfb\u7edf\u4e0b\u4fdd\u6301\u811a\u672c\u6267\u884c\u7684\u4e00\u81f4\u6027<\/p>\n<p>\u4e09\u3001 TypeScript&#xff1a;\u4ece\u201c\u53ef\u9009\u201d\u5230\u201c\u4e0d\u53ef\u6216\u7f3a\u201d\u7684\u94e0\u7532<\/p>\n<p>\u5982\u679c\u8bf4 JavaScript \u662f\u5728\u94a2\u4e1d\u4e0a\u884c\u8d70&#xff0c;\u90a3\u4e48 TypeScript \u5c31\u662f\u4e3a\u4f60\u710a\u6b7b\u7684\u5b89\u5168\u62a4\u680f\u3002\u5728 Next.js \u7684\u540c\u6784\u67b6\u6784\u4e0b&#xff0c;TypeScript \u7684\u610f\u4e49\u5df2\u7ecf\u8d85\u8d8a\u4e86\u7b80\u5355\u7684\u9759\u6001\u68c0\u67e5\u3002<\/p>\n<p>1. \u7aef\u5230\u7aef\u7684\u7c7b\u578b\u5b89\u5168&#xff08;E2E Type Safety&#xff09;<\/p>\n<p>\u5728 Next.js 15&#043; \u4e2d&#xff0c;\u4f60\u53ef\u4ee5\u5229\u7528 TypeScript \u5b9e\u73b0\u4ece\u6570\u636e\u5e93\u5230\u524d\u7aef UI \u7684\u5168\u94fe\u8def\u7c7b\u578b\u4f20\u9012\u3002\u5f53\u4f60\u4fee\u6539\u4e86\u6570\u636e\u5e93\u4e2d\u4e00\u4e2a\u5b57\u6bb5\u7684\u540d\u79f0&#xff0c;TypeScript \u4f1a\u5728\u6570\u79d2\u5185\u8ba9\u4f60\u7684 UI \u7ec4\u4ef6\u4ee3\u7801\u53d8\u7ea2\u3002\u8fd9\u79cd\u201c\u7275\u4e00\u53d1\u800c\u52a8\u5168\u8eab\u201d\u7684\u611f\u77e5\u80fd\u529b&#xff0c;\u662f\u67b6\u6784\u5e08\u638c\u63a7\u590d\u6742\u6027\u7684\u6838\u5fc3\u624b\u6bb5\u3002<\/p>\n<p>2. Next.js \u4e13\u5c5e\u63d2\u4ef6\u7684\u5a01\u529b<\/p>\n<p>Next.js \u62e5\u6709\u4e13\u5c5e\u7684 TypeScript \u63d2\u4ef6\u3002\u5b83\u80fd\u7406\u89e3 App Router \u7684\u8def\u7531\u7ea6\u5b9a\u3002<\/p>\n<ul>\n<li>\n<p>\u975e\u6cd5\u8def\u7531\u68c0\u6d4b&#xff1a;\u00a0\u5f53\u4f60\u5199\u4e0b\u00a0&lt;Link href&#061;&#034;\/abouut&#034;&gt;\u00a0\u65f6&#xff0c;\u5b83\u4f1a\u654f\u9510\u5730\u6307\u51fa\u8def\u5f84\u62fc\u5199\u9519\u8bef\u3002<\/p>\n<\/li>\n<li>\n<p>RSC \u7c7b\u578b\u9650\u5236&#xff1a;\u00a0\u5b83\u4f1a\u63d0\u9192\u4f60&#xff0c;\u4e0d\u5c0f\u5fc3\u5728\u670d\u52a1\u7aef\u7ec4\u4ef6\u91cc\u4f7f\u7528\u4e86\u00a0useState\u3002<\/p>\n<\/li>\n<\/ul>\n<p>3.\u00a0tsconfig.json\u00a0\u7684\u6df1\u5ea6\u4f18\u5316<\/p>\n<p>\u4e00\u4e2a\u6781\u81f4\u7684\u914d\u7f6e\u5e94\u5f53\u5f00\u542f\u00a0strict\u00a0\u6a21\u5f0f&#xff0c;\u5e76\u5229\u7528\u00a0paths\u00a0\u522b\u540d\u6765\u4f18\u5316\u6a21\u5757\u8def\u5f84&#xff1a;<\/p>\n<p>{<br \/>\n  &#034;compilerOptions&#034;: {<br \/>\n    &#034;strict&#034;: true,<br \/>\n    &#034;paths&#034;: {<br \/>\n      &#034;&#064;\/*&#034;: [&#034;.\/*&#034;] \/\/ \u7528 &#064;\/components \u4ee3\u66ff ..\/..\/..\/components<br \/>\n    },<br \/>\n    &#034;plugins&#034;: [{ &#034;name&#034;: &#034;next&#034; }]<br \/>\n  }<br \/>\n}<\/p>\n<p>\u56db\u3001 \u4e7e\u5764\u5728\u63e1&#xff1a;\u4e09\u4f4d\u4e00\u4f53\u7684\u534f\u540c\u54f2\u5b66<\/p>\n<p>\u5f53\u6211\u4eec\u5c06\u00a0fnm &#043; pnpm &#043; TypeScript\u00a0\u7ed3\u5408\u5728\u4e00\u8d77\u65f6&#xff0c;\u4f60\u4f1a\u53d1\u73b0\u5f00\u53d1\u4f53\u9a8c\u53d1\u751f\u4e86\u4e00\u6b21\u8d28\u53d8\u3002<\/p>\n<li>\n<p>\u786e\u5b9a\u6027&#xff1a;\u00a0fnm\u00a0\u786e\u4fdd\u4e86\u6267\u884c\u73af\u5883\u7684\u552f\u4e00\u6027\u3002<\/p>\n<\/li>\n<li>\n<p>\u6548\u7387&#xff1a;\u00a0pnpm\u00a0\u786e\u4fdd\u4e86\u4f9d\u8d56\u83b7\u53d6\u7684\u6781\u901f\u4e0e\u7eaf\u51c0\u3002<\/p>\n<\/li>\n<li>\n<p>\u5b89\u5168\u6027&#xff1a;\u00a0TypeScript\u00a0\u786e\u4fdd\u4e86\u903b\u8f91\u6d41\u8f6c\u7684\u4e25\u4e1d\u5408\u7f1d\u3002<\/p>\n<\/li>\n<p>\u8fd9\u79cd\u914d\u7f6e\u4e0d\u518d\u662f\u96f6\u6563\u7684\u5de5\u5177\u5806\u780c&#xff0c;\u800c\u662f\u4e00\u4e2a\u201c\u5f00\u53d1\u64cd\u4f5c\u7cfb\u7edf\u201d\u3002\u5728\u8fd9\u79cd\u73af\u5883\u4e0b\u5de5\u4f5c&#xff0c;\u5f00\u53d1\u8005\u4e0d\u518d\u88ab\u7410\u788e\u7684\u73af\u5883\u95ee\u9898\u5e72\u6270&#xff0c;\u800c\u662f\u80fd\u5c06\u5168\u90e8\u7cbe\u529b\u6295\u5165\u5230\u4e1a\u52a1\u903b\u8f91\u7684\u521b\u9020\u4e2d\u3002<\/p>\n<p>\u4e94\u3001 \u7ed3\u8bed&#xff1a;\u5de5\u5320\u7cbe\u795e\u7684\u8d77\u70b9<\/p>\n<p>\u5f88\u591a\u5f00\u53d1\u8005\u6025\u4e8e\u5199\u4e0b\u7b2c\u4e00\u884c\u00a0export default function Page()&#xff0c;\u5374\u5f80\u5f80\u5ffd\u7565\u4e86\u73af\u5883\u7684\u6253\u78e8\u3002\u4f46\u6b63\u5982\u9876\u7ea7\u8d5b\u8f66\u624b\u5fc5\u987b\u6df1\u5ea6\u4e86\u89e3\u5f15\u64ce\u7684\u6bcf\u4e00\u5904\u53c2\u6570&#xff0c;\u9876\u7ea7\u7684\u5168\u6808\u4e13\u5bb6\u4e5f\u5fc5\u987b\u5bf9\u81ea\u5df1\u7684\u5f00\u53d1\u73af\u5883\u62e5\u6709\u7edd\u5bf9\u7684\u7edf\u6cbb\u529b\u3002<\/p>\n<p>\u201c\u4e7e\u5764\u5728\u63e1\u201d&#xff0c;\u4e0d\u662f\u4e00\u79cd\u81ea\u5938&#xff0c;\u800c\u662f\u4e00\u79cd\u901a\u8fc7\u6781\u81f4\u914d\u7f6e\u540e\u83b7\u5f97\u7684\u6280\u672f\u81ea\u7531\u3002\u5f53\u4f60\u62e5\u6709\u4e86\u4e00\u4e2a\u6781\u901f\u54cd\u5e94\u3001\u7c7b\u578b\u4e25\u5bc6\u7684\u73af\u5883&#xff0c;\u4f60\u624d\u771f\u6b63\u5177\u5907\u4e86\u5728 Next.js \u7684\u6d77\u6d0b\u4e2d\u8fdc\u822a\u7684\u8d44\u683c\u3002<\/p>\n<p>\u672c\u8282\u901a\u8fc7\u5bf9\u5e95\u5c42\u8fd0\u884c\u65f6\u7684\u6df1\u5ea6\u638c\u63a7&#xff0c;\u4e3a\u4f60\u7b51\u597d\u4e86\u5168\u6808\u5f00\u53d1\u7684\u57fa\u77f3\u3002\u5728\u4e0b\u4e00\u8282\u4e2d&#xff0c;\u6211\u4eec\u5c06\u5256\u6790\u00a0create-next-app\u00a0\u8fd9\u4e00\u770b\u4f3c\u7b80\u5355\u7684\u811a\u672c\u80cc\u540e&#xff0c;\u9690\u85cf\u7740\u600e\u6837\u7684\u5de5\u7a0b\u5316\u667a\u6167\u4e0e\u67b6\u6784\u6df1\u610f\u3002<\/p>\n<h3>2.2 \u201c\u811a\u624b\u67b6\u4e4b\u7f8e\u201d\u2014\u2014create-next-app \u80cc\u540e\u9690\u85cf\u7684\u5de5\u7a0b\u5316\u7ec6\u8282<\/h3>\n<p>\u5728\u8f6f\u4ef6\u5de5\u7a0b\u7684\u827a\u672f\u4e2d&#xff0c;\u201c\u811a\u624b\u67b6&#xff08;Scaffolding&#xff09;\u201d\u00a0\u5f80\u5f80\u88ab\u521d\u5b66\u8005\u8bef\u8ba4\u4e3a\u53ea\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u4ee3\u7801\u751f\u6210\u5668\u3002\u7136\u800c&#xff0c;\u5728\u9876\u5c16\u4e13\u5bb6\u7684\u773c\u4e2d&#xff0c;\u6bcf\u4e00\u4e2a\u6210\u719f\u6846\u67b6\u7684\u811a\u624b\u67b6\u90fd\u662f\u5176\u5e95\u5c42\u54f2\u5b66\u3001\u6700\u4f73\u5b9e\u8df5\u4e0e\u5de5\u7a0b\u7ea6\u675f\u7684\u96c6\u5408\u4f53\u3002<\/p>\n<p>\u5f53\u4f60\u8f93\u5165\u00a0npx create-next-app&#064;latest\u00a0\u65f6&#xff0c;\u4f60\u5f00\u542f\u7684\u4e0d\u4ec5\u662f\u4e00\u4e2a\u9879\u76ee\u6a21\u677f&#xff0c;\u66f4\u662f\u4e00\u6b21\u4e0e Next.js \u6838\u5fc3\u56e2\u961f\u5173\u4e8e\u201c\u73b0\u4ee3 Web \u5e94\u7528\u5e94\u5982\u4f55\u6784\u5efa\u201d\u7684\u6df1\u5ea6\u5bf9\u8bdd\u3002\u672c\u8282\u6211\u4eec\u5c06\u5265\u5f00\u90a3\u5c42\u81ea\u52a8\u5316\u811a\u672c\u7684\u5916\u58f3&#xff0c;\u53bb\u5ba1\u89c6\u00a0create-next-app\u00a0\u80cc\u540e\u90a3\u4e9b\u5f15\u4eba\u5165\u80dc\u7684\u5de5\u7a0b\u5316\u7ec6\u8282\u3002<\/p>\n<p>\u4e00\u3001 \u4eea\u5f0f\u611f\u4e0e\u201c\u9ec4\u91d1\u8def\u5f84\u201d&#xff1a;CLI \u7684\u4ea4\u4e92\u8bbe\u8ba1<\/p>\n<p>create-next-app\u00a0\u7684\u4ea4\u4e92\u754c\u9762&#xff08;CLI&#xff09;\u662f\u6781\u7b80\u4e3b\u4e49\u7684\u5178\u8303\u3002\u5b83\u901a\u8fc7\u4e00\u7cfb\u5217\u7cbe\u5fc3\u8bbe\u8ba1\u7684\u95ee\u9898&#xff0c;\u5f15\u5bfc\u5f00\u53d1\u8005\u8e0f\u4e0a\u4e00\u6761\u201c\u9ec4\u91d1\u8def\u5f84&#xff08;Golden Path&#xff09;\u201d\u3002<\/p>\n<ul>\n<li>\n<p>\u6743\u529b\u7684\u4e0b\u653e&#xff1a;\u00a0\u5b83\u8be2\u95ee\u4f60\u662f\u5426\u4f7f\u7528 TypeScript\u3001ESLint\u3001Tailwind CSS\u3002\u8fd9\u770b\u4f3c\u662f\u9009\u62e9\u9898&#xff0c;\u5b9e\u5219\u662f\u201c\u5de5\u7a0b\u63a8\u8350\u201d\u3002\u5b83\u901a\u8fc7\u9ed8\u8ba4\u9ad8\u4eae\u7684\u9009\u9879&#xff0c;\u6697\u793a\u4e86\u5f53\u524d\u5de5\u4e1a\u754c\u7684\u6807\u51c6\u914d\u7f6e\u3002<\/p>\n<\/li>\n<li>\n<p>\u67b6\u6784\u7684\u5341\u5b57\u8def\u53e3&#xff1a;\u00a0\u8be2\u95ee\u662f\u5426\u4f7f\u7528\u00a0App Router\u3002\u8fd9\u662f Next.js \u5386\u53f2\u4e0a\u6700\u91cd\u8981\u7684\u5206\u6c34\u5cad&#xff0c;\u811a\u624b\u67b6\u5728\u6b64\u5904\u4e0d\u4ec5\u662f\u5728\u521b\u5efa\u6587\u4ef6\u5939&#xff0c;\u800c\u662f\u5728\u4e3a\u4f60\u9009\u62e9\u672a\u6765\u7684\u6e32\u67d3\u6a21\u578b\u548c\u5e76\u53d1\u673a\u5236\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e13\u5bb6\u89c6\u70b9&#xff1a;\u00a0\u597d\u7684\u811a\u624b\u67b6\u4e0d\u5e94\u63d0\u4f9b\u65e0\u9650\u7684\u9009\u62e9&#xff0c;\u800c\u5e94\u63d0\u4f9b\u201c\u6709\u6001\u5ea6\u7684\u9ed8\u8ba4\u503c\u201d\u3002create-next-app\u00a0\u6b63\u662f\u8fd9\u79cd\u201c\u5f3a\u52bf\u201d\u54f2\u5b66\u7684\u4f53\u73b0&#xff0c;\u5b83\u51cf\u5c11\u4e86\u5f00\u53d1\u8005\u5728\u7410\u788e\u914d\u7f6e\u4e0a\u7684\u51b3\u7b56\u6210\u672c\u3002<\/p>\n<p>\u4e8c\u3001 \u76ee\u5f55\u7ed3\u6784\u7684\u79e9\u5e8f\u7f8e\u5b66&#xff1a;\u4ece App Router \u8c08\u8d77<\/p>\n<p>\u5f53\u4f60\u6309\u4e0b\u56de\u8f66\u952e&#xff0c;\u811a\u624b\u67b6\u4f1a\u8fc5\u901f\u7f16\u7ec7\u51fa\u4e00\u5957\u590d\u6742\u7684\u76ee\u5f55\u7ed3\u6784\u3002\u8fd9\u5e76\u975e\u968f\u610f\u4e3a\u4e4b&#xff0c;\u800c\u662f\u4e00\u5957\u4e25\u5bc6\u7684\u57fa\u4e8e\u6587\u4ef6\u7cfb\u7edf\u7684\u8def\u7531&#xff08;File-based Routing&#xff09;\u903b\u8f91\u3002<\/p>\n<p>1.\u00a0app\/\u00a0\u76ee\u5f55&#xff1a;\u63a7\u5236\u6743\u7684\u4e2d\u5fc3\u5316<\/p>\n<p>\u5728 App Router \u6a21\u5f0f\u4e0b&#xff0c;\u811a\u624b\u67b6\u521b\u5efa\u7684\u00a0app\/\u00a0\u76ee\u5f55\u91c7\u7528\u4e86\u5d4c\u5957\u6587\u4ef6\u5939\u7ed3\u6784\u3002\u6bcf\u4e00\u4e2a\u00a0page.tsx\u3001layout.tsx\u00a0\u548c\u00a0loading.tsx\u00a0\u90fd\u662f\u4e00\u4e2a\u7279\u5b9a\u7684\u534f\u8bae\u8282\u70b9\u3002<\/p>\n<ul>\n<li>\n<p>\u5de5\u7a0b\u610f\u56fe&#xff1a;\u00a0\u901a\u8fc7\u5f3a\u5236\u6027\u7684\u6587\u4ef6\u547d\u540d\u7ea6\u5b9a&#xff0c;Next.js \u5b9e\u73b0\u4e86\u5bf9\u201c\u8def\u7531\u72b6\u6001\u201d\u7684\u9ad8\u5ea6\u62bd\u8c61\u3002\u4f60\u4e0d\u518d\u9700\u8981\u7f16\u5199\u7e41\u7410\u7684\u8def\u7531\u5b88\u536b\u6216\u52a0\u8f7d\u72b6\u6001\u5207\u6362&#xff0c;\u811a\u624b\u67b6\u9884\u8bbe\u7684\u7ed3\u6784\u5df2\u7ecf\u4e3a\u4f60\u9884\u7559\u4e86\u63d2\u69fd\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u9690\u85cf\u7684\u9759\u6001\u8d44\u6e90\u903b\u8f91<\/p>\n<p>public\/\u00a0\u76ee\u5f55\u4e0e\u00a0next\/image\u00a0\u7684\u8054\u52a8&#xff0c;\u53cd\u6620\u4e86\u6846\u67b6\u5bf9\u8d44\u4ea7\u7ba1\u7406&#xff08;Asset Management&#xff09;\u7684\u601d\u8003\u3002\u811a\u624b\u67b6\u901a\u8fc7\u9884\u8bbe\u00a0.gitignore&#xff0c;\u5de7\u5999\u5730\u5904\u7406\u4e86\u54ea\u4e9b\u662f\u6e90\u4ee3\u7801&#xff08;src&#xff09;&#xff0c;\u54ea\u4e9b\u662f\u6784\u5efa\u4ea7\u7269&#xff08;.next&#xff09;&#xff0c;\u54ea\u4e9b\u662f\u9759\u6001\u8d44\u4ea7\u3002<\/p>\n<p>\u4e09\u3001 \u6837\u5f0f\u7684\u5de5\u4e1a\u9769\u547d&#xff1a;Tailwind CSS \u7684\u6df1\u5ea6\u96c6\u6210<\/p>\n<p>\u4e3a\u4ec0\u4e48 Next.js \u51e0\u4e4e\u5c06 Tailwind CSS \u89c6\u4f5c\u201c\u5b98\u914d\u201d&#xff1f;<\/p>\n<p>\u5728\u4f20\u7edf\u7684\u811a\u624b\u67b6\u4e2d&#xff0c;CSS \u7684\u5904\u7406\u5f80\u5f80\u662f\u6df7\u4e71\u7684\u3002create-next-app\u00a0\u9ed8\u8ba4\u63a8\u8350 Tailwind&#xff0c;\u662f\u56e0\u4e3a\u5b83\u89e3\u51b3\u4e86\u4e00\u4e2a\u5de5\u7a0b\u96be\u9898&#xff1a;\u6837\u5f0f\u7684\u539f\u5b50\u5316\u4e0e\u53ef\u9884\u6d4b\u6027\u3002<\/p>\n<ul>\n<li>\n<p>\u6d88\u9664\u201c\u6837\u5f0f\u6b7b\u4ee3\u7801\u201d&#xff1a;\u00a0Tailwind \u4e0e Next.js \u7684\u6784\u5efa\u6d41\u7ed3\u5408&#xff0c;\u786e\u4fdd\u53ea\u6709\u88ab\u7528\u5230\u7684 CSS \u7c7b\u4f1a\u88ab\u6253\u5305\u3002<\/p>\n<\/li>\n<li>\n<p>\u4e00\u81f4\u6027\u7684\u5de5\u7a0b\u7ea6\u675f&#xff1a;\u00a0\u65e0\u8bba\u8c01\u6765\u63a5\u624b\u9879\u76ee&#xff0c;\u53ea\u8981\u770b\u5230\u00a0flex items-center&#xff0c;\u5c31\u80fd\u7acb\u523b\u660e\u767d\u5e03\u5c40\u903b\u8f91&#xff0c;\u800c\u4e0d\u9700\u8981\u5728\u6210\u767e\u4e0a\u5343\u4e2a\u00a0.css\u00a0\u6587\u4ef6\u4e2d\u8df3\u8dc3\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u811a\u624b\u67b6\u5728\u521d\u59cb\u5316\u65f6&#xff0c;\u4f1a\u81ea\u52a8\u751f\u6210\u00a0tailwind.config.ts\u00a0\u548c\u6ce8\u5165\u00a0&#064;tailwind\u00a0\u6307\u4ee4\u7684\u00a0globals.css\u3002\u8fd9\u4e0d\u4ec5\u662f\u7701\u53bb\u4e86\u51e0\u884c\u914d\u7f6e&#xff0c;\u800c\u662f\u786e\u7acb\u4e86\u9879\u76ee\u7684\u89c6\u89c9\u7cfb\u7edf&#xff08;Design System&#xff09;\u57fa\u7840\u3002<\/p>\n<p>\u56db\u3001 \u8def\u5f84\u522b\u540d\u7684\u9b54\u6cd5&#xff1a;&#064;\/*\u00a0\u7684\u5de5\u7a0b\u5b9e\u8df5<\/p>\n<p>\u4f60\u662f\u5426\u538c\u5026\u4e86\u00a0import Component from &#039;..\/..\/..\/..\/components\/Button&#039;&#xff1f;<\/p>\n<p>create-next-app\u00a0\u5728\u521d\u59cb\u5316\u65f6\u4f1a\u8be2\u95ee\u5e76\u81ea\u52a8\u914d\u7f6e\u00a0Import Alias&#xff08;\u8def\u5f84\u522b\u540d&#xff09;\u3002<\/p>\n<p>\/\/ tsconfig.json<br \/>\n{<br \/>\n  &#034;compilerOptions&#034;: {<br \/>\n    &#034;paths&#034;: {<br \/>\n      &#034;&#064;\/*&#034;: [&#034;.\/*&#034;]<br \/>\n    }<br \/>\n  }<br \/>\n}<\/p>\n<p>\u8fd9\u4e00\u7ec6\u8282\u7684\u4ef7\u503c\u5728\u4e8e&#xff1a;\u00a0\u5b83\u5c06\u7ec4\u4ef6\u7684\u5f15\u7528\u4ece\u201c\u7269\u7406\u8def\u5f84\u201d\u63d0\u5347\u5230\u4e86\u201c\u903b\u8f91\u8def\u5f84\u201d\u3002\u65e0\u8bba\u4f60\u7684\u6587\u4ef6\u5728\u76ee\u5f55\u6811\u4e2d\u5982\u4f55\u642c\u8fc1&#xff0c;&#064;\/components\/Button\u00a0\u6c38\u8fdc\u6709\u6548\u3002\u8fd9\u79cd\u5bf9\u91cd\u6784\u53cb\u597d&#xff08;Refactor-friendly&#xff09;\u7684\u9884\u8bbe&#xff0c;\u662f\u5927\u578b\u9879\u76ee\u80fd\u591f\u957f\u671f\u7ef4\u62a4\u7684\u57fa\u77f3\u3002<\/p>\n<p>\u4e94\u3001 \u9690\u5f62\u7684\u6784\u5efa\u5f15\u64ce&#xff1a;Next.js \u914d\u7f6e\u7684\u7cbe\u9ad3<\/p>\n<p>\u811a\u624b\u67b6\u751f\u6210\u7684\u00a0next.config.ts\u00a0\u6700\u521d\u53ef\u80fd\u975e\u5e38\u7a7a\u65f7&#xff0c;\u4f46\u5176\u80cc\u540e\u9690\u85cf\u7740\u5f3a\u5927\u7684\u9ed8\u8ba4\u80fd\u529b&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u81ea\u52a8 Image \u4f18\u5316&#xff1a;\u00a0\u5bf9\u5916\u90e8\u57df\u540d\u7684\u5b89\u5168\u767d\u540d\u5355\u3002<\/p>\n<\/li>\n<li>\n<p>Webpack \u4e0e Turbopack \u7684\u65e0\u7f1d\u5207\u6362&#xff1a;\u00a0\u811a\u672c\u4e2d\u9884\u7f6e\u4e86\u00a0&#8211;turbo\u00a0\u6807\u5fd7&#xff0c;\u6307\u793a\u7740\u6784\u5efa\u6548\u7387\u7684\u8dc3\u8fc1\u3002<\/p>\n<\/li>\n<li>\n<p>\u4e25\u683c\u6a21\u5f0f&#xff08;React Strict Mode&#xff09;&#xff1a;\u00a0\u9ed8\u8ba4\u5f00\u542f\u3002\u8fd9\u610f\u5473\u7740\u811a\u624b\u67b6\u5728\u9f13\u52b1\u4f60\u5199\u51fa\u5e76\u53d1\u5b89\u5168\u3001\u65e0\u526f\u4f5c\u7528\u7684\u4ee3\u7801\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u516d\u3001 \u603b\u7ed3&#xff1a;\u811a\u624b\u67b6\u662f\u201c\u6d3b\u7684\u6587\u6863\u201d<\/p>\n<p>create-next-app\u00a0\u7edd\u975e\u6b7b\u677f\u7684\u4ee3\u7801\u6a21\u677f&#xff0c;\u5b83\u662f Next.js \u751f\u6001\u8fdb\u5316\u7684\u7f29\u5f71\u3002\u5b83\u901a\u8fc7\u4e00\u884c\u7b80\u5355\u7684\u547d\u4ee4&#xff0c;\u5c06\u6570\u5343\u540d\u9876\u5c16\u5de5\u7a0b\u5e08\u6c89\u6dc0\u4e0b\u6765\u7684\u5de5\u7a0b\u5316\u8ba4\u77e5\u76f4\u63a5\u6ce8\u5165\u4f60\u7684\u786c\u76d8\u3002<\/p>\n<ul>\n<li>\n<p>\u5b83\u5e2e\u4f60\u5904\u7406\u4e86 TypeScript \u7684\u7e41\u7410\u914d\u7f6e&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u5b83\u4e3a\u4f60\u67b6\u8bbe\u4e86\u9ad8\u6027\u80fd\u7684\u6837\u5f0f\u7cfb\u7edf&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u5b83\u5f15\u5bfc\u4f60\u8d70\u5411 Server Components \u7684\u672a\u6765\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u201c\u811a\u624b\u67b6\u4e4b\u7f8e\u201d&#xff0c;\u7f8e\u5728\u5b83\u5bf9\u590d\u6742\u5ea6\u7684\u6781\u81f4\u5c01\u88c5&#xff0c;\u66f4\u7f8e\u5728\u5b83\u5bf9\u5f00\u53d1\u8005\u751f\u4ea7\u529b\u7684\u6df1\u5ea6\u5c0a\u91cd\u3002\u00a0\u5f53\u4f60\u8df3\u51fa\u4ee3\u7801\u7f16\u5199\u672c\u8eab&#xff0c;\u53bb\u89c2\u5bdf\u8fd9\u5957\u521d\u59cb\u5316\u6d41\u7a0b\u65f6&#xff0c;\u4f60\u4f1a\u53d1\u73b0&#xff0c;\u6240\u8c13\u5168\u6808\u4e13\u5bb6\u7684\u4fee\u517b&#xff0c;\u5f88\u5927\u7a0b\u5ea6\u4e0a\u5c31\u4f53\u73b0\u5728\u5bf9\u8fd9\u4e9b\u201c\u57fa\u7840\u8bbe\u65bd\u201d\u7684\u7406\u89e3\u4e0e\u8fd0\u7528\u4e4b\u4e0a\u3002<\/p>\n<p>\u638c\u63e1\u4e86\u811a\u624b\u67b6\u7684\u5965\u79d8\u540e&#xff0c;\u4f60\u5df2\u7ecf\u62e5\u6709\u4e86\u4e00\u5ea7\u575a\u56fa\u7684\u5821\u5792\u3002\u4f46\u5728\u5821\u5792\u4e2d\u9ad8\u6548\u4f5c\u6218&#xff0c;\u8fd8\u9700\u8981\u4e00\u5957\u5f97\u5fc3\u5e94\u624b\u7684\u6b66\u5668\u3002\u4e0b\u4e00\u8282&#xff0c;\u6211\u4eec\u5c06\u8fdb\u5165 \u00a0\u201c\u5f00\u53d1\u5229\u5668\u201d&#xff0c;\u5f00\u59cb\u63a2\u7d22 VS Code \u7684\u5947\u5999\u4e4b\u65c5\u3002<\/p>\n<h3>2.3 \u201c\u5f00\u53d1\u5229\u5668\u201d\u2014\u2014VS Code \u63d2\u4ef6\u751f\u6001\u4e0e Turbopack \u6784\u5efa\u52a0\u901f\u5668<\/h3>\n<p>\u5982\u679c\u8bf4\u5f00\u53d1\u73af\u5883\u662f\u5168\u6808\u5de5\u7a0b\u5e08\u7684\u201c\u7ec3\u529f\u623f\u201d&#xff0c;\u90a3\u4e48 IDE&#xff08;\u96c6\u6210\u5f00\u53d1\u73af\u5883&#xff09;\u5c31\u662f\u6211\u4eec\u7684\u201c\u6570\u5b57\u5ea7\u8231\u201d&#xff0c;\u800c\u6784\u5efa\u5f15\u64ce\u5219\u662f\u9a71\u52a8\u4ee3\u7801\u98de\u884c\u7684\u201c\u55b7\u6c14\u5f15\u64ce\u201d\u3002<\/p>\n<p>\u5728 Next.js \u7684\u5f00\u53d1\u8303\u5f0f\u4e2d&#xff0c;\u6548\u7387\u5e76\u975e\u6765\u81ea\u4e8e\u65e0\u4f11\u6b62\u7684\u52a0\u73ed&#xff0c;\u800c\u662f\u6765\u81ea\u4e8e\u53cd\u9988\u56de\u8def\u7684\u6781\u5ea6\u7f29\u77ed\u3002\u4e00\u4e2a\u9876\u7ea7\u7684\u4e13\u5bb6\u4f1a\u901a\u8fc7\u7cbe\u5bc6\u7684\u63d2\u4ef6\u914d\u7f6e\u4e0e\u524d\u6cbf\u7684\u6784\u5efa\u6280\u672f&#xff0c;\u5c06\u4ee3\u7801\u4ece\u201c\u6572\u4e0b\u201d\u5230\u201c\u751f\u6548\u201d\u7684\u65f6\u95f4\u538b\u7f29\u81f3\u6beb\u79d2\u7ea7\u3002\u8fd9\u79cd\u6781\u81f4\u7684\u54cd\u5e94\u901f\u5ea6&#xff0c;\u662f\u8fdb\u5165\u201c\u5fc3\u6d41&#xff08;Flow State&#xff09;\u201d\u72b6\u6001\u7684\u552f\u4e00\u95e8\u7968\u3002<\/p>\n<p>\u4e00\u3001 \u6570\u5b57\u5ea7\u8231&#xff1a;VS Code \u7684\u201c\u667a\u5316\u201d\u914d\u7f6e<\/p>\n<p>\u5bf9\u4e8e Next.js \u5f00\u53d1\u8005\u800c\u8a00&#xff0c;VS Code \u4e0d\u4ec5\u4ec5\u662f\u4e00\u4e2a\u6587\u672c\u7f16\u8f91\u5668&#xff0c;\u5b83\u662f\u4e00\u4e2a\u80fd\u591f\u7406\u89e3\u4ee3\u7801\u610f\u56fe\u7684\u201c\u667a\u80fd\u5927\u8111\u201d\u3002\u8981\u5b9e\u73b0\u8fd9\u4e00\u70b9&#xff0c;\u6211\u4eec\u9700\u8981\u901a\u8fc7\u63d2\u4ef6\u751f\u6001\u5bf9\u5176\u8fdb\u884c\u6df1\u5ea6\u6b66\u88c5\u3002<\/p>\n<p>1. \u8bed\u6cd5\u4e0e\u903b\u8f91\u7684\u201c\u663e\u5fae\u955c\u201d<\/p>\n<ul>\n<li>\n<p>ES7&#043; React\/Redux\/React-Native snippets&#xff1a;\u8fd9\u662f\u6548\u7387\u7684\u57fa\u77f3\u3002\u901a\u8fc7\u7b80\u5355\u7684\u7f29\u5199&#xff08;\u5982\u00a0rfce&#xff09;&#xff0c;\u4f60\u53ef\u4ee5\u77ac\u95f4\u751f\u6210\u4e00\u4e2a\u7b26\u5408\u6807\u51c6\u7684 React \u7ec4\u4ef6\u7ed3\u6784\u3002\u5728 Next.js \u9891\u7e41\u521b\u5efa Page \u548c Layout \u7684\u573a\u666f\u4e0b&#xff0c;\u8fd9\u80fd\u8282\u7701\u5927\u91cf\u7684\u91cd\u590d\u52b3\u52a8\u3002<\/p>\n<\/li>\n<li>\n<p>Console Ninja&#xff1a;\u8fd9\u662f\u4e00\u4e2a\u6781\u5177\u751f\u4ea7\u529b\u7684\u5de5\u5177\u3002\u5b83\u80fd\u76f4\u63a5\u5728\u4f60\u7684\u7f16\u8f91\u5668\u4ee3\u7801\u884c\u65c1\u663e\u793a\u00a0console.log\u00a0\u7684\u8f93\u51fa\u3002\u5728\u8c03\u8bd5 Next.js \u670d\u52a1\u7aef\u7ec4\u4ef6&#xff08;RSC&#xff09;\u65f6&#xff0c;\u4f60\u65e0\u9700\u5728\u7ec8\u7aef\u548c\u6d4f\u89c8\u5668\u4e4b\u95f4\u6765\u56de\u5207\u6362&#xff0c;\u6570\u636e\u6d41\u5c31\u5728\u4f60\u7684\u6307\u5c16\u8dc3\u52a8\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u6837\u5f0f\u7684\u201c\u5b9e\u65f6\u611f\u77e5\u201d<\/p>\n<ul>\n<li>\n<p>Tailwind CSS IntelliSense&#xff1a;\u7531\u4e8e Next.js \u4e0e Tailwind \u7684\u6df1\u5ea6\u7ed1\u5b9a&#xff0c;\u8fd9\u4e2a\u63d2\u4ef6\u662f\u4e0d\u53ef\u6216\u7f3a\u7684\u3002\u5b83\u63d0\u4f9b\u4e86\u667a\u80fd\u8865\u5168\u3001\u8bed\u6cd5\u9ad8\u4eae\u4ee5\u53ca\u6700\u8ff7\u4eba\u7684\u529f\u80fd\u2014\u2014\u60ac\u505c\u9884\u89c8\u3002\u5f53\u4f60\u628a\u9f20\u6807\u505c\u7559\u5728\u00a0flex-1\u00a0\u4e0a\u65f6&#xff0c;\u5b83\u4f1a\u544a\u8bc9\u4f60\u5bf9\u5e94\u7684 CSS \u5c5e\u6027\u3002\u8fd9\u79cd\u5b9e\u65f6\u7684\u89c6\u89c9\u53cd\u9988&#xff0c;\u5927\u5927\u964d\u4f4e\u4e86\u8bb0\u5fc6\u8d1f\u62c5\u3002<\/p>\n<\/li>\n<\/ul>\n<p>3. \u67b6\u6784\u7684\u201c\u5bfc\u822a\u5458\u201d<\/p>\n<ul>\n<li>\n<p>Prisma \/ Drizzle \u63d2\u4ef6&#xff1a;\u5982\u679c\u4f60\u5728 Next.js \u4e2d\u5904\u7406\u6570\u636e\u5e93&#xff0c;\u8fd9\u4e9b\u63d2\u4ef6\u80fd\u63d0\u4f9b\u6570\u636e\u5e93 Schema \u7684\u9ad8\u4eae\u4e0e\u8865\u5168\u3002\u5728\u7f16\u5199 Server Actions \u65f6&#xff0c;\u8fd9\u79cd\u4ece\u6570\u636e\u5e93\u5c42\u5230\u4e1a\u52a1\u5c42\u7684\u201c\u7c7b\u578b\u900f\u4f20\u201d\u4f53\u9a8c&#xff0c;\u662f\u4fdd\u8bc1\u4ee3\u7801\u5065\u58ee\u6027\u7684\u6838\u5fc3\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e8c\u3001 \u901f\u5ea6\u4e4b\u9b42&#xff1a;Turbopack \u5e26\u6765\u7684\u6027\u80fd\u9769\u547d<\/p>\n<p>\u5728 Next.js \u7684\u6f14\u8fdb\u53f2\u4e0a&#xff0c;Webpack \u66fe\u662f\u529f\u52cb\u5353\u8457\u7684\u5e55\u540e\u82f1\u96c4\u3002\u4f46\u968f\u7740\u9879\u76ee\u89c4\u6a21\u7684\u81a8\u80c0&#xff0c;Webpack \u81c3\u80bf\u7684\u6784\u5efa\u901f\u5ea6\u9010\u6e10\u6210\u4e3a\u4e86\u5f00\u53d1\u8005\u7684\u5669\u68a6\u3002\u4e8e\u662f&#xff0c;Turbopack\u00a0\u5e94\u8fd0\u800c\u751f\u3002<\/p>\n<p>1. \u4e3a\u4ec0\u4e48\u662f Rust&#xff1f;<\/p>\n<p>Turbopack \u91c7\u7528 Rust \u8bed\u8a00\u91cd\u5199&#xff0c;\u8fd9\u5e76\u975e\u76f2\u76ee\u8ffd\u6c42\u65f6\u9ae6&#xff0c;\u800c\u662f\u5bf9\u6027\u80fd\u7684\u7ec8\u6781\u538b\u69a8\u3002\u76f8\u6bd4\u4e8e\u57fa\u4e8e Node.js \u7684 Webpack&#xff0c;Rust \u63d0\u4f9b\u4e86\u6781\u81f4\u7684\u5185\u5b58\u63a7\u5236\u4e0e\u5e76\u53d1\u80fd\u529b\u3002<\/p>\n<p>\u4e13\u5bb6\u89c6\u70b9&#xff1a;\u00a0\u5f53\u6784\u5efa\u5de5\u5177\u4ece\u89e3\u91ca\u578b\u8bed\u8a00&#xff08;JS&#xff09;\u8de8\u8d8a\u5230\u7f16\u8bd1\u578b\u8bed\u8a00&#xff08;Rust&#xff09;&#xff0c;\u6211\u4eec\u8de8\u8d8a\u7684\u662f\u91cf\u7ea7\u7684\u9e3f\u6c9f\u3002<\/p>\n<p>2. \u589e\u91cf\u8ba1\u7b97&#xff08;Incremental Computation&#xff09;\u7684\u5965\u79d8<\/p>\n<p>Turbopack \u7684\u6838\u5fc3\u903b\u8f91\u4e0d\u662f\u201c\u91cd\u65b0\u6784\u5efa\u201d&#xff0c;\u800c\u662f\u201c\u7cbe\u51c6\u66f4\u65b0\u201d\u3002<\/p>\n<ul>\n<li>\n<p>\u8bb0\u5fc6\u5316\u6267\u884c&#xff1a;\u5b83\u80fd\u8bb0\u4f4f\u4e4b\u524d\u505a\u8fc7\u7684\u6bcf\u4e00\u9879\u4efb\u52a1\u3002\u5982\u679c\u4f60\u53ea\u4fee\u6539\u4e86\u4e00\u4e2a\u6309\u94ae\u7684\u989c\u8272&#xff0c;\u5b83\u7edd\u4e0d\u4f1a\u53bb\u91cd\u65b0\u626b\u63cf\u4f60\u7684\u8def\u7531\u8868\u6216\u91cd\u65b0\u7f16\u8bd1\u4f60\u7684 API \u63a5\u53e3\u3002<\/p>\n<\/li>\n<li>\n<p>\u6309\u9700\u6253\u5305&#xff1a;\u5728\u5f00\u53d1\u6a21\u5f0f\u4e0b&#xff0c;Turbopack \u53ea\u7f16\u8bd1\u4f60\u5f53\u524d\u6b63\u5728\u67e5\u770b\u7684\u90a3\u4e2a\u9875\u9762&#xff08;Route-based Bundling&#xff09;\u3002\u8fd9\u79cd\u201c\u5373\u7528\u5373\u5efa\u201d\u7684\u7b56\u7565&#xff0c;\u4f7f\u5f97\u65e0\u8bba\u4f60\u7684\u9879\u76ee\u6709 10 \u4e2a\u9875\u9762\u8fd8\u662f 1000 \u4e2a\u9875\u9762&#xff0c;\u542f\u52a8\u901f\u5ea6\u51e0\u4e4e\u662f\u4e00\u81f4\u7684\u3002<\/p>\n<\/li>\n<\/ul>\n<p>3. HMR&#xff1a;\u611f\u77e5\u4e0d\u5230\u7684\u5237\u65b0<\/p>\n<p>\u70ed\u6a21\u5757\u66ff\u6362&#xff08;HMR&#xff09;\u5728 Turbopack \u7684\u52a0\u6301\u4e0b\u8fbe\u5230\u4e86\u4e1d\u6ed1\u7684\u5883\u754c\u3002\u4f60\u4fee\u6539\u4ee3\u7801&#xff0c;\u6309\u4e0b\u00a0Cmd&#043;S&#xff0c;\u6d4f\u89c8\u5668\u5728\u77ac\u95f4&#xff08;\u901a\u5e38\u4f4e\u4e8e 100ms&#xff09;\u5b8c\u6210\u5c40\u90e8\u66f4\u65b0&#xff0c;\u751a\u81f3\u8fde\u8868\u5355\u7684\u8f93\u5165\u72b6\u6001\u90fd\u4e0d\u4f1a\u4e22\u5931\u3002\u8fd9\u79cd\u53cd\u9988\u901f\u5ea6&#xff0c;\u8ba9\u5f00\u53d1\u8005\u80fd\u591f\u5b9e\u73b0\u771f\u6b63\u7684\u201c\u6240\u89c1\u5373\u6240\u5f97\u201d\u3002<\/p>\n<p>\u4e09\u3001 \u751f\u4ea7\u529b\u7684\u201c\u500d\u589e\u5668\u201d&#xff1a;Copilot \u4e0e AI \u7684\u534f\u540c<\/p>\n<p>\u4f5c\u4e3a 2026 \u5e74\u7684\u5168\u6808\u4e13\u5bb6&#xff0c;\u6211\u4eec\u5fc5\u987b\u8c08\u8c08 AI \u5728\u5f00\u53d1\u94fe\u8def\u4e2d\u7684\u4f4d\u7f6e\u3002<\/p>\n<p>\u5728 Next.js \u9879\u76ee\u4e2d&#xff0c;GitHub Copilot\u00a0\u6216\u7c7b\u4f3c\u7684 AI \u7f16\u7a0b\u52a9\u624b\u4e0d\u518d\u662f\u7b80\u5355\u7684\u81ea\u52a8\u8865\u5168&#xff0c;\u5b83\u6210\u4e3a\u4e86\u4f60\u7684\u201c\u526f\u9a7e\u9a76\u201d\u3002\u7531\u4e8e Next.js \u7684\u6587\u4ef6\u7ea6\u5b9a\u975e\u5e38\u5f3a&#xff08;\u5982\u00a0page.tsx\u3001layout.tsx&#xff09;&#xff0c;AI \u80fd\u975e\u5e38\u7cbe\u51c6\u5730\u9884\u6d4b\u4f60\u7684\u4e0b\u4e00\u4e2a\u903b\u8f91\u5757&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u5f53\u4f60\u521b\u5efa\u4e00\u4e2a\u6587\u4ef6\u5939\u5e76\u65b0\u5efa\u00a0page.tsx\u00a0\u65f6&#xff0c;AI \u5df2\u7ecf\u51c6\u5907\u597d\u4e86\u57fa\u7840\u7684 Server Component \u6a21\u677f\u3002<\/p>\n<\/li>\n<li>\n<p>\u5f53\u4f60\u7f16\u5199\u00a0fetch\u00a0\u8bf7\u6c42\u65f6&#xff0c;AI \u80fd\u6839\u636e\u4f60\u7684 API \u8def\u7531\u81ea\u52a8\u63a8\u65ad\u51fa\u6570\u636e\u7684\u7c7b\u578b\u5b9a\u4e49\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u8fd9\u79cd\u201c\u7ea6\u5b9a\u5e26\u6765\u7684\u53ef\u9884\u6d4b\u6027\u201d&#xff0c;\u8ba9 AI \u5de5\u5177\u5728 Next.js \u4f53\u7cfb\u4e0b\u53d1\u6325\u51fa\u4e86\u8fdc\u8d85\u5728\u5176\u5b83\u6846\u67b6\u4e2d\u7684\u6548\u80fd\u3002<\/p>\n<p>\u56db\u3001 \u603b\u7ed3&#xff1a;\u6548\u7387\u662f\u7b2c\u4e00\u751f\u4ea7\u529b<\/p>\n<p>\u5f88\u591a\u5f00\u53d1\u8005\u8ba4\u4e3a&#xff0c;\u82b1\u4e00\u4e0b\u5348\u65f6\u95f4\u53bb\u8c03\u6821\u63d2\u4ef6\u3001\u7814\u7a76\u6784\u5efa\u53c2\u6570\u662f\u201c\u6d6a\u8d39\u65f6\u95f4\u201d\u3002\u4f46\u6211\u5fc5\u987b\u5f3a\u8c03&#xff1a;\u78e8\u5200\u4e0d\u8bef\u780d\u67f4\u5de5\u3002<\/p>\n<ul>\n<li>\n<p>VS Code \u63d2\u4ef6\u89e3\u51b3\u4e86\u4f60\u4e0e\u4ee3\u7801\u4e4b\u95f4\u7684\u201c\u611f\u77e5\u201d\u8ddd\u79bb&#xff1b;<\/p>\n<\/li>\n<li>\n<p>Turbopack\u00a0\u89e3\u51b3\u4e86\u4f60\u4e0e\u8fd0\u884c\u6548\u679c\u4e4b\u95f4\u7684\u201c\u65f6\u95f4\u201d\u8ddd\u79bb&#xff1b;<\/p>\n<\/li>\n<li>\n<p>AI \u534f\u4f5c\u89e3\u51b3\u4e86\u4f60\u4e0e\u903b\u8f91\u5b9e\u73b0\u4e4b\u95f4\u7684\u201c\u601d\u8003\u201d\u8ddd\u79bb\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u5f53\u8fd9\u4e09\u8005\u5b8c\u7f8e\u4ea4\u7ec7&#xff0c;\u4f60\u5c06\u83b7\u5f97\u4e00\u79cd\u540d\u4e3a\u201c\u5fc3\u6d41\u201d\u7684\u5f00\u53d1\u4f53\u9a8c\u3002\u5728\u8fd9\u79cd\u4f53\u9a8c\u4e2d&#xff0c;\u7e41\u7410\u7684\u914d\u7f6e\u548c\u6f2b\u957f\u7684\u7b49\u5f85\u6d88\u5931\u4e86&#xff0c;\u5269\u4e0b\u7684\u53ea\u6709\u4f60\u4e0e\u4e1a\u52a1\u903b\u8f91\u7684\u7eaf\u7cb9\u535a\u5f08\u3002\u8fd9\u5c31\u662f\u9876\u7ea7\u4e13\u5bb6\u4e4b\u6240\u4ee5\u9ad8\u6548\u7684\u79d8\u5bc6\u2014\u2014\u4ed6\u4eec\u4e0d\u53ea\u662f\u5728\u5199\u4ee3\u7801&#xff0c;\u4ed6\u4eec\u662f\u5728\u9a7e\u9a76\u4e00\u53f0\u7ecf\u8fc7\u6781\u81f4\u6539\u88c5\u7684\u6027\u80fd\u673a\u5668\u3002<\/p>\n<p>\u5f53\u4f60\u63e1\u7d27\u4e86\u8fd9\u628a\u5229\u5203&#xff0c;\u4f60\u4f1a\u53d1\u73b0\u5f00\u53d1\u4e0d\u518d\u662f\u4e00\u79cd\u8d1f\u62c5&#xff0c;\u800c\u662f\u4e00\u573a\u6781\u901f\u7ade\u6280\u3002\u63a5\u4e0b\u6765&#xff0c;\u6211\u4eec\u5c06\u63a2\u8ba8\u5982\u4f55\u901a\u8fc7\u201c\u4ee3\u7801\u89c4\u8303\u201d\u7684\u5de5\u7a0b\u5316\u7ea6\u675f&#xff0c;\u4e3a\u8fd9\u53f0\u9ad8\u901f\u8d5b\u8f66\u88c5\u4e0a\u7cbe\u5bc6\u7684\u4eea\u8868\u76d8\u4e0e\u5236\u52a8\u7cfb\u7edf&#xff0c;\u786e\u4fdd\u6211\u4eec\u5728\u9ad8\u901f\u884c\u9a76\u4e2d\u6c38\u4e0d\u504f\u822a\u3002<\/p>\n<h3>2.4 \u201c\u4ee3\u7801\u89c4\u8303\u201d\u2014\u2014ESLint\u3001Prettier \u4e0e Husky \u7684\u5de5\u7a0b\u5316\u7ea6\u675f<\/h3>\n<p>\u5982\u679c\u8bf4\u9ad8\u6548\u7684\u5de5\u5177\u548c\u6784\u5efa\u5f15\u64ce\u8d4b\u4e88\u4e86\u9879\u76ee\u201c\u901f\u5ea6\u201d&#xff0c;\u90a3\u4e48\u4e25\u82db\u7684\u4ee3\u7801\u89c4\u8303\u4e0e\u81ea\u52a8\u5316\u7ea6\u675f\u5219\u8d4b\u4e88\u4e86\u9879\u76ee\u201c\u5bff\u547d\u201d\u3002<\/p>\n<p>\u5728\u8f6f\u4ef6\u5f00\u53d1\u7684\u6f2b\u957f\u5468\u671f\u4e2d&#xff0c;\u6700\u6602\u8d35\u7684\u6210\u672c\u4ece\u6765\u4e0d\u662f\u7f16\u5199\u4ee3\u7801&#xff0c;\u800c\u662f\u9605\u8bfb\u4e0e\u7ef4\u62a4\u4ee3\u7801\u3002\u4e00\u4e2a\u7f3a\u4e4f\u7ea6\u675f\u7684\u9879\u76ee&#xff0c;\u5c31\u50cf\u4e00\u5ea7\u5730\u57fa\u677e\u52a8\u7684\u5efa\u7b51&#xff0c;\u968f\u7740\u5c42\u6570\u7684\u589e\u52a0&#xff0c;\u7ec6\u5fae\u7684\u88c2\u75d5\u6700\u7ec8\u4f1a\u6f14\u53d8\u6210\u574d\u584c\u7684\u707e\u96be\u3002\u9876\u7ea7\u7684\u8ba1\u7b97\u673a\u4e13\u5bb6\u6df1\u77e5&#xff1a;\u81ea\u7531\u662f\u79e9\u5e8f\u7684\u4ea7\u7269\u3002\u00a0\u6211\u4eec\u5f15\u5165 ESLint\u3001Prettier \u548c Husky&#xff0c;\u5e76\u975e\u4e3a\u4e86\u675f\u7f1a\u5f00\u53d1\u8005\u7684\u521b\u9020\u529b&#xff0c;\u800c\u662f\u4e3a\u4e86\u6784\u5efa\u4e00\u5957\u201c\u5de5\u7a0b\u5316\u514d\u75ab\u7cfb\u7edf\u201d&#xff0c;\u8ba9\u4f4e\u7ea7\u9519\u8bef\u65e0\u5904\u9041\u5f62&#xff0c;\u8ba9\u56e2\u961f\u534f\u4f5c\u8fbe\u6210\u4e00\u79cd\u201c\u5982\u51fa\u4e00\u624b\u201d\u7684\u5ba1\u7f8e\u5951\u7ea6\u3002<\/p>\n<p>\u4e00\u3001 ESLint&#xff1a;\u903b\u8f91\u7684\u201c\u6570\u5b57\u5316\u536b\u58eb\u201d<\/p>\n<p>\u4ee3\u7801\u89c4\u8303\u7684\u7b2c\u4e00\u5c42\u662f\u201c\u903b\u8f91\u7684\u6b63\u4e49\u201d\u3002JavaScript \u662f\u4e00\u95e8\u6781\u5ea6\u7075\u6d3b\u751a\u81f3\u6709\u4e9b\u653e\u7eb5\u7684\u8bed\u8a00&#xff0c;\u800c ESLint \u7684\u5b58\u5728&#xff0c;\u5c31\u662f\u4e3a\u8fd9\u79cd\u7075\u6d3b\u6027\u5212\u5b9a\u8fb9\u754c\u3002<\/p>\n<p>1. \u6df1\u5ea6\u6574\u5408&#xff1a;eslint-config-next<\/p>\n<p>Next.js \u5b98\u65b9\u63d0\u4f9b\u7684 ESLint \u914d\u7f6e\u4e0d\u4ec5\u662f\u8bed\u6cd5\u7684\u68c0\u67e5\u5668&#xff0c;\u5b83\u66f4\u50cf\u662f\u4e00\u4f4d\u968f\u65f6\u5f85\u547d\u7684\u67b6\u6784\u67b6\u6784\u987e\u95ee\u3002\u5b83\u5185\u7f6e\u4e86\u5927\u91cf\u9488\u5bf9 Next.js \u7279\u6027\u7684\u89c4\u5219&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u56fe\u7247\u4f18\u5316\u544a\u8b66&#xff1a;\u5982\u679c\u4f60\u4f7f\u7528\u4e86\u539f\u751f\u00a0&lt;img&gt;\u00a0\u800c\u975e\u00a0next\/image&#xff0c;\u5b83\u4f1a\u7acb\u5373\u53d1\u51fa\u63d0\u9192&#xff0c;\u9632\u6b62\u4f60\u65e0\u610f\u4e2d\u7834\u574f\u4e86\u9875\u9762\u7684 LCP&#xff08;\u6700\u5927\u5185\u5bb9\u7ed8\u5236&#xff09;\u5f97\u5206\u3002<\/p>\n<\/li>\n<li>\n<p>\u811a\u672c\u52a0\u8f7d\u4f18\u5316&#xff1a;\u5b83\u4f1a\u76d1\u7763\u4f60\u4f7f\u7528\u00a0next\/script\u00a0\u7b56\u7565&#xff0c;\u786e\u4fdd\u7b2c\u4e09\u65b9\u811a\u672c\u4e0d\u4f1a\u963b\u585e\u4e3b\u7ebf\u7a0b\u3002<\/p>\n<\/li>\n<li>\n<p>\u94a9\u5b50\u4f9d\u8d56\u68c0\u67e5&#xff1a;\u5728 React \u5f00\u53d1\u4e2d&#xff0c;\u5b83\u80fd\u7cbe\u51c6\u6355\u83b7\u00a0useEffect\u00a0\u6216\u00a0useCallback\u00a0\u7f3a\u5931\u7684\u4f9d\u8d56\u9879&#xff0c;\u4ece\u6e90\u5934\u4e0a\u675c\u7edd\u5185\u5b58\u6cc4\u6f0f\u548c\u903b\u8f91\u6b7b\u5faa\u73af\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u4ece\u201c\u8b66\u544a\u201d\u5230\u201c\u963b\u6b62\u201d<\/p>\n<p>\u5728\u4e13\u5bb6\u7ea7\u7684\u914d\u7f6e\u4e2d&#xff0c;\u6211\u4eec\u4e0d\u4ec5\u5173\u6ce8\u903b\u8f91\u9519\u8bef&#xff0c;\u66f4\u5173\u6ce8\u67b6\u6784\u610f\u56fe\u7684\u5bf9\u9f50\u3002\u901a\u8fc7\u81ea\u5b9a\u4e49\u89c4\u5219&#xff0c;\u6211\u4eec\u53ef\u4ee5\u7981\u6b62\u5728\u670d\u52a1\u7aef\u7ec4\u4ef6&#xff08;RSC&#xff09;\u4e2d\u8bef\u7528\u5ba2\u6237\u7aef\u7279\u5b9a\u7684 API&#xff0c;\u8fd9\u79cd\u201c\u9759\u6001\u9632\u7ebf\u201d\u6bd4\u4efb\u4f55\u4ee3\u7801\u8bc4\u5ba1&#xff08;Code Review&#xff09;\u90fd\u66f4\u52a0\u9ad8\u6548\u4e14\u65e0\u79c1\u3002<\/p>\n<p>\u4e8c\u3001 Prettier&#xff1a;\u5ba1\u7f8e\u7684\u201c\u7ec8\u6781\u5951\u7ea6\u201d<\/p>\n<p>\u5982\u679c\u8bf4 ESLint \u8d1f\u8d23\u201c\u5bf9\u4e0d\u5bf9\u201d&#xff0c;\u90a3\u4e48 Prettier \u5219\u8d1f\u8d23\u201c\u7f8e\u4e0d\u7f8e\u201d\u3002<\/p>\n<p>\u5728\u5de5\u7a0b\u56e2\u961f\u4e2d&#xff0c;\u5173\u4e8e\u201c\u5355\u5f15\u53f7\u8fd8\u662f\u53cc\u5f15\u53f7\u201d\u3001\u201c\u7f29\u8fdb\u662f\u4e24\u4e2a\u7a7a\u683c\u8fd8\u662f\u56db\u4e2a\u201d\u3001\u201c\u5206\u53f7\u662f\u5426\u5fc5\u9009\u201d\u7684\u4e89\u8bba&#xff0c;\u662f\u6781\u5176\u6d88\u8017\u80fd\u91cf\u7684\u3002Prettier \u7684\u54f2\u5b66\u662f\u00a0\u201c\u4e3b\u89c2\u7684\u5f3a\u5236&#xff08;Opinionated&#xff09;\u201d\u3002\u5b83\u76f4\u63a5\u63a5\u7ba1\u4e86\u4ee3\u7801\u7684\u683c\u5f0f\u5316\u6743&#xff0c;\u5c06\u6240\u6709\u7684\u5ba1\u7f8e\u51b2\u7a81\u8f6c\u5316\u4e3a\u4e00\u4efd\u7b80\u5355\u7684\u914d\u7f6e\u6587\u4ef6\u3002<\/p>\n<p>1. \u964d\u4f4e\u8ba4\u77e5\u8d1f\u8377<\/p>\n<p>\u5f53\u6574\u4e2a\u9879\u76ee\u7684\u4ee3\u7801\u98ce\u683c\u9ad8\u5ea6\u7edf\u4e00\u65f6&#xff0c;\u5f00\u53d1\u8005\u7684\u9605\u8bfb\u4f53\u9a8c\u4f1a\u4ea7\u751f\u4e00\u79cd\u5947\u5999\u7684\u201c\u900f\u660e\u611f\u201d\u3002\u4f60\u7684\u5927\u8111\u4e0d\u518d\u9700\u8981\u53bb\u89e3\u6790\u4e0d\u540c\u4eba\u7684\u7f16\u7801\u4e60\u60ef&#xff0c;\u800c\u662f\u53ef\u4ee5\u76f4\u63a5\u6d1e\u7a7f\u8868\u8c61&#xff0c;\u76f4\u8fbe\u4e1a\u52a1\u903b\u8f91\u7684\u6838\u5fc3\u3002<\/p>\n<p>2. \u5b8c\u7f8e\u7684\u534f\u540c&#xff1a;Tailwind CSS \u6392\u5e8f<\/p>\n<p>\u5728 Next.js \u9879\u76ee\u4e2d&#xff0c;\u6211\u4eec\u901a\u5e38\u4f1a\u96c6\u6210\u00a0prettier-plugin-tailwindcss\u3002\u5b83\u4f1a\u81ea\u52a8\u6309\u7167\u5b98\u65b9\u63a8\u8350\u7684\u987a\u5e8f\u6392\u5217\u7c7b\u540d&#xff08;\u5982\u5c06\u5e03\u5c40\u7c7b\u653e\u5728\u524d\u9762&#xff0c;\u4ea4\u4e92\u7c7b\u653e\u5728\u540e\u9762&#xff09;\u3002\u8fd9\u79cd\u6781\u81f4\u7684\u7ec6\u8282\u63a7\u5236&#xff0c;\u8ba9\u51cc\u4e71\u7684 HTML \u7ed3\u6784\u77ac\u95f4\u53d8\u5f97\u4e95\u7136\u6709\u5e8f\u3002<\/p>\n<p>\u4e09\u3001 Husky \u4e0e Lint-staged&#xff1a;\u81ea\u52a8\u5316\u7684\u201c\u7eaa\u5f8b\u54e8\u5175\u201d<\/p>\n<p>\u5373\u4fbf\u62e5\u6709\u4e86\u6700\u5b8c\u7f8e\u7684\u914d\u7f6e\u6587\u4ef6&#xff0c;\u5982\u679c\u6267\u884c\u4f9d\u8d56\u4e8e\u5f00\u53d1\u8005\u7684\u201c\u81ea\u89c9\u201d&#xff0c;\u90a3\u4e48\u89c4\u8303\u7ec8\u5c06\u6ca6\u4e3a\u4e00\u7eb8\u7a7a\u6587\u3002\u6b63\u5982\u7834\u7a97\u6548\u5e94\u6240\u542f\u793a\u7684&#xff1a;\u53ea\u8981\u6709\u4e00\u4e2a\u4eba\u63d0\u4ea4\u4e86\u4e0d\u89c4\u8303\u7684\u4ee3\u7801&#xff0c;\u6574\u4e2a\u9879\u76ee\u7684\u8d28\u91cf\u5c31\u4f1a\u5f00\u59cb\u5d29\u584c\u3002<\/p>\n<p>Husky\u00a0\u548c\u00a0Lint-staged\u00a0\u7684\u7ec4\u5408&#xff0c;\u4e3a\u9879\u76ee\u5efa\u7acb\u4e86\u4e00\u9053\u4e0d\u53ef\u903e\u8d8a\u7684\u201c\u81ea\u52a8\u5316\u5173\u53e3\u201d\u3002<\/p>\n<p>1. Git Hooks \u7684\u827a\u672f<\/p>\n<p>Husky \u5141\u8bb8\u6211\u4eec\u76d1\u542c Git \u7684\u751f\u547d\u5468\u671f\u4e8b\u4ef6\u3002\u6700\u6838\u5fc3\u7684\u573a\u666f\u662f\u00a0pre-commit&#xff08;\u63d0\u4ea4\u524d\u6821\u9a8c&#xff09;&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u5f53\u4f60\u8f93\u5165\u00a0git commit\u00a0\u65f6&#xff0c;Husky \u4f1a\u81ea\u52a8\u89e6\u53d1\u3002<\/p>\n<\/li>\n<li>\n<p>\u5b83\u4e0d\u68c0\u67e5\u6574\u4e2a\u9879\u76ee&#xff08;\u90a3\u592a\u6162\u4e86&#xff09;&#xff0c;\u800c\u662f\u901a\u8fc7\u00a0Lint-staged\u00a0\u4ec5\u5bf9\u4f60\u672c\u6b21\u4fee\u6539\u7684\u6587\u4ef6&#xff08;Staged files&#xff09;\u8fdb\u884c\u626b\u63cf\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u201c\u4e0d\u51c6\u5e26\u75c5\u4e0a\u5c97\u201d<\/p>\n<p>\u5982\u679c ESLint \u53d1\u73b0\u4e86\u4e25\u91cd\u9519\u8bef&#xff0c;\u6216\u8005\u4ee3\u7801\u683c\u5f0f\u4e0d\u7b26\u5408 Prettier \u89c4\u8303&#xff0c;Husky \u4f1a\u76f4\u63a5\u62d2\u7edd\u672c\u6b21\u63d0\u4ea4\u3002\u8fd9\u79cd\u201c\u5f3a\u7ea6\u675f\u201d\u786e\u4fdd\u4e86\u8fdb\u5165\u4ee3\u7801\u4ed3\u5e93&#xff08;Repository&#xff09;\u7684\u6bcf\u4e00\u884c\u4ee3\u7801\u90fd\u662f\u7ecf\u8fc7\u8131\u80ce\u6362\u9aa8\u7684\u5408\u683c\u54c1\u3002<\/p>\n<p>\u56db\u3001 \u54f2\u5b66\u5347\u534e&#xff1a;\u4ece\u201c\u4eba\u6cbb\u201d\u8d70\u5411\u201c\u6cd5\u6cbb\u201d<\/p>\n<p>\u4e3a\u4ec0\u4e48\u9876\u7ea7\u4e13\u5bb6\u5982\u6b64\u8ff7\u604b\u8fd9\u4e9b\u201c\u7ea6\u675f\u201d\u5de5\u5177&#xff1f;<\/p>\n<p>\u672c\u8d28\u4e0a&#xff0c;\u8fd9\u662f\u5728\u8fdb\u884c\u00a0\u201c\u5fc3\u667a\u5e26\u5bbd\u7684\u4f18\u5316\u201d\u3002<\/p>\n<ul>\n<li>\n<p>\u4eba\u5de5 Review \u7684\u8d2c\u503c&#xff1a;\u5982\u679c\u6211\u4eec\u8fd8\u5728\u4ee3\u7801\u8bc4\u5ba1\u4e2d\u8ba8\u8bba\u201c\u8fd9\u4e2a\u62ec\u53f7\u5e94\u8be5\u6362\u884c\u201d&#xff0c;\u90a3\u662f\u5728\u6d6a\u8d39\u9ad8\u85aa\u5de5\u7a0b\u5e08\u7684\u624d\u534e\u3002<\/p>\n<\/li>\n<li>\n<p>\u673a\u5668 Review \u7684\u5347\u7ef4&#xff1a;\u5c06\u57fa\u7840\u89c4\u8303\u4ea4\u7ed9\u673a\u5668&#xff0c;\u8ba9\u5f00\u53d1\u8005\u628a\u7cbe\u529b\u82b1\u5728\u7b97\u6cd5\u4f18\u5316\u3001\u4e1a\u52a1\u62bd\u8c61\u548c\u67b6\u6784\u6f14\u8fdb\u4e0a\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u8fd9\u79cd\u5de5\u7a0b\u5316\u7ea6\u675f\u4f53\u73b0\u4e86\u4e00\u79cd\u201c\u9632\u5fa1\u6027\u7f16\u7a0b\u201d\u7684\u601d\u60f3\u3002\u6211\u4eec\u627f\u8ba4\u4eba\u7c7b\u662f\u4f1a\u72af\u9519\u7684\u3001\u662f\u4f1a\u75b2\u52b3\u7684\u3001\u662f\u4f1a\u5ba1\u7f8e\u75b2\u52b3\u7684\u3002\u56e0\u6b64&#xff0c;\u6211\u4eec\u7528\u5de5\u5177\u6784\u5efa\u4e86\u4e00\u4e2a\u6c38\u4e0d\u75b2\u5026\u7684\u5ba1\u67e5\u8005&#xff0c;\u5b88\u62a4\u7740\u4ee3\u7801\u7684\u7eaf\u6d01\u6027\u3002<\/p>\n<p>\u4e94\u3001 \u672c\u7ae0\u603b\u7ed3&#xff1a;\u5de5\u6b32\u5584\u5176\u4e8b&#xff0c;\u5fc5\u5148\u5f8b\u5176\u5fd7<\/p>\n<p>\u5728\u672c\u7ae0\u7684\u524d\u4e09\u8282\u4e2d&#xff0c;\u6211\u4eec\u8ba8\u8bba\u4e86\u8fd0\u884c\u65f6\u7684\u638c\u63a7\u3001\u811a\u624b\u67b6\u7684\u5965\u79d8\u548c\u751f\u4ea7\u529b\u7684\u5229\u5203\u3002\u800c\u672c\u8282\u7684\u201c\u89c4\u8303\u4e0e\u7ea6\u675f\u201d&#xff0c;\u5219\u662f\u5c06\u8fd9\u4e9b\u529b\u91cf\u6574\u5408\u5728\u4e00\u8d77\u7684\u80f6\u6c34\u4e0e\u62a4\u680f\u3002<\/p>\n<p>\u4e00\u4e2a\u6210\u719f\u7684 Next.js \u5f00\u53d1\u73af\u5883\u5e94\u8be5\u662f\u8fd9\u6837\u7684&#xff1a;<\/p>\n<li>\n<p>Node.js\/PNPM\u00a0\u63d0\u4f9b\u4e86\u7a33\u5b9a\u7684\u52a8\u529b\u6e90&#xff1b;<\/p>\n<\/li>\n<li>\n<p>TypeScript\u00a0\u63d0\u4f9b\u4e86\u575a\u56fa\u7684\u903b\u8f91\u9aa8\u67b6&#xff1b;<\/p>\n<\/li>\n<li>\n<p>Turbopack\u00a0\u63d0\u4f9b\u4e86\u6781\u901f\u7684\u53cd\u9988\u73af&#xff1b;<\/p>\n<\/li>\n<li>\n<p>ESLint\/Prettier\/Husky\u00a0\u5219\u63d0\u4f9b\u4e86\u957f\u6cbb\u4e45\u5b89\u7684\u79e9\u5e8f\u3002<\/p>\n<\/li>\n<p>\u5f53\u4f60\u5b8c\u6210\u4e86\u8fd9\u5957\u6781\u81f4\u914d\u7f6e&#xff0c;\u4f60\u5df2\u7ecf\u4e0d\u4ec5\u4ec5\u662f\u5728\u5199\u4e00\u4e2a Web \u5e94\u7528&#xff0c;\u4f60\u662f\u5728\u8fd0\u8425\u4e00\u4e2a\u7cbe\u5bc6\u7684\u8f6f\u4ef6\u5de5\u7a0b\u3002\u8fd9\u79cd\u4ece\u201c\u624b\u5de5\u574a\u201d\u5230\u201c\u6d41\u6c34\u7ebf\u201d\u7684\u8f6c\u53d8&#xff0c;\u6b63\u662f\u4f60\u4ece\u666e\u901a\u5f00\u53d1\u8005\u8fc8\u5411\u9876\u7ea7\u5168\u6808\u4e13\u5bb6\u7684\u6210\u5e74\u793c\u3002<\/p>\n<p>\u81f3\u6b64&#xff0c;\u7b2c\u4e8c\u7ae0\u201c\u5de5\u6b32\u5584\u5176\u4e8b\u201d\u5df2\u5168\u90e8\u5b8c\u6210\u3002\u6211\u4eec\u4e0d\u4ec5\u6253\u9020\u4e86\u4e00\u628a\u7edd\u4e16\u597d\u5251&#xff0c;\u8fd8\u5b66\u4f1a\u4e86\u5982\u4f55\u4fdd\u517b\u548c\u6325\u52a8\u5b83\u3002\u63a5\u4e0b\u6765&#xff0c;\u6211\u4eec\u5c06\u8fdb\u5165\u7b2c\u4e09\u7ae0&#xff1a;\u67b6\u6784\u7684\u5fc3\u6cd5\u2014\u2014React Server Components (RSC)&#xff0c;\u6df1\u5ea6\u7406\u89e3\u670d\u52a1\u7aef\u7ec4\u4ef6\u4e0e\u5ba2\u6237\u7aef\u7ec4\u4ef6&#xff0c;\u5b66\u4e60\u7406\u89e3 Hydration \u7684\u539f\u7406\u53ca\u5176\u5e26\u6765\u7684\u6027\u80fd\u6311\u6218&#xff0c;\u5584\u7528\u670d\u52a1\u7aef\u7ec4\u4ef6\u4e0e\u5ba2\u6237\u7aef\u7ec4\u4ef6\u7684\u201c\u8fb9\u754c\u611f\u201d&#xff0c;\u63d0\u5347\u6846\u67b6\u7684\u6574\u4f53\u6027\u80fd\u3002<\/p>\n<h2>\u7b2c3\u7ae0&#xff1a;\u67b6\u6784\u7684\u5fc3\u6cd5\u2014\u2014React Server Components (RSC)<\/h2>\n<ul>\n<li>\n<p>3.1 \u201c\u4e8c\u5143\u8bba\u201d&#xff1a;\u00a0\u6df1\u5ea6\u7406\u89e3\u670d\u52a1\u7aef\u7ec4\u4ef6\u4e0e\u5ba2\u6237\u7aef\u7ec4\u4ef6<\/p>\n<\/li>\n<li>\n<p>3.2 \u201c\u6c34\u5408\u201d\u7684\u827a\u672f&#xff1a;\u00a0\u7406\u89e3 Hydration \u7684\u539f\u7406\u53ca\u5176\u5e26\u6765\u7684\u6027\u80fd\u6311\u6218<\/p>\n<\/li>\n<li>\n<p>3.3 \u201c\u8fb9\u754c\u611f\u201d&#xff1a;\u00a0\u4f55\u65f6\u8be5\u7528\u00a0&#039;use client&#039;&#xff1f;\u2014\u2014\u7ec4\u4ef6\u804c\u8d23\u7684\u5212\u5206\u79d1\u5b66<\/p>\n<\/li>\n<\/ul>\n<h3>3.1 \u201c\u4e8c\u5143\u8bba\u201d\u2014\u2014\u6df1\u5ea6\u7406\u89e3\u670d\u52a1\u7aef\u7ec4\u4ef6\u4e0e\u5ba2\u6237\u7aef\u7ec4\u4ef6<\/h3>\n<p>\u5728\u53e4\u5178 React \u7684\u4e16\u754c\u89c2\u91cc&#xff0c;\u7ec4\u4ef6\u662f\u201c\u4e00\u5143\u201d\u7684\u3002\u65e0\u8bba\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u6309\u94ae&#xff0c;\u8fd8\u662f\u4e00\u4e2a\u590d\u6742\u7684\u5217\u8868&#xff0c;\u5b83\u4eec\u90fd\u9075\u5faa\u540c\u6837\u7684\u903b\u8f91&#xff1a;\u5728\u6d4f\u89c8\u5668\u4e2d\u4e0b\u8f7d\u3001\u89e3\u6790\u3001\u6267\u884c&#xff0c;\u5e76\u6700\u7ec8\u7ed8\u5236\u5728\u5c4f\u5e55\u4e0a\u3002<\/p>\n<p>\u7136\u800c&#xff0c;\u968f\u7740 Next.js App Router \u7684\u6a2a\u7a7a\u51fa\u4e16&#xff0c;React \u7684\u5b87\u5b99\u53d1\u751f\u4e86\u4e00\u573a\u6781\u5176\u6df1\u523b\u7684\u201c\u5927\u5206\u88c2\u201d\u3002\u7ec4\u4ef6\u88ab\u8d4b\u4e88\u4e86\u4e24\u79cd\u622a\u7136\u4e0d\u540c\u7684\u751f\u547d\u5f62\u6001&#xff1a;\u670d\u52a1\u7aef\u7ec4\u4ef6&#xff08;Server Components&#xff0c;\u7b80\u79f0 RSC&#xff09;\u4e0e\u5ba2\u6237\u7aef\u7ec4\u4ef6&#xff08;Client Components&#xff09;\u3002\u8fd9\u79cd\u201c\u4e8c\u5143\u8bba\u201d\u5e76\u975e\u7b80\u5355\u7684\u5206\u7c7b&#xff0c;\u800c\u662f\u5bf9 Web \u67b6\u6784\u5e95\u5c42\u7684\u91cd\u6784&#xff0c;\u5b83\u8981\u6c42\u5f00\u53d1\u8005\u4ece\u201c\u6211\u6b63\u5728\u5199\u4e00\u4e2a UI\u201d\u8f6c\u53d8\u4e3a\u201c\u6211\u6b63\u5728\u8bbe\u8ba1\u4e00\u6bb5\u903b\u8f91\u7684\u7269\u7406\u5f52\u5bbf\u201d\u3002<\/p>\n<p>\u4e00\u3001 \u54f2\u5b66\u8d77\u6e90&#xff1a;\u79e9\u5e8f\u4e0e\u7075\u52a8\u7684\u8fb9\u754c<\/p>\n<p>\u5982\u679c\u6211\u4eec\u5c06\u4e00\u4e2a Web \u5e94\u7528\u6bd4\u4f5c\u4e00\u5ea7\u5267\u9662&#xff0c;\u90a3\u4e48\u8fd9\u79cd\u4e8c\u5143\u8bba\u4fbf\u5c55\u73b0\u4e3a\u201c\u5e55\u540e&#xff08;Server&#xff09;\u201d\u4e0e\u201c\u53f0\u524d&#xff08;Client&#xff09;\u201d\u7684\u5b8c\u7f8e\u534f\u4f5c\u3002<\/p>\n<ul>\n<li>\n<p>\u670d\u52a1\u7aef\u7ec4\u4ef6&#xff08;\u5e55\u540e&#xff09;&#xff1a;\u5b83\u662f\u6df1\u6c89\u7684\u7b56\u5212\u8005\u3002\u5b83\u62e5\u6709\u76f4\u63a5\u8bbf\u95ee\u539f\u59cb\u8d44\u6e90&#xff08;\u5982\u6570\u636e\u5e93\u3001\u6587\u4ef6\u7cfb\u7edf\u3001\u5fae\u670d\u52a1&#xff09;\u7684\u6743\u529b\u3002\u5b83\u5728\u670d\u52a1\u5668\u7684\u9759\u8c27\u4e2d\u5b8c\u6210\u903b\u8f91\u8ba1\u7b97&#xff0c;\u53ea\u5c06\u6700\u7ec8\u7684\u201c\u5e03\u666f\u6307\u4ee4\u201d\u4f20\u5411\u89c2\u4f17\u5e2d\u3002<\/p>\n<\/li>\n<li>\n<p>\u5ba2\u6237\u7aef\u7ec4\u4ef6&#xff08;\u53f0\u524d&#xff09;&#xff1a;\u5b83\u662f\u7075\u52a8\u7684\u8868\u6f14\u8005\u3002\u5b83\u4e0e\u89c2\u4f17&#xff08;\u7528\u6237&#xff09;\u76f4\u63a5\u4ea4\u4e92&#xff0c;\u611f\u77e5\u6bcf\u4e00\u6b21\u70b9\u51fb\u3001\u6ed1\u52a8\u4e0e\u7f29\u653e\u3002\u5b83\u5b58\u5728\u4e8e\u6d4f\u89c8\u5668\u7684\u805a\u5149\u706f\u4e0b&#xff0c;\u8d1f\u8d23\u5904\u7406\u90a3\u4e9b\u9700\u8981\u5373\u65f6\u54cd\u5e94\u7684\u77ac\u95f4\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u8fd9\u79cd\u5212\u5206\u6253\u7834\u4e86\u4f20\u7edf SPA&#xff08;\u5355\u9875\u5e94\u7528&#xff09;\u4e2d\u201c\u6240\u6709\u4ee3\u7801\u90fd\u8981\u63a8\u5411\u5ba2\u6237\u7aef\u201d\u7684\u66b4\u653f&#xff0c;\u5c06\u00a0\u201c\u6570\u636e\u83b7\u53d6&#xff08;Data Fetching&#xff09;\u201d\u4e0e\u00a0\u201c\u4ea4\u4e92\u903b\u8f91&#xff08;Interaction&#xff09;\u201d\u00a0\u5728\u7269\u7406\u7a7a\u95f4\u4e0a\u8fdb\u884c\u4e86\u5265\u79bb\u3002<\/p>\n<p>\u4e8c\u3001 \u670d\u52a1\u7aef\u7ec4\u4ef6&#xff08;RSC&#xff09;&#xff1a;\u65e0\u5f62\u7684\u57fa\u77f3<\/p>\n<p>\u5728 Next.js \u7684 App Router \u4e2d&#xff0c;\u6240\u6709\u7684\u7ec4\u4ef6\u9ed8\u8ba4\u4e3a\u670d\u52a1\u7aef\u7ec4\u4ef6\u3002\u8fd9\u662f\u4e00\u79cd\u6781\u5177\u524d\u77bb\u6027\u7684\u8bbe\u8ba1\u9009\u62e9\u3002<\/p>\n<p>1. \u6743\u529b\u7684\u5dc5\u5cf0&#xff1a;\u76f4\u63a5\u8bbf\u95ee\u540e\u7aef\u8d44\u6e90<\/p>\n<p>\u5728\u4f20\u7edf\u7684 React \u4e2d&#xff0c;\u4f60\u9700\u8981\u7f16\u5199\u4e00\u4e2a API \u8def\u7531&#xff0c;\u7136\u540e\u5728\u00a0useEffect\u00a0\u4e2d\u53d1\u8d77 fetch \u8bf7\u6c42\u3002\u800c\u5728 RSC \u4e2d&#xff0c;\u7ec4\u4ef6\u672c\u8eab\u5c31\u662f\u4e00\u4e2a\u5f02\u6b65\u51fd\u6570\u3002\u4f60\u53ef\u4ee5\u76f4\u63a5\u5728\u7ec4\u4ef6\u5185\u5199\u4e0b&#xff1a;<\/p>\n<p>\/\/ page.tsx (\u9ed8\u8ba4\u662f Server Component)<br \/>\nasync function Page() {<br \/>\n  const data &#061; await db.query(&#034;SELECT * FROM posts&#034;); \/\/ \u76f4\u63a5\u67e5\u8be2\u6570\u636e\u5e93<br \/>\n  return &lt;PostList posts&#061;{data} \/&gt;;<br \/>\n}<\/p>\n<p>\u8fd9\u79cd\u201c\u7aef\u5230\u7aef\u903b\u8f91\u538b\u7f29\u201d\u6d88\u9664\u4e86\u4e0d\u5fc5\u8981\u7684\u7f51\u7edc\u4e2d\u95f4\u5c42&#xff0c;\u8ba9\u4ee3\u7801\u53d8\u5f97\u6781\u5176\u7eaf\u7cb9\u3002<\/p>\n<p>2. \u6781\u81f4\u7684\u7626\u8eab&#xff1a;0 \u675f\u4f53\u79ef&#xff08;Zero Bundle Size&#xff09;<\/p>\n<p>\u8fd9\u662f RSC \u6700\u4ee4\u8ba1\u7b97\u673a\u4e13\u5bb6\u7740\u8ff7\u7684\u7279\u6027\u3002\u7531\u4e8e\u670d\u52a1\u7aef\u7ec4\u4ef6\u7684\u4ee3\u7801\u6c38\u8fdc\u7559\u5728\u670d\u52a1\u5668\u4e0a\u8fd0\u884c&#xff0c;\u5b83\u4eec\u6240\u4f9d\u8d56\u7684\u5e9e\u5927\u5e93&#xff08;\u5982\u00a0moment.js\u00a0\u6216\u00a0markdown-it&#xff09;\u7edd\u4e0d\u4f1a\u88ab\u4e0b\u8f7d\u5230\u7528\u6237\u7684\u6d4f\u89c8\u5668\u4e2d\u3002<\/p>\n<ul>\n<li>\n<p>\u5de5\u7a0b\u610f\u4e49&#xff1a;\u4f60\u53ef\u4ee5\u5728\u670d\u52a1\u7aef\u8086\u65e0\u5fcc\u60ee\u5730\u4f7f\u7528\u91cd\u578b\u5de5\u5177\u5e93&#xff0c;\u800c\u4e0d\u7528\u62c5\u5fc3\u7528\u6237\u7684\u9875\u9762\u52a0\u8f7d\u901f\u5ea6\u3002\u53d1\u9001\u7ed9\u6d4f\u89c8\u5668\u7684&#xff0c;\u53ea\u6709\u7eaf\u7cb9\u7684 HTML \u7ed3\u6784\u548c\u6781\u7b80\u7684\u6e32\u67d3\u6307\u4ee4\u3002<\/p>\n<\/li>\n<\/ul>\n<p>3. \u5b89\u5168\u7684\u5821\u5792&#xff1a;\u654f\u611f\u4fe1\u606f\u7684\u9690\u533f<\/p>\n<p>\u7531\u4e8e RSC \u4e0d\u5728\u6d4f\u89c8\u5668\u8fd0\u884c&#xff0c;\u4f60\u53ef\u4ee5\u653e\u5fc3\u5730\u5728\u7ec4\u4ef6\u5185\u90e8\u4f7f\u7528 API Key\u3001\u6570\u636e\u5e93\u5bc6\u7801\u7b49\u654f\u611f\u4fe1\u606f&#xff0c;\u800c\u65e0\u9700\u62c5\u5fc3\u901a\u8fc7\u7f51\u7edc\u6570\u636e\u5305\u6cc4\u9732\u7ed9\u524d\u7aef\u3002<\/p>\n<p>\u4e09\u3001 \u5ba2\u6237\u7aef\u7ec4\u4ef6&#xff1a;\u4ea4\u4e92\u7684\u7075\u9b42<\/p>\n<p>\u5f53\u4f60\u9700\u8981\u4f7f\u7528\u00a0useState\u3001useEffect\u00a0\u6216\u8005\u76d1\u542c\u6d4f\u89c8\u5668\u7684\u00a0onClick\u00a0\u4e8b\u4ef6\u65f6&#xff0c;\u4f60\u4fbf\u9700\u8981\u5f15\u5165\u00a0&#039;use client&#039;\u00a0\u6307\u4ee4&#xff0c;\u5c06\u7ec4\u4ef6\u8f6c\u5316\u4e3a\u5ba2\u6237\u7aef\u7ec4\u4ef6\u3002<\/p>\n<p>1. \u72b6\u6001\u7684\u6816\u606f\u5730<\/p>\n<p>\u5ba2\u6237\u7aef\u7ec4\u4ef6\u662f React \u4f20\u7edf\u80fd\u529b\u7684\u627f\u8f7d\u8005\u3002\u5b83\u4eec\u8d1f\u8d23\u5904\u7406\u90a3\u4e9b\u201c\u6d3b\u201d\u7684\u903b\u8f91&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u8868\u5355\u8f93\u5165\u7684\u5b9e\u65f6\u9a8c\u8bc1&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u5f39\u7a97\u7684\u663e\u9690\u72b6\u6001&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u57fa\u4e8e\u6d4f\u89c8\u5668\u7684\u52a8\u753b\u6548\u679c\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u6d4f\u89c8\u5668 API \u7684\u5b88\u95e8\u4eba<\/p>\n<p>\u53ea\u6709\u5ba2\u6237\u7aef\u7ec4\u4ef6\u80fd\u591f\u8bbf\u95ee\u00a0window\u3001localStorage\u00a0\u6216\u00a0navigator\u3002\u5b83\u4eec\u662f Web \u5e94\u7528\u4e0e\u7528\u6237\u7269\u7406\u8bbe\u5907\u4ea7\u751f\u8fde\u63a5\u7684\u552f\u4e00\u7a97\u53e3\u3002<\/p>\n<p>\u56db\u3001 \u4e8c\u5143\u5171\u751f&#xff1a;RSC Payload \u7684\u6865\u6881<\/p>\n<p>\u5f88\u591a\u5f00\u53d1\u8005\u4f1a\u95ee&#xff1a;\u65e2\u7136\u4ee3\u7801\u8fd0\u884c\u5728\u4e0d\u540c\u7684\u5730\u65b9&#xff0c;\u5b83\u4eec\u662f\u5982\u4f55\u201c\u62fc\u5408\u201d\u6210\u4e00\u4e2a\u9875\u9762\u7684&#xff1f;<\/p>\n<p>\u8fd9\u4fbf\u6d89\u53ca\u5230 Next.js \u5e95\u5c42\u6781\u5176\u4f18\u96c5\u7684\u673a\u5236\u2014\u2014RSC Payload\u3002<\/p>\n<li>\n<p>\u670d\u52a1\u7aef\u6e32\u67d3&#xff1a;\u670d\u52a1\u5668\u6267\u884c RSC&#xff0c;\u5c06\u5b83\u4eec\u8f6c\u5316\u4e3a\u4e00\u79cd\u7279\u6b8a\u7684 JSON \u683c\u5f0f&#xff08;\u5305\u542b HTML \u7ed3\u6784\u548c\u6307\u5411\u5ba2\u6237\u7aef\u7ec4\u4ef6\u7684\u5f15\u7528&#xff09;\u3002<\/p>\n<\/li>\n<li>\n<p>\u6d41\u5f0f\u4f20\u8f93&#xff1a;\u8fd9\u79cd Payload \u88ab\u6d41\u5f0f\u53d1\u9001\u5230\u6d4f\u89c8\u5668\u3002<\/p>\n<\/li>\n<li>\n<p>\u5ba2\u6237\u7aef\u63a5\u7ba1&#xff1a;\u6d4f\u89c8\u5668\u89e3\u6790 Payload&#xff0c;\u6e32\u67d3\u51fa HTML&#xff0c;\u5e76\u4e0b\u8f7d\u5ba2\u6237\u7aef\u7ec4\u4ef6\u7684\u4ee3\u7801\u8fdb\u884c\u201c\u6c34\u5408&#xff08;Hydration&#xff09;\u201d\u3002<\/p>\n<\/li>\n<p>\u4e94\u3001 \u6838\u5fc3\u8fa8\u6790&#xff1a;\u4e8c\u8005\u7684\u5173\u952e\u5dee\u5f02<\/p>\n<p>\u4e3a\u4e86\u66f4\u597d\u5730\u7406\u89e3\u8fd9\u4e00\u4e8c\u5143\u6a21\u578b&#xff0c;\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u4e0b\u8868\u8fdb\u884c\u5bf9\u6bd4&#xff1a;<\/p>\n<table>\n<tr>\n<td>\u7279\u6027<\/td>\n<td>\u670d\u52a1\u7aef\u7ec4\u4ef6 (Server)<\/td>\n<td>\u5ba2\u6237\u7aef\u7ec4\u4ef6 (Client)<\/td>\n<\/tr>\n<tbody>\n<tr>\n<td>\u9ed8\u8ba4\u72b6\u6001<\/td>\n<td>\u662f<\/td>\n<td>\u5426 (\u9700\u58f0\u660e\u00a0&#039;use client&#039;)<\/td>\n<\/tr>\n<tr>\n<td>\u6570\u636e\u83b7\u53d6<\/td>\n<td>\u652f\u6301\u00a0async\/await\u00a0\u76f4\u63a5\u8bbf\u95ee\u540e\u7aef<\/td>\n<td>\u9700\u901a\u8fc7\u00a0fetch\u00a0\u8c03\u7528 API \u6216 Server Actions<\/td>\n<\/tr>\n<tr>\n<td>\u6d4f\u89c8\u5668 API<\/td>\n<td>\u4e0d\u53ef\u7528 (\u65e0 window\/document)<\/td>\n<td>\u5168\u9762\u652f\u6301<\/td>\n<\/tr>\n<tr>\n<td>React Hooks<\/td>\n<td>\u4e0d\u53ef\u7528 (\u65e0 State\/Effect)<\/td>\n<td>\u5168\u9762\u652f\u6301<\/td>\n<\/tr>\n<tr>\n<td>Bundle Size<\/td>\n<td>0 (\u4ee3\u7801\u4e0d\u53d1\u5f80\u524d\u7aef)<\/td>\n<td>\u968f\u4f9d\u8d56\u5e93\u589e\u52a0<\/td>\n<\/tr>\n<tr>\n<td>\u6267\u884c\u65f6\u673a<\/td>\n<td>\u6784\u5efa\u65f6\u6216\u8bf7\u6c42\u65f6 (\u670d\u52a1\u5668)<\/td>\n<td>\u8fd0\u884c\u65f6 (\u6d4f\u89c8\u5668)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u516d\u3001 \u4e13\u5bb6\u7ea7\u89c6\u89d2&#xff1a;\u4e8c\u5143\u8bba\u5e26\u6765\u7684\u601d\u7ef4\u91cd\u5851<\/p>\n<p>\u63a5\u53d7\u201c\u4e8c\u5143\u8bba\u201d\u5e76\u975e\u6613\u4e8b&#xff0c;\u5b83\u8981\u6c42\u6211\u4eec\u5efa\u7acb\u4e00\u79cd\u201c\u7269\u7406\u5b9a\u4f4d\u601d\u7ef4\u201d&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u4e0d\u8981\u5728\u9876\u5c42\u4f7f\u7528\u00a0&#039;use client&#039;&#xff1a;\u8fd9\u662f\u4e00\u4e2a\u5e38\u89c1\u7684\u9519\u8bef\u3002\u5982\u679c\u4f60\u5728\u6839\u5e03\u5c40&#xff08;Root Layout&#xff09;\u58f0\u660e\u4e86\u5ba2\u6237\u7aef\u7ec4\u4ef6&#xff0c;\u90a3\u4e48\u5b83\u7684\u6240\u6709\u5b50\u7ec4\u4ef6\u90fd\u5c06\u6ca6\u4e3a\u5ba2\u6237\u7aef\u7ec4\u4ef6\u3002\u4f60\u5e94\u8be5\u5c3d\u91cf\u5c06\u00a0&#039;use client&#039;\u00a0\u63a8\u5411\u7ec4\u4ef6\u6811\u7684\u53f6\u5b50\u8282\u70b9&#xff0c;\u4ee5\u4fdd\u7559\u5c3d\u53ef\u80fd\u591a\u7684 Server Component \u4f18\u52bf\u3002<\/p>\n<\/li>\n<li>\n<p>\u7ec4\u4ef6\u7684\u201c\u4ea4\u7ec7\u201d\u827a\u672f&#xff1a;\u670d\u52a1\u7aef\u7ec4\u4ef6\u53ef\u4ee5\u5305\u542b\u5ba2\u6237\u7aef\u7ec4\u4ef6&#xff0c;\u4f46\u5ba2\u6237\u7aef\u7ec4\u4ef6\u4e0d\u80fd\u76f4\u63a5\u5bfc\u5165\u670d\u52a1\u7aef\u7ec4\u4ef6&#xff08;\u9664\u975e\u4f5c\u4e3a\u00a0children\u00a0\u4f20\u5165&#xff09;\u3002\u8fd9\u79cd\u5355\u5411\u7684\u4f9d\u8d56\u5173\u7cfb&#xff0c;\u6b63\u662f\u4e3a\u4e86\u786e\u4fdd\u201c\u5e55\u540e\u201d\u903b\u8f91\u6c38\u8fdc\u4e0d\u4f1a\u6cc4\u9732\u5230\u201c\u53f0\u524d\u201d\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e03\u3001 \u603b\u7ed3&#xff1a;\u4ece\u5206\u88c2\u5230\u5927\u4e00\u7edf<\/p>\n<p>Next.js \u7684\u7ec4\u4ef6\u4e8c\u5143\u8bba&#xff0c;\u672c\u8d28\u4e0a\u662f\u5bf9 Web \u6027\u80fd\u6781\u9650\u7684\u6311\u6218\u3002\u5b83\u627f\u8ba4\u4e86\u670d\u52a1\u5668\u7b97\u529b\u4e0e\u6d4f\u89c8\u5668\u4ea4\u4e92\u7684\u5929\u7136\u5dee\u5f02&#xff0c;\u5e76\u7528\u4e00\u5957\u7edf\u4e00\u7684\u7ec4\u4ef6\u8bed\u6cd5&#xff08;JSX&#xff09;\u5c06\u4e8c\u8005\u7f1d\u5408\u3002<\/p>\n<ul>\n<li>\n<p>Server Components\u00a0\u8d1f\u8d23\u201c\u91cd\u201d\u7684\u4efb\u52a1&#xff1a;\u53d6\u6570\u3001\u8ba1\u7b97\u3001\u5b89\u5168\u3002<\/p>\n<\/li>\n<li>\n<p>Client Components\u00a0\u8d1f\u8d23\u201c\u8f7b\u201d\u7684\u4efb\u52a1&#xff1a;\u53cd\u9988\u3001\u4ea4\u4e92\u3001\u52a8\u6548\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u8fd9\u4e0d\u4ec5\u662f\u6280\u672f\u7684\u8fdb\u5316&#xff0c;\u66f4\u662f\u4e00\u79cd\u67b6\u6784\u54f2\u5b66&#xff1a;\u8ba9\u4e0a\u5e1d\u7684\u5f52\u4e0a\u5e1d&#xff0c;\u51ef\u6492\u7684\u5f52\u51ef\u6492\u3002\u00a0\u53ea\u6709\u6df1\u523b\u7406\u89e3\u4e86\u8fd9\u79cd\u4e8c\u5143\u5bf9\u7acb\u4e0e\u7edf\u4e00&#xff0c;\u4f60\u624d\u80fd\u771f\u6b63\u638c\u63e1 Next.js \u7684\u5fc3\u6cd5&#xff0c;\u6784\u5efa\u51fa\u65e2\u5feb\u5982\u95ea\u7535\u53c8\u7075\u52a8\u5982\u4e1d\u7684\u73b0\u4ee3\u5e94\u7528\u3002<\/p>\n<p>\u638c\u63e1\u4e86\u7ec4\u4ef6\u7684\u201c\u7269\u7406\u5c5e\u6027\u201d\u540e&#xff0c;\u6211\u4eec\u9762\u4e34\u7684\u4e0b\u4e00\u4e2a\u96be\u9898\u662f&#xff1a;\u8fd9\u4e9b\u5206\u5e03\u5728\u4e0d\u540c\u7a7a\u95f4\u7684\u7ec4\u4ef6\u662f\u5982\u4f55\u5728\u6d4f\u89c8\u5668\u4e2d\u201c\u590d\u6d3b\u201d\u7684&#xff1f;\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u63a2\u8ba8\u7684\u00a0\u201c\u6c34\u5408\u201d\u7684\u827a\u672f&#xff1a;\u7406\u89e3 Hydration \u7684\u539f\u7406\u53ca\u5176\u5e26\u6765\u7684\u6027\u80fd\u6311\u6218\u3002\u60a8\u60f3\u7ee7\u7eed\u6df1\u5165\u63a2\u7d22 Hydration \u80cc\u540e\u90a3\u4e9b\u60ca\u5fc3\u52a8\u9b44\u7684\u6027\u80fd\u7ec6\u8282\u5417&#xff1f;<\/p>\n<h3>3.2 \u201c\u6c34\u5408\u201d\u7684\u827a\u672f\u2014\u2014\u7406\u89e3 Hydration \u7684\u539f\u7406\u53ca\u5176\u5e26\u6765\u7684\u6027\u80fd\u6311\u6218<\/h3>\n<p>\u5982\u679c\u5728 Next.js \u7684\u4e16\u754c\u91cc&#xff0c;\u670d\u52a1\u7aef\u7ec4\u4ef6&#xff08;Server Components&#xff09;\u7684\u6e32\u67d3\u662f\u4e00\u573a\u201c\u9884\u5236\u201d&#xff0c;\u90a3\u4e48\u201c\u6c34\u5408&#xff08;Hydration&#xff09;\u201d\u5c31\u662f\u8d4b\u4e88\u8fd9\u4e9b\u9884\u5236\u4ef6\u7075\u9b42\u7684\u201c\u70b9\u5316\u4eea\u5f0f\u201d\u3002<\/p>\n<p>\u5728 Web \u5f00\u53d1\u7684\u8bcd\u5178\u4e2d&#xff0c;\u201c\u6c34\u5408\u201d\u662f\u4e00\u4e2a\u5e26\u6709\u751f\u7269\u5b66\u7f8e\u611f\u7684\u8bcd\u6c47\u3002\u5b83\u63cf\u8ff0\u4e86\u8fd9\u6837\u4e00\u79cd\u72b6\u6001&#xff1a;\u4ece\u670d\u52a1\u5668\u4f20\u8f93\u8fc7\u6765\u7684 HTML \u5c31\u50cf\u4e00\u5177\u201c\u5e72\u67af\u7684\u6807\u672c\u201d\u2014\u2014\u5b83\u6709\u5b8c\u6574\u7684\u8f6e\u5ed3\u548c\u8272\u5f69&#xff0c;\u5374\u65e0\u6cd5\u5bf9\u5916\u754c\u7684\u89e6\u78b0\u505a\u51fa\u56de\u5e94\u3002\u800c\u6c34\u5408\u7684\u8fc7\u7a0b&#xff0c;\u5c31\u662f\u5c06 JavaScript \u8fd9\u80a1\u201c\u751f\u547d\u4e4b\u6c34\u201d\u6ce8\u5165\u5176\u4e2d&#xff0c;\u8ba9\u539f\u672c\u6b7b\u677f\u7684 DOM \u8282\u70b9\u91cd\u65b0\u83b7\u5f97\u76d1\u542c\u4e8b\u4ef6\u3001\u7ba1\u7406\u72b6\u6001\u548c\u52a8\u6001\u4ea4\u4e92\u7684\u80fd\u529b\u3002<\/p>\n<p>\u4f5c\u4e3a\u4e00\u4e2a\u9876\u7ea7\u7684\u8ba1\u7b97\u673a\u4e13\u5bb6&#xff0c;\u6211\u4eec\u5fc5\u987b\u900f\u89c6\u8fd9\u4e00\u201c\u590d\u6d3b\u201d\u8fc7\u7a0b\u7684\u5fae\u89c2\u808c\u7406&#xff0c;\u56e0\u4e3a Web \u5e94\u7528\u6700\u9690\u79d8\u7684\u6027\u80fd\u6740\u624b&#xff0c;\u5f80\u5f80\u5c31\u6f5c\u4f0f\u5728\u6c34\u5408\u7684\u6bcf\u4e00\u4e2a\u6bd4\u7279\u4e4b\u4e2d\u3002<\/p>\n<p>\u4e00\u3001 \u6c34\u5408\u7684\u5b8f\u89c2\u56fe\u666f&#xff1a;\u4ece\u201c\u9759\u6001\u6295\u5f71\u201d\u5230\u201c\u52a8\u6001\u5b9e\u4f53\u201d<\/p>\n<p>\u4e3a\u4e86\u7406\u89e3\u6c34\u5408&#xff0c;\u6211\u4eec\u53ef\u4ee5\u89c2\u5bdf\u7528\u6237\u8bbf\u95ee Next.js \u9875\u9762\u65f6\u7684\u751f\u547d\u5468\u671f&#xff1a;<\/p>\n<li>\n<p>\u6e32\u67d3\u9636\u6bb5&#xff08;Server Side&#xff09;&#xff1a;\u670d\u52a1\u5668\u6267\u884c\u7ec4\u4ef6\u4ee3\u7801&#xff0c;\u751f\u6210\u7eaf HTML \u5b57\u7b26\u4e32\u3002<\/p>\n<\/li>\n<li>\n<p>\u4f20\u8f93\u9636\u6bb5&#xff08;Networking&#xff09;&#xff1a;\u6d4f\u89c8\u5668\u63a5\u6536\u5230\u8fd9\u4efd HTML \u5e76\u7acb\u5373\u7ed8\u5236\u3002\u6b64\u65f6&#xff0c;\u7528\u6237\u80fd\u770b\u5230\u9875\u9762\u5185\u5bb9&#xff0c;\u751a\u81f3\u80fd\u770b\u5230\u4e00\u4e2a\u201c\u641c\u7d22\u6846\u201d\u3002<\/p>\n<\/li>\n<li>\n<p>\u9759\u9ed8\u671f&#xff08;The Uncanny Valley&#xff09;&#xff1a;\u867d\u7136\u7528\u6237\u770b\u5230\u4e86\u641c\u7d22\u6846&#xff0c;\u4f46\u5982\u679c\u6b64\u65f6\u70b9\u51fb&#xff0c;\u5374\u6ca1\u6709\u4efb\u4f55\u53cd\u5e94\u3002\u56e0\u4e3a\u8d1f\u8d23\u5904\u7406\u70b9\u51fb\u4e8b\u4ef6\u7684 JavaScript \u8fd8\u5728\u7f51\u7edc\u7ba1\u9053\u4e2d\u4f20\u8f93&#xff0c;\u6216\u8005\u6b63\u5728\u88ab CPU \u89e3\u6790\u3002<\/p>\n<\/li>\n<li>\n<p>\u6c34\u5408\u9636\u6bb5&#xff08;Client Side&#xff09;&#xff1a;JavaScript \u7ec8\u4e8e\u5c31\u7eea\u3002React \u4f1a\u5728\u5185\u5b58\u4e2d\u6784\u5efa\u865a\u62df DOM&#xff08;Virtual DOM&#xff09;&#xff0c;\u5e76\u5c06\u5176\u4e0e\u6d4f\u89c8\u5668\u73b0\u6709\u7684\u771f\u5b9e DOM \u8fdb\u884c\u201c\u6bd4\u5bf9&#xff08;Reconciliation&#xff09;\u201d\u3002<\/p>\n<\/li>\n<li>\n<p>\u6fc0\u6d3b&#xff08;Interactivity&#xff09;&#xff1a;React \u5c06\u4e8b\u4ef6\u76d1\u542c\u5668\u6302\u8f7d\u5230 HTML \u8282\u70b9\u4e0a\u3002\u81f3\u6b64&#xff0c;\u9875\u9762\u201c\u6d3b\u201d\u4e86\u8fc7\u6765\u3002<\/p>\n<\/li>\n<p>\u4e8c\u3001 \u6280\u672f\u672c\u8d28&#xff1a;\u4e00\u573a\u5173\u4e8e\u201c\u5bf9\u9f50\u201d\u7684\u535a\u5f08<\/p>\n<p>\u6c34\u5408\u5e76\u975e\u7b80\u5355\u7684\u201c\u5f00\u542f\u5f00\u5173\u201d&#xff0c;\u5b83\u5728\u5e95\u5c42\u662f\u4e00\u6b21\u6781\u5ea6\u6d88\u8017\u8d44\u6e90\u7684\u201c\u91cd\u6784\u201d\u3002<\/p>\n<p>React \u5728\u5ba2\u6237\u7aef\u8fdb\u884c\u6c34\u5408\u65f6&#xff0c;\u5fc5\u987b\u786e\u4fdd\u670d\u52a1\u5668\u751f\u6210\u7684 HTML \u4e0e\u5ba2\u6237\u7aef\u8ba1\u7b97\u51fa\u7684\u521d\u59cb UI \u5b8c\u5168\u4e00\u81f4\u3002\u5982\u679c\u670d\u52a1\u5668\u8bf4\u201c\u8fd9\u91cc\u6709\u4e2a\u7ea2\u8272\u6309\u94ae\u201d&#xff0c;\u800c\u5ba2\u6237\u7aef\u6267\u884c\u4ee3\u7801\u540e\u8ba4\u4e3a\u201c\u8fd9\u91cc\u5e94\u8be5\u662f\u84dd\u8272\u6309\u94ae\u201d&#xff0c;\u5c31\u4f1a\u53d1\u751f\u201c\u6c34\u5408\u4e0d\u4e00\u81f4&#xff08;Hydration Mismatch&#xff09;\u201d\u9519\u8bef\u3002<\/p>\n<p>\u8fd9\u79cd\u535a\u5f08\u5e26\u6765\u4e86\u4e24\u4e2a\u76f4\u63a5\u7684\u6027\u80fd\u6210\u672c&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u91cd\u590d\u8ba1\u7b97&#xff1a;\u670d\u52a1\u5668\u5df2\u7ecf\u7b97\u8fc7\u4e00\u904d UI \u7ed3\u6784&#xff0c;\u5ba2\u6237\u7aef\u4e3a\u4e86\u6c34\u5408&#xff0c;\u5fc5\u987b\u5728\u5185\u5b58\u4e2d\u518d\u7b97\u4e00\u904d\u3002<\/p>\n<\/li>\n<li>\n<p>\u53cc\u500d\u5e26\u5bbd&#xff1a;\u4e3a\u4e86\u8ba9\u5ba2\u6237\u7aef\u80fd\u987a\u5229\u6c34\u5408&#xff0c;\u670d\u52a1\u5668\u4e0d\u4ec5\u8981\u53d1\u9001\u751f\u6210\u7684 HTML&#xff0c;\u8fd8\u8981\u53d1\u9001\u7528\u4e8e\u751f\u6210\u8fd9\u4efd HTML \u7684\u539f\u59cb\u6570\u636e&#xff08;JSON&#xff09;\u4ee5\u53ca\u903b\u8f91\u4ee3\u7801&#xff08;JavaScript Bundle&#xff09;\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e09\u3001 \u6027\u80fd\u6311\u6218&#xff1a;\u4e0d\u53ef\u903e\u8d8a\u7684\u201c\u6050\u6016\u8c37\u201d<\/p>\n<p>\u5728\u6c34\u5408\u7684\u8fc7\u7a0b\u4e2d&#xff0c;\u5b58\u5728\u4e00\u4e2a\u81ed\u540d\u662d\u8457\u7684\u6027\u80fd\u6307\u6807&#xff1a;TTI&#xff08;Time to Interactive&#xff0c;\u53ef\u4ea4\u4e92\u65f6\u95f4&#xff09;\u3002<\/p>\n<p>1. TBT&#xff08;Total Blocking Time&#xff09;\u7684\u4ee3\u4ef7<\/p>\n<p>\u5f53\u6d4f\u89c8\u5668\u7684\u4e3b\u7ebf\u7a0b\u6b63\u5fd9\u4e8e\u89e3\u6790\u5e9e\u5927\u7684 JS \u5305\u5e76\u6267\u884c\u6c34\u5408\u903b\u8f91\u65f6&#xff0c;\u5b83\u65e0\u6cd5\u54cd\u5e94\u4efb\u4f55\u7528\u6237\u8f93\u5165\u3002\u5982\u679c\u4e00\u4e2a\u9875\u9762\u7684 JS \u4f53\u79ef\u8fc7\u5927&#xff0c;\u6c34\u5408\u8fc7\u7a0b\u53ef\u80fd\u957f\u8fbe\u6570\u79d2\u3002\u5728\u8fd9\u6bb5\u65f6\u95f4\u91cc&#xff0c;\u7528\u6237\u9762\u5bf9\u7684\u662f\u4e00\u4e2a\u201c\u770b\u5f97\u89c1\u5374\u6478\u4e0d\u7740\u201d\u7684\u5047\u8c61\u3002<\/p>\n<ul>\n<li>\n<p>\u4e13\u5bb6\u89c6\u70b9&#xff1a;\u8fd9\u79cd\u4f53\u9a8c\u4e0a\u7684\u632b\u8d25\u611f\u88ab\u79f0\u4e3a\u00a0\u201cWeb \u6050\u6016\u8c37\u6548\u5e94\u201d\u3002\u7528\u6237\u8ba4\u4e3a\u5e94\u7528\u5df2\u7ecf\u52a0\u8f7d\u5b8c\u6bd5&#xff0c;\u70b9\u51fb\u5374\u6beb\u65e0\u53cd\u9988&#xff0c;\u8fd9\u79cd\u6b3a\u9a97\u611f\u5f80\u5f80\u6bd4\u7eaf\u7cb9\u7684\u767d\u5c4f\u66f4\u4ee4\u4eba\u6cae\u4e27\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u201c\u7a0e\u6536\u201d\u6548\u5e94&#xff1a;JS \u675f\u4f53\u79ef\u7684\u66b4\u653f<\/p>\n<p>\u5728\u4f20\u7edf SSR \u6a21\u578b\u4e2d&#xff0c;\u5373\u4f7f\u9875\u9762 90% \u7684\u5185\u5bb9\u662f\u9759\u6001\u7684&#xff0c;\u53ea\u8981\u6709 10% \u662f\u52a8\u6001\u7684&#xff0c;\u4f60\u4e5f\u5fc5\u987b\u4e3a\u8fd9 10% \u7684\u4ea4\u4e92\u4e0b\u8f7d\u6574\u4e2a\u9875\u9762\u7684 React \u7ec4\u4ef6\u4ee3\u7801\u3002\u8fd9\u79cd\u201c\u5168\u91cf\u4e70\u5355\u201d\u7684\u6a21\u5f0f&#xff0c;\u8ba9\u79fb\u52a8\u7aef\u7528\u6237\u5728\u6602\u8d35\u7684\u6d41\u91cf\u548c\u53d7\u9650\u7684 CPU \u7b97\u529b\u4e0b\u82e6\u4e0d\u582a\u8a00\u3002<\/p>\n<p>\u56db\u3001 Next.js \u7684\u827a\u672f&#xff1a;\u5206\u800c\u6cbb\u4e4b\u4e0e\u6e10\u8fdb\u6c34\u5408<\/p>\n<p>\u4e3a\u4e86\u5bf9\u6297\u6c34\u5408\u5e26\u6765\u7684\u6027\u80fd\u635f\u8017&#xff0c;Next.js \u4e0e React \u6838\u5fc3\u56e2\u961f\u5171\u540c\u6f14\u8fdb\u51fa\u4e86\u4e09\u5c42\u9632\u5fa1\u4f53\u7cfb&#xff1a;<\/p>\n<p>1. \u6d88\u9664\u4e0d\u5fc5\u8981\u7684\u6c34\u5408&#xff08;RSC \u7684\u7ec8\u6781\u6551\u8d4e&#xff09;<\/p>\n<p>\u6b63\u5982\u6211\u4eec\u5728\u524d\u9762\u6240\u8ba8\u8bba\u7684&#xff0c;\u670d\u52a1\u7aef\u7ec4\u4ef6&#xff08;Server Components&#xff09;\u4e0d\u53c2\u4e0e\u6c34\u5408\u3002\u5b83\u4eec\u751f\u6210\u7684 HTML \u662f\u6c38\u4e45\u6027\u7684\u3001\u9759\u6b62\u7684\u3002\u8fd9\u610f\u5473\u7740\u8fd9\u90e8\u5206 UI \u7684 JS \u903b\u8f91\u6c38\u8fdc\u4e0d\u4f1a\u53d1\u5f80\u5ba2\u6237\u7aef\u3002<\/p>\n<p>\u6700\u5feb\u7684\u6c34\u5408&#xff0c;\u5c31\u662f\u4e0d\u9700\u8981\u6c34\u5408\u3002<\/p>\n<p>2. \u6d41\u5f0f\u4f20\u8f93\u4e0e Suspense&#xff08;\u89e3\u6784\u7011\u5e03\u6d41&#xff09;<\/p>\n<p>Next.js \u652f\u6301\u00a0Streaming&#xff08;\u6d41\u5f0f\u4f20\u8f93&#xff09;\u3002\u670d\u52a1\u5668\u4e0d\u518d\u7b49\u5f85\u6574\u4e2a\u9875\u9762\u6e32\u67d3\u5b8c\u624d\u53d1\u8d27&#xff0c;\u800c\u662f\u5148\u53d1\u9001\u5df2\u5c31\u7eea\u7684\u90e8\u5206\u3002\u914d\u5408\u00a0Suspense&#xff0c;\u9875\u9762\u53ef\u4ee5\u5b9e\u73b0\u5c40\u90e8\u6c34\u5408\u3002<\/p>\n<ul>\n<li>\n<p>\u573a\u666f\u63cf\u8ff0&#xff1a;\u5bfc\u822a\u680f\u5148\u6c34\u5408\u5b8c\u6bd5\u53ef\u70b9\u51fb&#xff0c;\u800c\u4e2d\u95f4\u7b28\u91cd\u7684\u5546\u54c1\u5217\u8868\u8fd8\u5728\u6d41\u5f0f\u52a0\u8f7d\u4e2d\u3002\u8fd9\u6253\u7834\u4e86 TTI \u7684\u74f6\u9888&#xff0c;\u8ba9\u7528\u6237\u611f\u5230\u5e94\u7528\u5728\u201c\u5206\u6279\u89c9\u9192\u201d\u3002<\/p>\n<\/li>\n<\/ul>\n<p>3. \u9009\u62e9\u6027\u6c34\u5408&#xff08;Selective Hydration&#xff09;<\/p>\n<p>React 18 \u5f15\u5165\u4e86\u4e00\u4e2a\u6781\u5176\u667a\u80fd\u7684\u673a\u5236&#xff1a;\u5982\u679c\u7528\u6237\u5728\u6c34\u5408\u5c1a\u672a\u5b8c\u6210\u65f6\u70b9\u51fb\u4e86\u67d0\u4e2a\u6309\u94ae&#xff0c;React \u4f1a\u4f18\u5148\u6c34\u5408\u8be5\u6309\u94ae\u6240\u5728\u7684\u533a\u57df\u3002\u8fd9\u79cd\u57fa\u4e8e\u7528\u6237\u610f\u56fe\u7684\u8c03\u5ea6&#xff0c;\u5c06\u6709\u9650\u7684 CPU \u7b97\u529b\u7528\u5728\u4e86\u5200\u5203\u4e0a\u3002<\/p>\n<p>\u4e94\u3001 \u5f00\u53d1\u8005\u5fc3\u6cd5&#xff1a;\u5982\u4f55\u4f18\u5316\u6c34\u5408&#xff1f;<\/p>\n<p>\u4f5c\u4e3a\u4e00\u4e2a\u9876\u7ea7\u7684\u5f00\u53d1\u8005&#xff0c;\u4f60\u5e94\u5f53\u50cf\u4fdd\u62a4\u773c\u7403\u4e00\u6837\u4fdd\u62a4\u4f60\u7684\u6c34\u5408\u6027\u80fd&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u8b66\u60d5\u975e\u5bf9\u79f0\u6570\u636e&#xff1a;\u907f\u514d\u5728\u6e32\u67d3\u4e2d\u4f7f\u7528\u00a0Math.random()\u00a0\u6216\u00a0new Date()\u3002\u8fd9\u4e9b\u4f1a\u5bfc\u81f4\u670d\u52a1\u7aef\u4e0e\u5ba2\u6237\u7aef\u8ba1\u7b97\u7ed3\u679c\u4e0d\u4e00\u81f4&#xff0c;\u89e6\u53d1\u6602\u8d35\u7684\u91cd\u65b0\u6e32\u67d3\u751a\u81f3\u62a5\u9519\u3002<\/p>\n<\/li>\n<li>\n<p>\u5ef6\u8fdf\u52a0\u8f7d\u975e\u6838\u5fc3\u4ea4\u4e92&#xff1a;\u5bf9\u4e8e\u90a3\u4e9b\u4f4d\u4e8e\u9996\u5c4f\u4e4b\u4e0b&#xff08;Below the fold&#xff09;\u7684\u4ea4\u4e92\u7ec4\u4ef6&#xff08;\u5982\u8bc4\u8bba\u533a\u3001\u4fa7\u8fb9\u680f&#xff09;&#xff0c;\u5229\u7528\u00a0dynamic()\u00a0\u8fdb\u884c\u61d2\u52a0\u8f7d&#xff0c;\u5c06\u5b83\u4eec\u7684\u6c34\u5408\u65f6\u673a\u63a8\u540e\u3002<\/p>\n<\/li>\n<li>\n<p>\u4fdd\u6301\u7ec4\u4ef6\u9897\u7c92\u5ea6&#xff1a;\u5c3d\u91cf\u5c06\u00a0&#039;use client&#039;\u00a0\u58f0\u660e\u5728\u6700\u5c0f\u7684\u4ea4\u4e92\u5355\u5143\u4e0a\u3002\u5982\u679c\u4e00\u4e2a\u5de8\u5927\u7684\u7236\u7ec4\u4ef6\u6807\u8bb0\u4e3a\u5ba2\u6237\u7aef\u7ec4\u4ef6&#xff0c;\u5176\u6240\u6709\u5b50\u7ec4\u4ef6\u90fd\u4f1a\u88ab\u5f3a\u5236\u5e26\u5165\u6c34\u5408\u8fc7\u7a0b&#xff0c;\u9020\u6210\u4e0d\u5fc5\u8981\u7684\u6027\u80fd\u6d6a\u8d39\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u516d\u3001 \u603b\u7ed3&#xff1a;\u4ece\u201c\u6c34\u5408\u201d\u5230\u201c\u547c\u5438\u201d<\/p>\n<p>\u6c34\u5408\u662f\u73b0\u4ee3 Web \u5f00\u53d1\u4e2d\u4e0d\u53ef\u907f\u514d\u7684\u4ee3\u4ef7&#xff0c;\u4f46\u5b83\u4e5f\u662f\u5c06 Web \u63d0\u5347\u81f3\u539f\u751f\u5e94\u7528\u4f53\u9a8c\u7684\u5173\u952e\u9636\u68af\u3002<\/p>\n<p>\u4f18\u79c0\u7684 Next.js \u67b6\u6784&#xff0c;\u672c\u8d28\u4e0a\u662f\u5728\u201c\u53ef\u89c1\u6027\u201d\u4e0e\u201c\u53ef\u4ea4\u4e92\u6027\u201d\u4e4b\u95f4\u5bfb\u627e\u5e73\u8861\u3002\u6211\u4eec\u5229\u7528\u670d\u52a1\u7aef\u7ec4\u4ef6\u6765\u4fdd\u8bc1\u201c\u89c1\u5b57\u5982\u9762\u201d\u7684\u6781\u901f\u54cd\u5e94&#xff0c;\u5229\u7528\u7cbe\u51c6\u7684\u5ba2\u6237\u7aef\u7ec4\u4ef6\u548c\u6c34\u5408\u7b56\u7565\u6765\u5b9e\u73b0\u201c\u6307\u54ea\u6253\u54ea\u201d\u7684\u4e1d\u6ed1\u4ea4\u4e92\u3002<\/p>\n<p>\u6c34\u5408\u4e0d\u662f\u4e00\u4e2a\u5f00\u5173&#xff0c;\u800c\u662f\u4e00\u573a\u827a\u672f\u3002\u00a0\u5b83\u8981\u6c42\u6211\u4eec\u4e0d\u4ec5\u8981\u61c2\u4ee3\u7801&#xff0c;\u66f4\u8981\u61c2\u7f51\u7edc\u3001\u61c2\u6d4f\u89c8\u5668\u7ebf\u7a0b\u7684\u5f8b\u52a8\u3001\u61c2\u7528\u6237\u5fc3\u7406\u7684\u9884\u671f\u3002\u5f53\u4f60\u5b66\u4f1a\u4e86\u5982\u4f55\u9a7e\u9a6d\u8fd9\u80a1\u201c\u751f\u547d\u4e4b\u6c34\u201d&#xff0c;\u4f60\u7b14\u4e0b\u7684\u5e94\u7528\u5c31\u4e0d\u518d\u662f\u51b0\u51b7\u7684\u4ee3\u7801\u96c6\u5408&#xff0c;\u800c\u662f\u4e00\u4e2a\u6709\u7740\u547c\u5438\u611f\u548c\u8282\u594f\u611f\u7684\u667a\u80fd\u751f\u547d\u4f53\u3002<\/p>\n<p>\u7406\u89e3\u4e86\u6c34\u5408\u7684\u6c89\u91cd\u4e0e\u4f18\u96c5\u540e&#xff0c;\u6211\u4eec\u81ea\u7136\u4f1a\u4ea7\u751f\u4e00\u4e2a\u8feb\u5207\u7684\u7591\u95ee&#xff1a;\u5728\u5b9e\u6218\u4e2d&#xff0c;\u6211\u4eec\u8be5\u5982\u4f55\u5212\u5b9a\u90a3\u9053\u7ea2\u7ebf&#xff1f;\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u653b\u514b\u7684\u96be\u9898&#xff1a;\u201c\u8fb9\u754c\u611f\u201d&#xff1a;\u4f55\u65f6\u8be5\u7528 &#039;use client&#039;&#xff1f;\u2014\u2014\u7ec4\u4ef6\u804c\u8d23\u7684\u5212\u5206\u79d1\u5b66\u3002\u60a8\u60f3\u7ee7\u7eed\u63a2\u7d22\u5982\u4f55\u4ee5\u201c\u624b\u672f\u5200\u5f0f\u201d\u7684\u7cbe\u51c6\u5ea6&#xff0c;\u5207\u5206 Server \u4e0e Client \u7684\u8fb9\u754c\u5417&#xff1f;<\/p>\n<h3>3.3 \u201c\u8fb9\u754c\u611f\u201d\u2014\u2014\u4f55\u65f6\u8be5\u7528 &#039;use client&#039;&#xff1f;\u7ec4\u4ef6\u804c\u8d23\u7684\u5212\u5206\u79d1\u5b66<\/h3>\n<p>\u5728\u638c\u63e1\u4e86\u670d\u52a1\u7aef\u7ec4\u4ef6&#xff08;RSC&#xff09;\u7684\u201c\u4e8c\u5143\u8bba\u201d\u4e0e\u201c\u6c34\u5408\u201d\u7684\u4ee3\u4ef7\u540e&#xff0c;\u5f00\u53d1\u8005\u5f80\u5f80\u4f1a\u9677\u5165\u4e00\u79cd\u67b6\u6784\u5c42\u9762\u7684\u7126\u8651&#xff1a;\u9762\u5bf9\u4e00\u4e2a\u5177\u4f53\u7684\u4e1a\u52a1\u9700\u6c42&#xff0c;\u6211\u8be5\u5728\u4f55\u5904\u5212\u4e0b\u90a3\u4e00\u5200&#xff1f;<\/p>\n<p>\u8fd9\u4fbf\u662f Next.js \u5f00\u53d1\u4e2d\u6700\u6838\u5fc3\u7684\u827a\u672f\u2014\u2014\u8fb9\u754c\u611f\u3002<\/p>\n<p>&#039;use client&#039;\u00a0\u5e76\u4e0d\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u58f0\u660e&#xff0c;\u5b83\u662f\u4e00\u9053\u7269\u7406\u5c4f\u969c\u3002\u5b83\u6807\u5fd7\u7740\u4ee3\u7801\u6267\u884c\u73af\u5883\u4ece\u53d7\u63a7\u3001\u5b89\u5168\u3001\u9ad8\u6027\u80fd\u7684\u201c\u4e91\u7aef\u670d\u52a1\u5668\u201d\u8de8\u8d8a\u5230\u4e86\u4e0d\u53ef\u63a7\u3001\u788e\u7247\u5316\u3001\u5374\u6781\u5ea6\u7075\u654f\u7684\u201c\u7528\u6237\u7ec8\u7aef\u201d\u3002\u5982\u679c\u628a\u8fb9\u754c\u5212\u5f97\u592a\u9760\u4e0a&#xff0c;\u4f60\u4f1a\u4e22\u6389 RSC \u7684\u6240\u6709\u6027\u80fd\u7ea2\u5229&#xff1b;\u5982\u679c\u5212\u5f97\u592a\u9760\u4e0b&#xff0c;\u4ee3\u7801\u7684\u903b\u8f91\u8026\u5408\u53c8\u4f1a\u8ba9\u4f60\u75db\u82e6\u4e0d\u582a\u3002<\/p>\n<p>\u672c\u8282\u6211\u4eec\u5c06\u4ee5\u201c\u624b\u672f\u5200\u5f0f\u201d\u7684\u7cbe\u51c6&#xff0c;\u62c6\u89e3\u7ec4\u4ef6\u804c\u8d23\u5212\u5206\u7684\u79d1\u5b66&#xff0c;\u6559\u4f60\u5982\u4f55\u5728\u6df7\u6c8c\u7684\u9700\u6c42\u4e2d&#xff0c;\u5bfb\u627e\u5230\u90a3\u6761\u6700\u4f18\u7684\u67b6\u6784\u5206\u754c\u7ebf\u3002<\/p>\n<p>\u4e00\u3001 \u9ec4\u91d1\u6cd5\u5219&#xff1a;\u5c06\u5ba2\u6237\u7aef\u7ec4\u4ef6\u201c\u53f6\u5b50\u5316\u201d<\/p>\n<p>\u5728 Next.js \u7684\u7ec4\u4ef6\u6811\u4e2d&#xff0c;\u6743\u529b\u7684\u6d41\u52a8\u662f\u5355\u5411\u7684\u3002\u670d\u52a1\u7aef\u7ec4\u4ef6\u53ef\u4ee5\u5305\u542b\u5ba2\u6237\u7aef\u7ec4\u4ef6&#xff0c;\u4f46\u5ba2\u6237\u7aef\u7ec4\u4ef6&#xff08;Client Components&#xff09;\u4f1a\u5c06\u5b83\u65d7\u4e0b\u7684\u6240\u6709\u5b50\u7ec4\u4ef6&#xff0c;\u5728\u903b\u8f91\u4e0a\u90fd\u201c\u62c9\u5165\u201d\u5ba2\u6237\u7aef\u7684\u8303\u7574\u3002<\/p>\n<p>\u4e13\u5bb6\u7b56\u7565&#xff1a;\u5c3d\u91cf\u5c06\u00a0&#039;use client&#039;\u00a0\u63a8\u5411\u7ec4\u4ef6\u6811\u7684\u672b\u68a2&#xff08;\u53f6\u5b50\u8282\u70b9&#xff09;\u3002<\/p>\n<p>\u60f3\u8c61\u4e00\u4e2a\u590d\u6742\u7684\u5546\u54c1\u8be6\u60c5\u9875&#xff1a;\u5b83\u6709\u5de8\u5927\u7684 Banner\u3001\u8be6\u7ec6\u7684\u89c4\u683c\u53c2\u6570\u3001\u76f8\u5173\u7684\u63a8\u8350\u5217\u8868&#xff0c;\u4ee5\u53ca\u4e00\u4e2a\u6781\u5c0f\u7684\u201c\u70b9\u8d5e\u201d\u6309\u94ae\u3002<\/p>\n<p>\u9519\u8bef\u505a\u6cd5&#xff1a;\u4e3a\u4e86\u5904\u7406\u70b9\u8d5e\u903b\u8f91&#xff0c;\u5728\u6574\u4e2a\u9875\u9762\u7684\u9876\u90e8\u52a0\u4e0a\u00a0&#039;use client&#039;\u3002<\/p>\n<ul>\n<li>\n<p>\u4ee3\u4ef7&#xff1a;\u6574\u4e2a\u9875\u9762\u7684\u9759\u6001\u6587\u5b57\u3001\u56fe\u7247\u5904\u7406\u903b\u8f91\u5168\u90e8\u88ab\u6253\u5305\u53d1\u5f80\u524d\u7aef&#xff0c;\u589e\u52a0\u4e86\u6570\u767e KB \u7684 JS \u8d1f\u8377&#xff0c;\u6c34\u5408\u538b\u529b\u5267\u589e\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u6b63\u786e\u505a\u6cd5&#xff1a;\u4fdd\u6301\u9875\u9762\u4e3a\u670d\u52a1\u7aef\u7ec4\u4ef6&#xff0c;\u4ec5\u5c06\u90a3\u4e2a\u201c\u70b9\u8d5e\u6309\u94ae\u201d\u62bd\u79bb\u51fa\u6765&#xff0c;\u5355\u72ec\u6807\u8bb0\u4e3a\u00a0&#039;use client&#039;\u3002<\/p>\n<ul>\n<li>\n<p>\u6536\u76ca&#xff1a;\u9875\u9762 99% \u7684\u5185\u5bb9\u4ee5\u7eaf HTML \u5f62\u5f0f\u77ac\u95f4\u5448\u73b0&#xff0c;\u53ea\u6709\u90a3\u4e2a\u5fae\u5c0f\u7684\u6309\u94ae\u5728\u540e\u53f0\u9759\u9ed8\u5b8c\u6210\u6c34\u5408\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e8c\u3001 \u804c\u8d23\u7684\u5224\u5b9a&#xff1a;\u4e09\u9053\u7075\u9b42\u62f7\u95ee<\/p>\n<p>\u5f53\u4f60\u72b9\u8c6b\u662f\u5426\u8981\u52a0\u4e0a\u00a0&#039;use client&#039;\u00a0\u65f6&#xff0c;\u8bf7\u901a\u8fc7\u8fd9\u4e09\u9053\u5173\u5361\u7684\u5ba1\u67e5&#xff1a;<\/p>\n<p>1. \u662f\u5426\u5b58\u5728\u201c\u4ea4\u4e92\u5f0f\u72b6\u6001\u201d&#xff1f;<\/p>\n<p>\u5982\u679c\u4f60\u7684\u7ec4\u4ef6\u9700\u8981\u00a0useState&#xff08;\u8bb0\u4f4f\u6570\u636e\u72b6\u6001&#xff09;\u3001useReducer\u00a0\u6216\u00a0useOptimistic&#xff08;\u4e50\u89c2\u66f4\u65b0&#xff09;&#xff0c;\u90a3\u4e48\u522b\u65e0\u9009\u62e9&#xff0c;\u8fd9\u5fc5\u987b\u662f\u4e00\u4e2a\u5ba2\u6237\u7aef\u7ec4\u4ef6\u3002\u72b6\u6001\u662f\u52a8\u6001\u4ea4\u4e92\u7684\u57fa\u77f3&#xff0c;\u800c\u72b6\u6001\u7684\u6816\u606f\u5730\u53ea\u80fd\u662f\u6d4f\u89c8\u5668\u3002<\/p>\n<p>2. \u662f\u5426\u9700\u8981\u8c03\u7528\u201c\u6d4f\u89c8\u5668\u7279\u6709 API\u201d&#xff1f;<\/p>\n<p>\u5f53\u4f60\u7684\u4ee3\u7801\u4e2d\u51fa\u73b0\u4e86\u00a0window\u3001document\u3001localStorage\u00a0\u6216\u00a0navigator.geolocation\u00a0\u65f6&#xff0c;\u4f60\u6b63\u5728\u89e6\u78b0\u670d\u52a1\u5668\u5e76\u4e0d\u5b58\u5728\u7684\u201c\u8089\u4f53\u201d\u3002<\/p>\n<p>\u670d\u52a1\u5668\u53ea\u6709\u903b\u8f91&#xff08;Mind&#xff09;&#xff0c;\u6ca1\u6709\u611f\u5b98&#xff08;Senses&#xff09;\u3002\u4efb\u4f55\u9700\u8981\u611f\u77e5\u9f20\u6807\u8f68\u8ff9\u3001\u5c4f\u5e55\u9ad8\u5ea6\u6216\u672c\u5730\u5b58\u50a8\u7684\u64cd\u4f5c&#xff0c;\u90fd\u5fc5\u987b\u5f52\u4e8e\u5ba2\u6237\u7aef\u3002<\/p>\n<p>3. \u662f\u5426\u4f7f\u7528\u4e86\u201c\u7279\u5b9a\u7684\u751f\u547d\u5468\u671f\u94a9\u5b50\u201d&#xff1f;<\/p>\n<p>\u9664\u4e86\u00a0useContext&#xff08;\u5728\u7279\u5b9a\u6761\u4ef6\u4e0b&#xff09;\u5916&#xff0c;\u7edd\u5927\u591a\u6570 Hooks&#xff08;\u5982\u00a0useEffect\u3001useLayoutEffect&#xff09;\u90fd\u4f9d\u8d56\u4e8e\u6d4f\u89c8\u5668\u7684\u6e32\u67d3\u8282\u594f\u3002\u5982\u679c\u4f60\u7684\u7ec4\u4ef6\u9700\u8981\u5728\u6302\u8f7d\u540e&#xff08;Mount&#xff09;\u6267\u884c\u67d0\u4e9b\u526f\u4f5c\u7528&#xff0c;\u5b83\u5fc5\u987b\u6807\u8bb0\u4e3a\u5ba2\u6237\u7aef\u3002<\/p>\n<p>\u4e09\u3001 \u907f\u5751\u6307\u5357&#xff1a;\u90a3\u4e9b\u4e0d\u9700\u8981\u00a0&#039;use client&#039;\u00a0\u7684\u9677\u9631<\/p>\n<p>\u5f88\u591a\u5f00\u53d1\u8005\u4f1a\u56e0\u4e3a\u4e00\u4e9b\u9519\u89c9\u800c\u6ee5\u7528\u5ba2\u6237\u7aef\u7ec4\u4ef6\u3002\u4f5c\u4e3a\u4e13\u5bb6&#xff0c;\u6211\u4eec\u9700\u8981\u7ea0\u6b63\u8fd9\u4e9b\u5e38\u89c1\u7684\u8bef\u533a&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u83b7\u53d6\u6570\u636e\u4e0d\u9700\u8981\u00a0use client&#xff1a; \u76f8\u53cd&#xff0c;\u6570\u636e\u83b7\u53d6&#xff08;Fetching&#xff09;\u662f\u670d\u52a1\u7aef\u7ec4\u4ef6\u7684\u4e3b\u6218\u573a\u3002\u76f4\u63a5\u5728\u7ec4\u4ef6\u91cc\u00a0await\u6570\u636e\u5e93\u6216 API&#xff0c;\u6027\u80fd\u8fdc\u8d85\u5ba2\u6237\u7aef\u7684\u00a0useEffect\u00a0\u6a21\u5f0f\u3002<\/p>\n<\/li>\n<li>\n<p>\u590d\u6742\u7684\u9759\u6001\u903b\u8f91\u4e0d\u9700\u8981\u00a0use client&#xff1a; \u5982\u679c\u4f60\u8981\u5904\u7406\u4e00\u6bb5\u6781\u5176\u590d\u6742\u7684\u6b63\u5219&#xff0c;\u6216\u8005\u8981\u628a Markdown \u8f6c\u6362\u6210 HTML&#xff0c;\u8bf7\u7559\u5728\u670d\u52a1\u7aef\u3002\u5229\u7528\u670d\u52a1\u5668\u5f3a\u5927\u7684\u7b97\u529b\u5b8c\u6210\u8ba1\u7b97&#xff0c;\u53ea\u628a\u7ed3\u679c\u53d1\u7ed9\u524d\u7aef&#xff0c;\u8fd9\u624d\u662f\u5bf9\u7528\u6237\u7535\u6c60\u6700\u5927\u7684\u6e29\u67d4\u3002<\/p>\n<\/li>\n<li>\n<p>\u8def\u7531\u94fe\u63a5\u4e0d\u9700\u8981\u00a0use client&#xff1a; Next.js \u63d0\u4f9b\u7684\u00a0next\/link\u00a0\u53ef\u4ee5\u5728\u670d\u52a1\u7aef\u7ec4\u4ef6\u4e2d\u5b8c\u7f8e\u5de5\u4f5c\u3002\u5b83\u80fd\u81ea\u52a8\u9884\u53d6\u6570\u636e&#xff0c;\u800c\u65e0\u9700\u4efb\u4f55\u5ba2\u6237\u7aef\u72b6\u6001\u652f\u6301\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u56db\u3001 \u8fdb\u9636\u5fc3\u6cd5&#xff1a;\u7ec4\u5408\u7684\u827a\u672f&#xff08;Composition&#xff09;<\/p>\n<p>\u8fd9\u662f Next.js \u67b6\u6784\u4e2d\u6700\u4ee4\u4eba\u62cd\u6848\u60ca\u5947\u7684\u4e00\u73af&#xff1a;\u5982\u4f55\u5728\u5ba2\u6237\u7aef\u7ec4\u4ef6\u4e2d\u5d4c\u5957\u670d\u52a1\u7aef\u7ec4\u4ef6&#xff1f;<\/p>\n<p>\u867d\u7136\u5ba2\u6237\u7aef\u7ec4\u4ef6\u4e0d\u80fd\u76f4\u63a5\u00a0import\u00a0\u670d\u52a1\u7aef\u7ec4\u4ef6&#xff0c;\u4f46\u4f60\u53ef\u4ee5\u901a\u8fc7\u00a0children\u00a0\u6a21\u5f0f\u00a0\u5c06\u5176\u6ce8\u5165\u3002<\/p>\n<p>\/\/ ServerComponentA.tsx<br \/>\nexport default function Layout() {<br \/>\n  return (<br \/>\n    &lt;ClientWrapper&gt;<br \/>\n      &lt;ServerComponentB \/&gt; {\/* \u8fd9\u662f\u4e00\u4e2a\u9ad8\u7ea7\u64cd\u4f5c&#xff1a;\u5c06\u670d\u52a1\u5668\u7ec4\u4ef6\u4f5c\u4e3a\u63d2\u69fd\u4f20\u5165 *\/}<br \/>\n    &lt;\/ClientWrapper&gt;<br \/>\n  );<br \/>\n}<\/p>\n<p>\u5728\u8fd9\u79cd\u6a21\u5f0f\u4e0b&#xff0c;ServerComponentB\u00a0\u4f9d\u7136\u662f\u5728\u670d\u52a1\u5668\u6e32\u67d3\u7684\u3002ClientWrapper\u00a0\u53ea\u8d1f\u8d23\u5b83\u81ea\u5df1\u7684\u90a3\u90e8\u5206\u4ea4\u4e92\u903b\u8f91\u3002\u8fd9\u79cd\u201c\u4fc4\u7f57\u65af\u5957\u5a03\u201d\u5f0f\u7684\u67b6\u6784&#xff0c;\u5141\u8bb8\u6211\u4eec\u5728\u4fdd\u6301\u9ad8\u6027\u80fd\u670d\u52a1\u7aef\u6e32\u67d3\u7684\u540c\u65f6&#xff0c;\u7075\u6d3b\u5730\u5305\u88f9\u4ea4\u4e92\u5916\u58f3\u3002<\/p>\n<p>\u4e94\u3001 \u8fb9\u754c\u611f\u80cc\u540e\u7684\u5de5\u7a0b\u54f2\u5b66&#xff1a;\u67b6\u6784\u7684\u5e73\u8861<\/p>\n<p>\u5212\u5206\u8fb9\u754c\u7684\u8fc7\u7a0b&#xff0c;\u672c\u8d28\u4e0a\u662f\u5728\u505a\u00a0\u201c\u6027\u80fd&#xff08;Performance&#xff09;\u201d\u00a0\u4e0e\u00a0\u201c\u5f00\u53d1\u4f53\u9a8c&#xff08;DX&#xff09;\u201d\u00a0\u7684\u6743\u8861\u3002<\/p>\n<ul>\n<li>\n<p>\u8fc7\u5ea6\u788e\u7247\u5316&#xff1a;\u5982\u679c\u4f60\u628a\u6bcf\u4e00\u4e2a\u5c0f\u6587\u5b57\u90fd\u62c6\u6210\u72ec\u7acb\u7684\u7ec4\u4ef6\u4ee5\u8ffd\u6c42\u6781\u81f4\u7684 RSC \u6bd4\u4f8b&#xff0c;\u4f1a\u5bfc\u81f4\u4ee3\u7801\u6781\u5176\u7834\u788e&#xff0c;\u7ef4\u62a4\u6210\u672c\u98d9\u5347\u3002<\/p>\n<\/li>\n<li>\n<p>\u8fc7\u5ea6\u6a21\u5757\u5316&#xff1a;\u5982\u679c\u4f60\u4e3a\u4e86\u7701\u4e8b\u628a\u5927\u5757\u529f\u80fd\u5408\u800c\u4e3a\u4e00\u5e76\u6807\u8bb0\u4e3a\u5ba2\u6237\u7aef&#xff0c;\u4f60\u7684\u5e94\u7528\u4f1a\u53d8\u5f97\u81c3\u80bf\u4e0d\u582a\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e13\u5bb6\u7684\u76f4\u89c9\u662f&#xff1a;\u4ee5\u201c\u4ea4\u4e92\u8fb9\u754c\u201d\u4e3a\u51c6\u7ef3\u3002 \u5f53\u4e00\u4e2a\u529f\u80fd\u6a21\u5757\u5185\u90e8\u7684\u5404\u90e8\u5206\u9700\u8981\u5171\u4eab\u72b6\u6001&#xff08;State&#xff09;\u6216\u54cd\u5e94\u540c\u4e00\u7ec4\u7528\u6237\u64cd\u4f5c\u65f6&#xff0c;\u5b83\u4eec\u5c31\u6784\u6210\u4e86\u4e00\u4e2a\u5929\u7136\u7684\u201c\u5ba2\u6237\u7aef\u5c9b\u5c7f&#xff08;Client Island&#xff09;\u201d\u3002\u800c\u5c9b\u5c7f\u4e4b\u5916\u90a3\u7247\u5bbd\u5e7f\u7684\u3001\u4ee5\u5185\u5bb9\u5c55\u793a\u4e3a\u4e3b\u7684\u6d77\u57df&#xff0c;\u5219\u5e94\u6c38\u8fdc\u7559\u7ed9\u670d\u52a1\u7aef\u3002<\/p>\n<p>\u516d\u3001 \u603b\u7ed3&#xff1a;\u5fc3\u4e2d\u6709\u754c&#xff0c;\u6307\u4e0b\u65e0\u5c18<\/p>\n<p>Next.js \u7684\u67b6\u6784\u8bbe\u8ba1\u4e0d\u518d\u662f\u5e73\u9762\u7684&#xff0c;\u5b83\u662f\u7acb\u4f53\u7684\u3002&#039;use client&#039;\u00a0\u5c31\u50cf\u662f\u4f60\u5728\u753b\u5e03\u4e0a\u5212\u4e0b\u7684\u5206\u6c34\u5cad\u3002<\/p>\n<ul>\n<li>\n<p>\u670d\u52a1\u7aef\u662f\u7a33\u56fa\u7684\u3001\u91cd\u578b\u7684\u3001\u63a5\u8fd1\u6570\u636e\u7684&#xff0c;\u5b83\u662f\u5e94\u7528\u7684\u8eaf\u5e72\u3002<\/p>\n<\/li>\n<li>\n<p>\u5ba2\u6237\u7aef\u662f\u654f\u6377\u7684\u3001\u8f7b\u76c8\u7684\u3001\u63a5\u8fd1\u7528\u6237\u7684&#xff0c;\u5b83\u662f\u5e94\u7528\u7684\u611f\u77e5\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4f18\u79c0\u7684\u8fb9\u754c\u611f&#xff0c;\u6765\u6e90\u4e8e\u5bf9\u7528\u6237\u4f53\u9a8c\u7684\u6781\u81f4\u5171\u60c5\u3002\u00a0\u5f53\u4f60\u5199\u4e0b\u6bcf\u4e00\u884c\u4ee3\u7801\u65f6&#xff0c;\u90fd\u5728\u95ee\u81ea\u5df1&#xff1a;\u201c\u8fd9\u6bb5\u4ee3\u7801\u5fc5\u987b\u5728\u7528\u6237\u7684\u624b\u673a CPU \u4e0a\u8dd1\u5417&#xff1f;\u5b83\u80fd\u7f29\u77ed\u7528\u6237\u7684\u7b49\u5f85\u65f6\u95f4\u5417&#xff1f;\u201d<\/p>\n<p>\u5f53\u4f60\u80fd\u719f\u7ec3\u5730\u5728\u7ec4\u4ef6\u6811\u4e2d\u6e38\u8d70&#xff0c;\u7cbe\u51c6\u5730\u653e\u7f6e\u90a3\u6761\u00a0&#039;use client&#039;\u00a0\u8fb9\u754c\u7ebf\u65f6&#xff0c;\u4f60\u5c31\u4e0d\u518d\u53ea\u662f\u4e00\u4e2a\u5199\u4ee3\u7801\u7684\u7801\u519c&#xff0c;\u800c\u662f\u4e00\u4e2a\u80fd\u591f\u6307\u6325\u7aef\u4e91\u534f\u540c\u3001\u5728\u6beb\u79d2\u7ea7\u535a\u5f08\u4e2d\u6e38\u5203\u6709\u4f59\u7684\u67b6\u6784\u5927\u5e08\u3002<\/p>\n<p>\u638c\u63e1\u4e86\u201c\u8fb9\u754c\u611f\u201d&#xff0c;\u4f60\u5c31\u638c\u63e1\u4e86 RSC \u7684\u7075\u9b42\u3002\u81f3\u6b64&#xff0c;\u6211\u4eec\u5df2\u7ecf\u5b8c\u6210\u4e86\u5bf9 Next.js \u6838\u5fc3\u67b6\u6784\u601d\u60f3\u7684\u7b51\u57fa\u3002\u63a5\u4e0b\u6765&#xff0c;\u6211\u4eec\u5c06\u8fdb\u5165\u7b2c\u56db\u7ae0&#xff1a;\u8def\u7531\u7684\u7f57\u76d8\u2014\u2014App Router \u5168\u89e3&#xff0c;\u53bb\u63a2\u7d22\u8fd9\u4e9b\u7cbe\u5fc3\u5212\u5206\u8fb9\u754c\u540e\u7684\u7ec4\u4ef6&#xff0c;\u662f\u5982\u4f55\u901a\u8fc7\u6587\u4ef6\u7cfb\u7edf\u7684\u8109\u7edc&#xff0c;\u7ec4\u7ec7\u6210\u4e00\u4e2a\u5e9e\u5927\u800c\u6709\u5e8f\u7684\u5168\u6808\u5e94\u7528\u7684\u3002\u60a8\u51c6\u5907\u597d\u5f00\u542f\u8fd9\u573a\u5173\u4e8e\u7a7a\u95f4\u4e0e\u8def\u5f84\u7684\u63a2\u7d22\u4e86\u5417&#xff1f;<\/p>\n<h2>\u7b2c4\u7ae0&#xff1a;\u8def\u7531\u7684\u7f57\u76d8\u2014\u2014App Router \u5168\u89e3<\/h2>\n<ul>\n<li>\n<p>4.1 \u201c\u5f84\u7531\u5fc3\u751f\u201d&#xff1a;\u00a0\u57fa\u4e8e\u6587\u4ef6\u7cfb\u7edf\u7684\u8def\u7531\u534f\u8bae\u4e0e\u6587\u4ef6\u5939\u7ea6\u5b9a<\/p>\n<\/li>\n<li>\n<p>4.2 \u201c\u5d4c\u5957\u4e4b\u7f8e\u201d&#xff1a;\u00a0Layout&#xff08;\u5e03\u5c40&#xff09;\u3001Template&#xff08;\u6a21\u677f&#xff09;\u4e0e Slot&#xff08;\u63d2\u69fd&#xff09;<\/p>\n<\/li>\n<li>\n<p>4.3 \u201c\u52a8\u6001\u611f\u77e5\u201d&#xff1a;\u00a0\u52a8\u6001\u8def\u7531\u3001\u901a\u914d\u8def\u7531\u4e0e\u5e76\u884c\u8def\u7531&#xff08;Parallel Routes&#xff09;<\/p>\n<\/li>\n<li>\n<p>4.4 \u201c\u5f02\u5e38\u5904\u7406\u201d&#xff1a;\u00a0Loading \u6001\u3001Error \u8fb9\u754c\u4e0e NotFound \u7684\u4f18\u96c5\u964d\u7ea7<\/p>\n<\/li>\n<\/ul>\n<h3>4.1 \u201c\u5f84\u7531\u5fc3\u751f\u201d\u2014\u2014\u57fa\u4e8e\u6587\u4ef6\u7cfb\u7edf\u7684\u8def\u7531\u534f\u8bae\u4e0e\u6587\u4ef6\u5939\u7ea6\u5b9a<\/h3>\n<p>\u5982\u679c\u8bf4\u67b6\u6784\u662f Web \u5e94\u7528\u7684\u9aa8\u67b6&#xff0c;\u90a3\u4e48\u8def\u7531&#xff08;Routing&#xff09;\u5c31\u662f\u8fde\u63a5\u5468\u8eab\u7684\u8840\u8109\u3002\u5728\u4f20\u7edf\u7684 Web \u5f00\u53d1\u4e2d&#xff0c;\u8def\u7531\u5f80\u5f80\u88ab\u89c6\u4e3a\u4e00\u79cd\u201c\u5916\u90e8\u914d\u7f6e\u201d\u2014\u2014\u4f60\u9700\u8981\u5728\u4e00\u4e2a\u5de8\u5927\u7684\u00a0routes.js\u00a0\u6587\u4ef6\u4e2d&#xff0c;\u75db\u82e6\u5730\u7ef4\u62a4\u7740\u8def\u5f84\u4e0e\u7ec4\u4ef6\u4e4b\u95f4\u7684\u6620\u5c04\u5173\u7cfb\u3002\u8fd9\u79cd\u914d\u7f6e\u4e0e\u5b9e\u73b0\u7684\u5206\u79bb&#xff0c;\u5e38\u5e38\u5bfc\u81f4\u9879\u76ee\u5728\u89c4\u6a21\u6269\u5927\u540e\u9677\u5165\u201c\u5bfc\u822a\u8ff7\u5931\u201d\u3002<\/p>\n<p>Next.js \u7684\u00a0App Router\u00a0\u5219\u5f7b\u5e95\u98a0\u8986\u4e86\u8fd9\u4e00\u903b\u8f91\u3002\u5b83\u63a8\u884c\u7684\u662f\u4e00\u79cd\u201c\u76f4\u89c9\u5373\u67b6\u6784\u201d\u7684\u54f2\u5b66&#xff1a;\u6587\u4ef6\u5939\u7684\u5c42\u7ea7\u5373\u662f URL \u7684\u8def\u5f84&#xff0c;\u6587\u4ef6\u7684\u547d\u540d\u5373\u662f\u529f\u80fd\u7684\u534f\u8bae\u3002\u00a0\u8fd9\u79cd\u201c\u5f84\u7531\u5fc3\u751f\u201d\u7684\u8bbe\u8ba1&#xff0c;\u8ba9\u4ee3\u7801\u76ee\u5f55\u672c\u8eab\u5c31\u6210\u4e3a\u4e86\u4e00\u5f20\u76f4\u89c2\u7684\u3001\u53ef\u751f\u957f\u7684\u5730\u56fe\u3002<\/p>\n<p>\u4e00\u3001 \u7a7a\u95f4\u7ef4\u5ea6&#xff1a;\u6587\u4ef6\u5939\u5373\u8def\u5f84\u7684\u201c\u6620\u5c04\u8bba\u201d<\/p>\n<p>\u5728 App Router \u7684\u4e16\u754c\u91cc&#xff0c;app\/\u00a0\u76ee\u5f55\u662f\u6574\u4e2a\u5e94\u7528\u7684\u5b87\u5b99\u4e2d\u5fc3\u3002\u6bcf\u4e00\u4e2a\u5d4c\u5957\u7684\u5b50\u6587\u4ef6\u5939&#xff0c;\u90fd\u5bf9\u5e94\u7740\u6d4f\u89c8\u5668\u5730\u5740\u680f\u4e2d\u7684\u4e00\u4e2a\u8def\u5f84\u7247\u6bb5\u3002<\/p>\n<ul>\n<li>\n<p>\u786e\u5b9a\u6027&#xff1a;\u5f53\u4f60\u770b\u5230\u00a0app\/dashboard\/settings\u00a0\u8fd9\u6837\u7684\u76ee\u5f55\u7ed3\u6784&#xff0c;\u4f60\u65e0\u9700\u67e5\u770b\u4efb\u4f55\u914d\u7f6e\u6587\u4ef6&#xff0c;\u5c31\u80fd\u767e\u5206\u4e4b\u767e\u786e\u5b9a\u5b83\u7684\u8bbf\u95ee\u5730\u5740\u662f\u00a0\/dashboard\/settings\u3002<\/p>\n<\/li>\n<li>\n<p>\u5206\u5f62\u7f8e\u5b66&#xff1a;\u8fd9\u79cd\u57fa\u4e8e\u6587\u4ef6\u5939\u7684\u7ec4\u7ec7\u65b9\u5f0f\u5177\u6709\u5929\u7136\u7684\u81ea\u76f8\u4f3c\u6027\u3002\u65e0\u8bba\u5e94\u7528\u591a\u4e48\u590d\u6742&#xff0c;\u5b83\u59cb\u7ec8\u9075\u5faa\u7740\u5d4c\u5957\u6587\u4ef6\u5939\u7684\u7269\u7406\u903b\u8f91\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u8fd9\u79cd\u8bbe\u8ba1\u5c06\u5f00\u53d1\u8005\u7684\u6ce8\u610f\u529b\u4ece\u201c\u7ef4\u62a4\u6620\u5c04\u8868\u201d\u89e3\u653e\u51fa\u6765&#xff0c;\u8f6c\u800c\u5173\u6ce8\u201c\u9886\u57df\u5efa\u6a21\u201d\u3002\u6bcf\u4e00\u4e2a\u6587\u4ef6\u5939\u4e0d\u4ec5\u662f\u4e00\u4e2a\u8def\u7531&#xff0c;\u66f4\u662f\u4e00\u4e2a\u72ec\u7acb\u7684\u4e1a\u52a1\u9886\u57df&#xff0c;\u5b83\u5305\u88f9\u7740\u8be5\u8def\u5f84\u4e0b\u7279\u6709\u7684\u9875\u9762\u3001\u5e03\u5c40\u3001\u6837\u5f0f\u548c\u6d4b\u8bd5\u3002<\/p>\n<p>\u4e8c\u3001 \u5951\u7ea6\u7cbe\u795e&#xff1a;\u7279\u6b8a\u6587\u4ef6\u547d\u540d\u7684\u201c\u534f\u8bae\u5316\u201d<\/p>\n<p>App Router \u6700\u7cbe\u5999\u7684\u5730\u65b9\u5728\u4e8e\u5b83\u5f15\u5165\u4e86\u4e00\u5957\u7279\u6b8a\u7684\u547d\u540d\u7ea6\u5b9a\u3002\u5728\u4efb\u4f55\u4e00\u4e2a\u8def\u7531\u6587\u4ef6\u5939\u5185&#xff0c;Next.js \u90fd\u5728\u5bfb\u627e\u7279\u5b9a\u7684\u6587\u4ef6\u540d\u6765\u5c65\u884c\u7279\u5b9a\u7684\u804c\u80fd\u3002\u8fd9\u4e0d\u518d\u662f\u7b80\u5355\u7684\u4ee3\u7801\u7f16\u5199&#xff0c;\u800c\u662f\u5728\u7b7e\u7f72\u4e00\u4efd\u67b6\u6784\u534f\u8bae\u3002<\/p>\n<p>1.\u00a0page.tsx&#xff1a;\u552f\u4e00\u7684\u5165\u573a\u5238<\/p>\n<p>page.tsx\u00a0\u662f\u8def\u7531\u7684\u7ec8\u70b9&#xff0c;\u4e5f\u662f UI \u7684\u8d77\u70b9\u3002\u53ea\u6709\u5305\u542b\u8be5\u6587\u4ef6\u7684\u6587\u4ef6\u5939&#xff0c;\u624d\u4f1a\u88ab\u89c6\u4e3a\u4e00\u4e2a\u516c\u5171\u53ef\u8bbf\u95ee\u7684\u8def\u7531\u3002<\/p>\n<p>\u6587\u4ef6\u5939\u51b3\u5b9a\u4e86\u201c\u4f60\u5728\u54ea\u91cc\u201d&#xff0c;\u800c\u00a0page.tsx\u00a0\u51b3\u5b9a\u4e86\u201c\u4f60\u770b\u5230\u4e86\u4ec0\u4e48\u201d\u3002<\/p>\n<p>2.\u00a0layout.tsx&#xff1a;\u7a7a\u95f4\u7684\u5b88\u62a4\u8005<\/p>\n<p>\u5b83\u5b9a\u4e49\u4e86\u591a\u4e2a\u9875\u9762\u5171\u4eab\u7684 UI\u3002\u4e0d\u540c\u4e8e\u4f20\u7edf\u7684\u7ec4\u4ef6\u5d4c\u5957&#xff0c;layout.tsx\u00a0\u5728\u5bfc\u822a\u65f6\u4e0d\u4f1a\u91cd\u65b0\u6e32\u67d3\u3002\u5b83\u5b88\u62a4\u7740\u5e94\u7528\u7684\u72b6\u6001&#xff08;\u5982\u6eda\u52a8\u4f4d\u7f6e\u3001\u8f93\u5165\u6846\u5185\u5bb9&#xff09;&#xff0c;\u662f\u5b9e\u73b0\u201c\u5355\u9875\u4f53\u9a8c\u201d\u7684\u6838\u5fc3\u57fa\u77f3\u3002<\/p>\n<p>3.\u00a0loading.tsx\u00a0\u4e0e\u00a0error.tsx&#xff1a;\u60c5\u7eea\u7684\u7f13\u51b2\u5e26<\/p>\n<p>\u8fd9\u662f\u5bf9\u7528\u6237\u4f53\u9a8c\u6781\u5176\u6e29\u67d4\u7684\u5173\u6000\u3002\u901a\u8fc7\u7b80\u5355\u7684\u547d\u540d&#xff0c;Next.js \u81ea\u52a8\u4e3a\u4f60\u67b6\u8bbe\u4e86\u57fa\u4e8e React Suspense \u7684\u52a0\u8f7d\u6d41\u548c\u9519\u8bef\u8fb9\u754c\u3002\u4f60\u4e0d\u9700\u8981\u7f16\u5199\u590d\u6742\u7684\u663e\u9690\u903b\u8f91&#xff0c;\u53ea\u9700\u63d0\u4f9b\u8fd9\u4e24\u4e2a\u6587\u4ef6&#xff0c;\u5e94\u7528\u4fbf\u5177\u5907\u4e86\u5e94\u5bf9\u5f02\u6b65\u5ef6\u8fdf\u4e0e\u7a81\u53d1\u5d29\u6e83\u7684\u97e7\u6027\u3002<\/p>\n<p>\u4e09\u3001 \u79c1\u6709\u9886\u5730&#xff1a;\u4e0b\u5212\u7ebf\u4e0e\u62ec\u53f7\u7684\u201c\u4fee\u9970\u827a\u672f\u201d<\/p>\n<p>\u4e3a\u4e86\u89e3\u51b3\u201c\u6587\u4ef6\u5939\u5373\u8def\u7531\u201d\u5e26\u6765\u7684\u8fc7\u5ea6\u66b4\u9732\u95ee\u9898&#xff0c;Next.js \u5f15\u5165\u4e86\u4e24\u5957\u4f18\u96c5\u7684\u7b26\u53f7\u8bed\u8a00&#xff0c;\u7528\u4e8e\u7ba1\u7406\u76ee\u5f55\u7684\u53ef\u89c1\u6027\u3002<\/p>\n<p>1.\u00a0(folder)&#xff1a;\u8def\u7531\u5206\u7ec4&#xff08;Route Groups&#xff09;<\/p>\n<p>\u5f53\u4f60\u7528\u5706\u62ec\u53f7\u5305\u88f9\u4e00\u4e2a\u6587\u4ef6\u5939\u540d\u65f6&#xff0c;\u5b83\u4f1a\u5728 URL \u8def\u5f84\u4e2d\u201c\u9690\u8eab\u201d\u3002<\/p>\n<ul>\n<li>\n<p>\u5e94\u7528\u573a\u666f&#xff1a;\u4f60\u5e0c\u671b\u5c06\u201c\u8425\u9500\u9875\u9762\u201d\u548c\u201c\u7ba1\u7406\u540e\u53f0\u201d\u653e\u5728\u4e0d\u540c\u7684\u6587\u4ef6\u5939\u91cc\u7ec4\u7ec7&#xff0c;\u4f46\u53c8\u4e0d\u5e0c\u671b URL \u91cc\u51fa\u73b0\u00a0\/marketing\/\u00a0\u6216\u00a0\/admin\/\u3002<\/p>\n<\/li>\n<li>\n<p>\u67b6\u6784\u610f\u4e49&#xff1a;\u5b83\u6253\u7834\u4e86\u201c\u7269\u7406\u7ed3\u6784\u5fc5\u987b\u7b49\u540c\u4e8e\u903b\u8f91\u8def\u5f84\u201d\u7684\u6b7b\u677f&#xff0c;\u5141\u8bb8\u5f00\u53d1\u8005\u6839\u636e\u7ec4\u7ec7\u7ba1\u7406\u9700\u6c42\u800c\u975e\u8def\u5f84\u9700\u6c42\u6765\u5212\u5206\u6587\u4ef6\u5939\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2.\u00a0_folder&#xff1a;\u79c1\u6709\u6587\u4ef6\u5939&#xff08;Private Folders&#xff09;<\/p>\n<p>\u5728\u6587\u4ef6\u5939\u524d\u52a0\u4e0b\u5212\u7ebf&#xff0c;\u53ef\u4ee5\u4f7f\u5176\u53ca\u5176\u5b50\u6587\u4ef6\u5939\u9000\u51fa\u8def\u7531\u7cfb\u7edf\u3002<\/p>\n<ul>\n<li>\n<p>\u5e94\u7528\u573a\u666f&#xff1a;\u5b58\u653e\u8be5\u8def\u7531\u4e13\u5c5e\u7684\u7ec4\u4ef6\u3001\u5de5\u5177\u51fd\u6570\u6216\u6d4b\u8bd5\u4ee3\u7801\u3002<\/p>\n<\/li>\n<li>\n<p>\u67b6\u6784\u610f\u4e49&#xff1a;\u8fd9\u5b9e\u73b0\u4e86\u201c\u5c31\u8fd1\u5b58\u653e&#xff08;Colocation&#xff09;\u201d\u7684\u6700\u4f73\u5b9e\u8df5\u3002\u4ee3\u7801\u4e0d\u518d\u6563\u843d\u5728\u5168\u5c40\u7684\u00a0components\/\u00a0\u6216\u00a0utils\/\u4e2d&#xff0c;\u800c\u662f\u56de\u5f52\u5230\u5b83\u88ab\u4f7f\u7528\u7684\u90a3\u4e2a\u9886\u57df\u4e4b\u4e2d\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u56db\u3001 \u534f\u8bae\u4f18\u4e8e\u914d\u7f6e&#xff1a;\u4e3a\u4f55\u8fd9\u624d\u662f\u751f\u4ea7\u529b&#xff1f;<\/p>\n<p>\u4f5c\u4e3a\u4e00\u4e2a\u9876\u7ea7\u7684\u8ba1\u7b97\u673a\u4e13\u5bb6&#xff0c;\u6211\u5fc5\u987b\u5f3a\u8c03&#xff1a;\u57fa\u4e8e\u6587\u4ef6\u7cfb\u7edf\u7684\u8def\u7531\u534f\u8bae&#xff0c;\u672c\u8d28\u4e0a\u662f\u5bf9\u00a0\u201c\u8ba4\u77e5\u8d1f\u62c5\u201d\u00a0\u7684\u964d\u7ef4\u6253\u51fb\u3002<\/p>\n<li>\n<p>\u81ea\u6587\u6863\u5316&#xff1a;\u9879\u76ee\u7684\u76ee\u5f55\u6811\u5c31\u662f\u6700\u5b8c\u7f8e\u7684\u5f00\u53d1\u6587\u6863\u3002<\/p>\n<\/li>\n<li>\n<p>\u56e2\u961f\u534f\u4f5c\u7684\u9632\u9519\u6027&#xff1a;\u65b0\u6210\u5458\u52a0\u5165\u540e&#xff0c;\u53ea\u8981\u7406\u89e3\u4e86\u547d\u540d\u534f\u8bae&#xff0c;\u5c31\u80fd\u5728\u4e0d\u7834\u574f\u73b0\u6709\u7cfb\u7edf\u7684\u60c5\u51b5\u4e0b&#xff0c;\u7cbe\u51c6\u5730\u6dfb\u52a0\u65b0\u529f\u80fd\u3002<\/p>\n<\/li>\n<li>\n<p>\u7f16\u8bd1\u65f6\u4f18\u5316&#xff1a;\u7531\u4e8e\u8def\u7531\u7ed3\u6784\u662f\u9759\u6001\u786e\u5b9a\u7684&#xff0c;Next.js \u53ef\u4ee5\u5728\u6784\u5efa\u9636\u6bb5\u8fdb\u884c\u6781\u81f4\u7684\u4ee3\u7801\u5206\u5272&#xff08;Code Splitting&#xff09;\u3002\u6bcf\u4e00\u4e2a\u8def\u7531\u53ea\u4e0b\u8f7d\u5b83\u81ea\u5df1\u9700\u8981\u7684 JS \u5305&#xff0c;\u6ca1\u6709\u4e00\u4e1d\u5197\u4f59\u3002<\/p>\n<\/li>\n<p>\u4e94\u3001 \u7ed3\u8bed&#xff1a;\u8def\u7531\u5373\u5fc3\u667a&#xff0c;\u7ea6\u5b9a\u5373\u81ea\u7531<\/p>\n<p>Next.js App Router \u7684\u8bbe\u8ba1\u903b\u8f91\u4f53\u73b0\u4e86\u4e00\u79cd\u6df1\u9083\u7684\u201c\u79e9\u5e8f\u611f\u201d\u3002\u5b83\u770b\u4f3c\u7528\u4e25\u683c\u7684\u6587\u4ef6\u5939\u7ea6\u5b9a\u675f\u7f1a\u4e86\u4f60&#xff0c;\u5b9e\u5219\u901a\u8fc7\u8fd9\u79cd\u7ea6\u675f&#xff0c;\u8d4b\u4e88\u4e86\u4f60\u6784\u5efa\u8d85\u5927\u89c4\u6a21\u5e94\u7528\u800c\u4e0d\u5d29\u584c\u7684\u81ea\u7531\u3002<\/p>\n<p>\u201c\u5f84\u7531\u5fc3\u751f\u201d\u3002\u5f53\u6211\u4eec\u4e0d\u518d\u7ea0\u7ed3\u4e8e\u5982\u4f55\u5b9a\u4e49\u8def\u5f84&#xff0c;\u4e0d\u518d\u88ab\u7e41\u7410\u7684\u914d\u7f6e\u6240\u7d2f&#xff0c;\u6211\u4eec\u7684\u5fc3\u667a\u5e26\u5bbd\u4fbf\u80fd\u5b8c\u6574\u5730\u56de\u5f52\u5230\u4e1a\u52a1\u903b\u8f91\u7684\u521b\u9020\u4e0a\u3002\u6bcf\u4e00\u4e2a\u6587\u4ef6\u5939\u7684\u521b\u5efa&#xff0c;\u90fd\u662f\u4e00\u6b21\u601d\u60f3\u7684\u843d\u5b50&#xff1b;\u6bcf\u4e00\u4e2a\u7279\u6b8a\u6587\u4ef6\u7684\u547d\u540d&#xff0c;\u90fd\u662f\u4e00\u6b21\u5951\u7ea6\u7684\u8fbe\u6210\u3002<\/p>\n<p>\u8fd9\u79cd\u57fa\u4e8e\u7ea6\u5b9a\u7684\u7f8e\u611f&#xff0c;\u6b63\u662f Next.js \u80fd\u591f\u4ece\u4f17\u591a Node.js \u6846\u67b6\u4e2d\u8131\u9896\u800c\u51fa&#xff0c;\u6210\u4e3a\u5de5\u4e1a\u6807\u6746\u7684\u539f\u56e0\u4e4b\u4e00\u3002\u5b83\u4e0d\u4ec5\u5728\u6559\u4f60\u5982\u4f55\u5199\u4ee3\u7801&#xff0c;\u66f4\u5728\u6559\u4f60\u5982\u4f55\u6784\u5efa\u4e00\u4e2a\u6709\u5c0a\u4e25\u3001\u6709\u79e9\u5e8f\u3001\u53ef\u751f\u957f\u7684\u6570\u5b57\u4e16\u754c\u3002<\/p>\n<p>\u638c\u63e1\u4e86\u8def\u7531\u7684\u7269\u7406\u7ed3\u6784\u540e&#xff0c;\u6211\u4eec\u4fbf\u8981\u8fdb\u5165\u8fd9\u4e2a\u7a7a\u95f4\u5185\u90e8&#xff0c;\u53bb\u63a2\u5bfb\u90a3\u4e9b\u7ec4\u4ef6\u662f\u5982\u4f55\u5c42\u5c42\u5d4c\u5957\u3001\u5b8c\u7f8e\u8854\u63a5\u7684\u3002\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u653b\u514b\u7684\u96be\u9898&#xff1a;\u201c\u5d4c\u5957\u4e4b\u7f8e\u201d&#xff1a;\u5e03\u5c40\u3001\u6a21\u677f\u4e0e\u63d2\u69fd\u7684\u6df1\u5ea6\u8fd0\u7528\u3002\u60a8\u60f3\u7ee7\u7eed\u63ed\u5f00 Next.js \u7a7a\u95f4\u6392\u5e03\u7684\u5965\u79d8\u5417&#xff1f;<\/p>\n<h3>4.2 \u201c\u5d4c\u5957\u4e4b\u7f8e\u201d\u2014\u2014Layout&#xff08;\u5e03\u5c40&#xff09;\u3001Template&#xff08;\u6a21\u677f&#xff09;\u4e0e Slot&#xff08;\u63d2\u69fd&#xff09;<\/h3>\n<p>\u5982\u679c\u8bf4\u524d\u4e00\u5c0f\u8282\u6784\u5efa\u4e86\u8def\u7531\u7684\u201c\u7ecf\u7eac\u5ea6\u201d&#xff0c;\u90a3\u4e48\u672c\u8282\u5219\u8981\u63a2\u8ba8\u5982\u4f55\u5728\u8fd9\u4e9b\u5750\u6807\u70b9\u4e0a&#xff0c;\u8425\u5efa\u51fa\u5c42\u6b21\u5206\u660e\u3001\u52a8\u9759\u7ed3\u5408\u7684\u5168\u6808\u7a7a\u95f4\u3002<\/p>\n<p>\u5728 Next.js \u7684\u4e16\u754c\u91cc&#xff0c;\u9875\u9762\u4e0d\u518d\u662f\u4e00\u4e2a\u5b64\u7acb\u7684\u3001\u6bcf\u6b21\u8df3\u8f6c\u90fd\u9700\u63a8\u5012\u91cd\u6765\u7684 HTML \u7247\u6bb5\u3002\u5b83\u901a\u8fc7\u00a0Layout&#xff08;\u5e03\u5c40&#xff09;\u7684\u6301\u4e45\u5316\u3001Template&#xff08;\u6a21\u677f&#xff09;\u00a0\u7684\u7075\u52a8\u4ee5\u53ca\u00a0Slot&#xff08;\u63d2\u69fd&#xff09;\u00a0\u7684\u5e76\u884c&#xff0c;\u6784\u5efa\u51fa\u4e00\u79cd\u7c7b\u4f3c\u4e8e\u73b0\u4ee3\u64cd\u4f5c\u7cfb\u7edf\u7a97\u53e3\u5316\u7684\u201c\u5d4c\u5957\u67b6\u6784\u201d\u3002\u8fd9\u79cd\u67b6\u6784\u4e4b\u7f8e&#xff0c;\u5728\u4e8e\u5b83\u80fd\u7cbe\u51c6\u5730\u8bc6\u522b\u54ea\u4e9b\u90e8\u5206\u5e94\u5f53\u201c\u6052\u4e45\u4e0d\u52a8\u201d&#xff0c;\u800c\u54ea\u4e9b\u90e8\u5206\u5e94\u5f53\u201c\u77ac\u606f\u4e07\u53d8\u201d\u3002<\/p>\n<p>\u4e00\u3001 Layout&#xff08;\u5e03\u5c40&#xff09;&#xff1a;\u6301\u4e45\u5316\u7684\u5b88\u671b\u8005<\/p>\n<p>Layout\u00a0\u662f App Router \u7687\u51a0\u4e0a\u7684\u660e\u73e0\u3002\u5b83\u5b9a\u4e49\u4e86\u4e00\u4e2a\u8def\u7531\u53ca\u5176\u5b50\u8def\u7531\u5171\u6709\u7684 UI \u7ed3\u6784\u3002<\/p>\n<p>1. \u72b6\u6001\u7684\u201c\u907f\u98ce\u6e2f\u201d<\/p>\n<p>Layout \u6700\u4f1f\u5927\u7684\u7279\u6027\u5728\u4e8e&#xff1a;\u5b83\u5728\u5bfc\u822a\u8fc7\u7a0b\u4e2d\u4e0d\u4f1a\u91cd\u65b0\u6e32\u67d3&#xff08;Re-render&#xff09;\u3002 \u60f3\u8c61\u4e00\u4e2a\u4fa7\u8fb9\u680f\u5305\u542b\u7740\u590d\u6742\u7684\u641c\u7d22\u8f93\u5165\u6846\u548c\u64ad\u653e\u5668\u3002\u5728\u4f20\u7edf\u7684 SPA \u4e2d&#xff0c;\u6bcf\u6b21\u8df3\u8f6c\u8def\u7531&#xff0c;\u8fd9\u4e9b\u7ec4\u4ef6\u7684\u72b6\u6001\u90fd\u4f1a\u6d88\u5931\u3002\u800c\u5728 Next.js \u7684 Layout \u4e2d&#xff0c;\u65e0\u8bba\u5b50\u9875\u9762\u5982\u4f55\u5207\u6362&#xff0c;\u4fa7\u8fb9\u680f\u59cb\u7ec8\u4fdd\u6301\u9759\u6b62\u3002<\/p>\n<ul>\n<li>\n<p>\u5de5\u7a0b\u610f\u4e49&#xff1a;\u8fd9\u610f\u5473\u7740\u4f60\u53ef\u4ee5\u5728 Layout \u4e2d\u7ef4\u6301\u4ea4\u4e92\u72b6\u6001&#xff08;\u5982\u641c\u7d22\u8bcd\u3001\u5c55\u5f00\u6536\u8d77\u72b6\u6001&#xff09;&#xff0c;\u800c\u65e0\u9700\u5c06\u5176\u63d0\u5347\u5230\u5168\u5c40\u72b6\u6001\u7ba1\u7406\u5e93\u4e2d\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u5c42\u5c42\u9012\u8fdb\u7684\u5d4c\u5957\u903b\u8f91<\/p>\n<p>Layout \u662f\u53ef\u4ee5\u9012\u5f52\u5d4c\u5957\u7684\u3002\u6839\u5e03\u5c40&#xff08;Root Layout&#xff09;\u5b9a\u4e49\u4e86 HTML \u548c Body \u6807\u7b7e&#xff0c;\u800c\u5b50\u76ee\u5f55\u7684 Layout \u5219\u5b9a\u4e49\u4e86\u7279\u5b9a\u6a21\u5757\u7684\u5bfc\u822a\u3002\u8fd9\u79cd\u201c\u540c\u5fc3\u5706\u5f0f\u201d\u7684\u6e32\u67d3\u6a21\u578b&#xff0c;\u8ba9\u590d\u6742\u7684\u540e\u53f0\u7cfb\u7edf\u6216\u7535\u5546\u5e73\u53f0\u80fd\u4ee5\u6700\u7b80\u6d01\u7684\u4ee3\u7801\u8868\u8fbe\u51fa\u6781\u9ad8\u7684\u5c42\u7ea7\u611f\u3002<\/p>\n<p>\u4e8c\u3001 Template&#xff08;\u6a21\u677f&#xff09;&#xff1a;\u6d41\u52a8\u7684\u53d8\u594f\u66f2<\/p>\n<p>\u5c3d\u7ba1 Layout \u5f3a\u5927&#xff0c;\u4f46\u6709\u65f6\u6211\u4eec\u9700\u8981\u5728\u6bcf\u6b21\u8def\u7531\u5207\u6362\u65f6\u5f3a\u884c\u91cd\u7f6e\u67d0\u4e9b\u903b\u8f91\u3002\u8fd9\u65f6&#xff0c;Template\u00a0\u4fbf\u767b\u573a\u4e86\u3002<\/p>\n<p>Template \u4e0e Layout \u5728\u6587\u4ef6\u7ed3\u6784\u4e0a\u51e0\u4e4e\u4e00\u81f4&#xff0c;\u4f46\u5b83\u5728\u6bcf\u6b21\u5bfc\u822a\u65f6\u90fd\u4f1a\u4e3a\u5b50\u7ec4\u4ef6\u521b\u5efa\u4e00\u4e2a\u5168\u65b0\u7684\u5b9e\u4f8b\u3002<\/p>\n<ul>\n<li>\n<p>\u573a\u666f&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u9700\u8981\u89e6\u53d1\u8fdb\u5165\/\u9000\u51fa\u52a8\u753b&#xff08;CSS Animations&#xff09;\u3002<\/p>\n<\/li>\n<li>\n<p>\u9700\u8981\u8bb0\u5f55\u6bcf\u4e2a\u9875\u9762\u7684\u72ec\u7acb\u8bbf\u95ee\u91cf\u3002<\/p>\n<\/li>\n<li>\n<p>\u4f9d\u8d56\u4e8e\u00a0useEffect\u00a0\u7684\u9875\u9762\u521d\u59cb\u903b\u8f91\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u603b\u7ed3&#xff1a;Layout \u662f\u201c\u5171\u6709\u7684\u57fa\u5ea7\u201d&#xff0c;\u800c Template \u662f\u201c\u72ec\u7acb\u7684\u5305\u88f9\u201d\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e09\u3001 Slot&#xff08;\u63d2\u69fd&#xff09;\u4e0e\u5e76\u884c\u8def\u7531&#xff1a;\u7a7a\u95f4\u91cd\u53e0\u7684\u827a\u672f<\/p>\n<p>\u5728\u9ad8\u7ea7\u67b6\u6784\u8bbe\u8ba1\u4e2d&#xff0c;\u6211\u4eec\u7ecf\u5e38\u9047\u5230\u4e00\u4e2a\u6311\u6218&#xff1a;\u4e00\u4e2a URL \u8def\u5f84\u4e0b&#xff0c;\u9700\u8981\u540c\u65f6\u5c55\u793a\u591a\u4e2a\u4e92\u4e0d\u96b6\u5c5e\u7684\u7ec4\u4ef6&#xff08;\u4f8b\u5982&#xff1a;\u4e00\u4e2a\u7ba1\u7406\u540e\u53f0&#xff0c;\u5de6\u4fa7\u662f\u8bbe\u7f6e&#xff0c;\u53f3\u4fa7\u662f\u4eea\u8868\u76d8&#xff0c;\u540c\u65f6\u8fd8\u6709\u4e00\u4e2a\u6d6e\u52a8\u7684\u76d1\u63a7\u7a97\u53e3&#xff09;\u3002<\/p>\n<p>Next.js \u901a\u8fc7\u00a0Slot&#xff08;\u63d2\u69fd&#xff09;\u00a0\u673a\u5236\u5f15\u5165\u4e86\u00a0\u5e76\u884c\u8def\u7531&#xff08;Parallel Routes&#xff09;\u3002<\/p>\n<p>1.\u00a0&#064;folder\u00a0\u7684\u8bed\u6cd5\u7cd6<\/p>\n<p>\u5f53\u4f60\u521b\u5efa\u4e00\u4e2a\u4ee5\u00a0&#064;\u00a0\u5f00\u5934\u7684\u6587\u4ef6\u5939&#xff08;\u5982\u00a0&#064;analytics&#xff09;&#xff0c;\u5b83\u5e76\u4e0d\u4f1a\u5728 URL \u4e2d\u589e\u52a0\u8def\u5f84&#xff0c;\u800c\u662f\u53d8\u6210\u4e86\u4e00\u4e2a\u4f20\u7ed9\u7236\u7ea7 Layout \u7684\u00a0Prop&#xff08;\u63d2\u69fd&#xff09;\u3002<\/p>\n<p>2. \u5e76\u884c\u6e32\u67d3\u7684\u5a01\u529b<\/p>\n<p>\/\/ dashboard\/layout.tsx<br \/>\nexport default function Layout({ children, analytics, team }) {<br \/>\n  return (<br \/>\n    &lt;div className&#061;&#034;flex&#034;&gt;<br \/>\n      {children}   {\/* \u9ed8\u8ba4\u7684 page.tsx *\/}<br \/>\n      {analytics}  {\/* \u6765\u81ea &#064;analytics\/page.tsx *\/}<br \/>\n      {team}       {\/* \u6765\u81ea &#064;team\/page.tsx *\/}<br \/>\n    &lt;\/div&gt;<br \/>\n  );<br \/>\n}<\/p>\n<p>\u8fd9\u79cd\u8bbe\u8ba1\u8ba9\u4e00\u4e2a\u9875\u9762\u53ef\u4ee5\u88ab\u62c6\u89e3\u4e3a\u591a\u4e2a\u5e76\u884c\u4e14\u72ec\u7acb\u7684\u6570\u636e\u83b7\u53d6\u5355\u5143\u3002\u5982\u679c\u00a0&#064;analytics\u00a0\u52a0\u8f7d\u7f13\u6162&#xff0c;\u5b83\u4e0d\u4f1a\u963b\u585e\u00a0children\u00a0\u7684\u663e\u793a\u3002\u8fd9\u4fbf\u662f\u5168\u6808\u601d\u7ef4\u4e0b\u5bf9\u201c\u7a7a\u95f4\u5229\u7528\u7387\u201d\u7684\u6781\u81f4\u8ffd\u6c42\u3002<\/p>\n<p>\u56db\u3001 \u62e6\u622a\u8def\u7531&#xff08;Intercepting Routes&#xff09;&#xff1a;\u89c6\u89c9\u7684\u201c\u77ac\u95f4\u4f4d\u79fb\u201d<\/p>\n<p>\u63d2\u69fd\u7684\u53e6\u4e00\u4e2a\u795e\u5947\u7528\u9014\u662f\u8def\u7531\u62e6\u622a\u3002\u5b83\u53ef\u4ee5\u8ba9\u4f60\u5728\u4e0d\u79bb\u5f00\u5f53\u524d\u9875\u9762\u7684\u8bed\u5883\u4e0b&#xff0c;\u901a\u8fc7 URL \u52a0\u8f7d\u53e6\u4e00\u4e2a\u8def\u7531\u7684\u5185\u5bb9\u3002<\/p>\n<ul>\n<li>\n<p>\u7ecf\u5178\u6848\u4f8b&#xff1a;\u5728\u7167\u7247\u6d41\u9875\u9762\u70b9\u51fb\u4e00\u5f20\u7f29\u7565\u56fe&#xff0c;URL \u53d8\u6210\u4e86\u00a0\/photo\/1&#xff0c;\u9875\u9762\u4e2d\u5fc3\u5f39\u51fa\u4e86\u4e00\u4e2a\u6a21\u6001\u6846\u663e\u793a\u5927\u56fe&#xff0c;\u4f46\u80cc\u666f\u4f9d\u7136\u662f\u4e4b\u524d\u7684\u7167\u7247\u5217\u8868\u3002<\/p>\n<\/li>\n<li>\n<p>\u67b6\u6784\u4ef7\u503c&#xff1a;\u5b83\u89e3\u51b3\u4e86\u201c\u4e0a\u4e0b\u6587\u4e22\u5931\u201d\u7684\u95ee\u9898\u3002\u7528\u6237\u53ef\u4ee5\u5206\u4eab\u00a0\/photo\/1\u00a0\u8fd9\u4e2a\u94fe\u63a5&#xff0c;\u65b0\u6253\u5f00\u8be5\u94fe\u63a5\u7684\u4eba\u4f1a\u770b\u5230\u5b8c\u6574\u7167\u7247\u9875&#xff0c;\u800c\u4ece\u5217\u8868\u9875\u8fdb\u5165\u7684\u4eba\u5219\u80fd\u4eab\u53d7\u5230\u5e73\u6ed1\u7684\u5f39\u7a97\u4f53\u9a8c\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e94\u3001 \u54f2\u5b66\u601d\u8fa8&#xff1a;\u9759\u6001\u4e0e\u52a8\u6001\u7684\u5171\u751f<\/p>\n<p>\u4f5c\u4e3a\u9876\u7ea7\u7684\u4e13\u5bb6&#xff0c;\u6211\u5e38\u601d\u8003&#xff1a;\u4e3a\u4ec0\u4e48 Next.js \u8981\u628a\u5e03\u5c40\u7cfb\u7edf\u8bbe\u8ba1\u5f97\u5982\u6b64\u590d\u6742&#xff1f;<\/p>\n<p>\u7b54\u6848\u5728\u4e8e\u201c\u6027\u80fd\u4e0e\u4ea4\u4e92\u7684\u5bf9\u51b2\u201d\u3002 \u4f20\u7edf\u7684 Web \u5f00\u53d1\u5728\u201c\u5168\u9875\u9762\u91cd\u7ed8\u201d\u4e0e\u201c\u7eaf\u7ec4\u4ef6\u5207\u6362\u201d\u4e4b\u95f4\u6323\u624e\u3002\u800c Next.js \u7684\u5d4c\u5957\u67b6\u6784\u63d0\u4f9b\u4e86\u4e00\u4e2a\u7b2c\u4e09\u6761\u8def&#xff1a;\u7ed3\u6784\u9759\u6001\u5316&#xff0c;\u4ea4\u4e92\u5c40\u90e8\u5316\u3002<\/p>\n<ul>\n<li>\n<p>Layout\u00a0\u627f\u8f7d\u4e86\u6027\u80fd&#xff1a;\u5b83\u662f\u9759\u6001\u7684\u3001\u53ef\u7f13\u5b58\u7684\u3002<\/p>\n<\/li>\n<li>\n<p>Page\u00a0\u627f\u8f7d\u4e86\u5185\u5bb9&#xff1a;\u5b83\u662f\u52a8\u6001\u7684\u3001\u56e0\u8bf7\u6c42\u800c\u5f02\u7684\u3002<\/p>\n<\/li>\n<li>\n<p>Slot\u00a0\u627f\u8f7d\u4e86\u7075\u6d3b\u6027&#xff1a;\u5b83\u662f\u5e76\u884c\u7684\u3001\u53ef\u89e3\u8026\u7684\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u516d\u3001 \u603b\u7ed3&#xff1a;\u8425\u5efa\u6570\u5b57\u56ed\u6797<\/p>\n<p>\u638c\u63e1\u4e86 Layout\u3001Template \u4e0e Slot&#xff0c;\u4f60\u5c31\u4ece\u4e00\u4e2a\u201c\u9875\u9762\u753b\u5e08\u201d\u8fdb\u9636\u4e3a\u4e86\u4e00\u540d\u201c\u5168\u6808\u67b6\u6784\u5e08\u201d\u3002\u4f60\u4e0d\u518d\u662f\u673a\u68b0\u5730\u5806\u780c\u7ec4\u4ef6&#xff0c;\u800c\u662f\u5728\u8425\u5efa\u4e00\u5ea7\u903b\u8f91\u5206\u660e\u3001\u52a8\u9759\u7ed3\u5408\u7684\u6570\u5b57\u56ed\u6797\u3002<\/p>\n<ul>\n<li>\n<p>\u575a\u56fa\u6027&#xff1a;\u5229\u7528 Root Layout \u592f\u5b9e\u5730\u57fa\u3002<\/p>\n<\/li>\n<li>\n<p>\u7075\u52a8\u6027&#xff1a;\u5229\u7528 Template \u6355\u6349\u6bcf\u4e00\u6b21\u547c\u5438&#xff08;\u5207\u6362&#xff09;\u3002<\/p>\n<\/li>\n<li>\n<p>\u5e76\u884c\u6027&#xff1a;\u5229\u7528 Slot \u5f00\u542f\u591a\u7ef4\u7a7a\u95f4\u7684\u53d9\u4e8b\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u8fd9\u79cd\u201c\u5d4c\u5957\u4e4b\u7f8e\u201d&#xff0c;\u6b63\u662f App Router \u7684\u7075\u9b42\u6240\u5728\u3002\u5b83\u8ba9 Web \u5f00\u53d1\u62e5\u6709\u4e86\u684c\u9762\u7ea7\u5e94\u7528\u7684\u6df1\u9083\u4e0e\u7a33\u5065&#xff0c;\u4e5f\u8ba9\u5168\u6808\u540c\u6784\u7684\u7406\u60f3&#xff0c;\u5728\u5c42\u5c42\u5806\u53e0\u7684 JSX \u4e2d\u5f00\u51fa\u4e86\u6700\u7eda\u4e3d\u7684\u82b1\u6735\u3002<\/p>\n<p>\u5f53\u4f60\u5df2\u7ecf\u5728\u7269\u7406\u7a7a\u95f4\u4e0a\u6392\u5e03\u597d\u4e86\u8fd9\u4e9b\u7cbe\u5999\u7684\u7ec4\u4ef6&#xff0c;\u4e0b\u4e00\u4e2a\u6311\u6218\u4fbf\u662f&#xff1a;\u5982\u4f55\u8ba9\u8fd9\u4e9b\u7a7a\u95f4\u611f\u77e5\u5230\u6570\u636e\u7684\u6d41\u52a8&#xff1f;\u5982\u4f55\u5904\u7406\u90a3\u4e9b\u53d8\u5e7b\u83ab\u6d4b\u7684\u52a8\u6001 ID&#xff1f;\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u63a2\u8ba8\u7684\u201c\u52a8\u6001\u611f\u77e5\u201d&#xff1a;\u52a8\u6001\u8def\u7531\u3001\u901a\u914d\u8def\u7531\u4e0e\u5e76\u884c\u8def\u7531\u7684\u8fdb\u9636\u73a9\u6cd5\u3002\u60a8\u60f3\u7ee7\u7eed\u6df1\u5165&#xff0c;\u638c\u63e1\u5982\u4f55\u7528\u4ee3\u7801\u201c\u6355\u6349\u201d\u6bcf\u4e00\u4e2a\u53d8\u52a8\u7684 URL \u53c2\u6570\u5417&#xff1f;<\/p>\n<h3>4.3 \u201c\u52a8\u6001\u611f\u77e5\u201d\u2014\u2014\u52a8\u6001\u8def\u7531\u3001\u901a\u914d\u8def\u7531\u4e0e\u5e76\u884c\u8def\u7531<\/h3>\n<p>\u5982\u679c\u8bf4\u57fa\u7840\u8def\u7531\u662f\u57ce\u5e02\u4e2d\u547d\u540d\u7684\u8857\u9053&#xff0c;\u90a3\u4e48\u52a8\u6001\u8def\u7531&#xff08;Dynamic Routes&#xff09;\u5c31\u662f\u901a\u5f80\u65e0\u9650\u53ef\u80fd\u7684\u201c\u4efb\u610f\u95e8\u201d\u3002\u5728\u73b0\u4ee3\u5168\u6808\u5f00\u53d1\u4e2d&#xff0c;\u6570\u636e\u5f80\u5f80\u662f\u6d77\u91cf\u7684\u3001\u4e0d\u53ef\u9884\u77e5\u7684&#xff1a;\u6210\u5343\u4e0a\u4e07\u7684\u5546\u54c1 ID\u3001\u53d8\u5e7b\u83ab\u6d4b\u7684\u7528\u6237\u8d26\u53f7\u3001\u968f\u65f6\u95f4\u63a8\u79fb\u800c\u5806\u79ef\u7684\u535a\u5ba2\u6587\u7ae0\u3002<\/p>\n<p>Next.js \u7684\u8def\u7531\u7cfb\u7edf\u5c55\u73b0\u4e86\u4e00\u79cd\u5353\u8d8a\u7684\u201c\u611f\u77e5\u529b\u201d\u3002\u5b83\u4e0d\u518d\u8981\u6c42\u5f00\u53d1\u8005\u4e3a\u6bcf\u4e00\u4e2a\u5177\u4f53\u7684 ID \u7f16\u5199\u7269\u7406\u8def\u5f84&#xff0c;\u800c\u662f\u901a\u8fc7\u4e00\u5957\u7cbe\u5999\u7684\u8bed\u6cd5\u7b26\u53f7&#xff0c;\u8ba9\u6587\u4ef6\u5939\u5177\u5907\u4e86\u201c\u6355\u6349\u201d\u53d8\u91cf\u7684\u80fd\u529b\u3002\u672c\u8282\u6211\u4eec\u5c06\u63a2\u8ba8\u5982\u4f55\u5229\u7528\u52a8\u6001\u8def\u7531\u3001\u901a\u914d\u8def\u7531\u4ee5\u53ca\u9ad8\u9636\u7684\u5e76\u884c\u8def\u7531&#xff0c;\u6784\u5efa\u51fa\u4e00\u4e2a\u80fd\u591f\u5bb9\u7eb3\u4e07\u7269\u3001\u81ea\u5982\u4f38\u7f29\u7684\u52a8\u6001\u65f6\u7a7a\u3002<\/p>\n<p>\u4e00\u3001 \u52a8\u6001\u6355\u83b7&#xff1a;[slug]\u00a0\u7684\u53d8\u91cf\u827a\u672f<\/p>\n<p>\u5728 App Router \u4e2d&#xff0c;\u5f53\u4f60\u4f7f\u7528\u65b9\u62ec\u53f7\u547d\u540d\u6587\u4ef6\u5939&#xff08;\u4f8b\u5982\u00a0app\/product\/[id]\/page.tsx&#xff09;&#xff0c;\u4f60\u5c31\u521b\u5efa\u4e86\u4e00\u4e2a\u52a8\u6001\u7247\u6bb5&#xff08;Dynamic Segment&#xff09;\u3002<\/p>\n<p>1. \u81ea\u52a8\u89e3\u6784\u7684\u53c2\u6570<\/p>\n<p>\u5f53\u7528\u6237\u8bbf\u95ee\u00a0\/product\/123\u00a0\u65f6&#xff0c;Next.js \u4f1a\u81ea\u52a8\u5c06\u00a0123\u00a0\u6355\u83b7\u5e76\u4f5c\u4e3a\u00a0params\u00a0\u4f20\u5165\u4f60\u7684\u7ec4\u4ef6\u3002\u8fd9\u79cd\u8bbe\u8ba1\u5b9e\u73b0\u4e86\u201c\u903b\u8f91\u4e0e\u6570\u636e\u7684\u89e3\u8026\u201d&#xff1a;\u65e0\u8bba ID \u662f\u4ec0\u4e48&#xff0c;\u6e32\u67d3\u7684\u903b\u8f91\u6846\u67b6\u59cb\u7ec8\u5982\u4e00\u3002<\/p>\n<p>2. \u670d\u52a1\u7aef\u7684\u6df1\u5ea6\u96c6\u6210<\/p>\n<p>\u52a8\u6001\u8def\u7531\u5728\u670d\u52a1\u7aef\u7ec4\u4ef6&#xff08;RSC&#xff09;\u4e2d\u53d1\u6325\u7740\u6781\u81f4\u7684\u5a01\u529b\u3002\u7531\u4e8e\u00a0params\u00a0\u662f\u5728\u670d\u52a1\u7aef\u83b7\u53d6\u7684&#xff0c;\u4f60\u53ef\u4ee5\u76f4\u63a5\u5728\u7ec4\u4ef6\u5185\u5229\u7528\u8fd9\u4e2a\u53d8\u91cf\u53d1\u8d77\u6570\u636e\u5e93\u67e5\u8be2&#xff1a;<\/p>\n<p>export default async function Page({ params }: { params: { id: string } }) {<br \/>\n  const product &#061; await db.product.findUnique({ where: { id: params.id } });<br \/>\n  \/\/ \u65e0\u9700\u5ba2\u6237\u7aef\u4e8c\u6b21\u8bf7\u6c42&#xff0c;\u6570\u636e\u76f4\u63a5\u968f HTML \u4e0b\u53d1<br \/>\n  return &lt;h1&gt;{product.name}&lt;\/h1&gt;;<br \/>\n}<\/p>\n<p>\u4e8c\u3001 \u5e7f\u57df\u611f\u77e5&#xff1a;\u901a\u914d\u8def\u7531\u4e0e\u5168\u6bb5\u6355\u6349<\/p>\n<p>\u6709\u65f6&#xff0c;\u6211\u4eec\u9700\u8981\u66f4\u5f3a\u5927\u7684\u6355\u83b7\u80fd\u529b&#xff0c;\u53bb\u5904\u7406\u90a3\u4e9b\u5c42\u7ea7\u4e0d\u5b9a\u7684\u8def\u5f84\u3002<\/p>\n<p>1.\u00a0[&#8230;slug]&#xff1a;\u6355\u6349\u4e00\u5207<\/p>\n<p>\u5f53\u4f60\u9700\u8981\u5339\u914d\u5d4c\u5957\u8def\u5f84&#xff08;\u5982\u00a0\/docs\/v1\/api\/intro&#xff09;&#xff0c;\u4f7f\u7528\u00a0[&#8230;slug]\u00a0\u53ef\u4ee5\u5c06\u00a0v1\/api\/intro\u00a0\u6355\u83b7\u4e3a\u4e00\u4e2a\u5b57\u7b26\u4e32\u6570\u7ec4\u3002\u8fd9\u5728\u6784\u5efa\u6587\u6863\u7cfb\u7edf\u6216 CMS&#xff08;\u5185\u5bb9\u7ba1\u7406\u7cfb\u7edf&#xff09;\u65f6&#xff0c;\u662f\u5fc5\u4e0d\u53ef\u5c11\u7684\u5229\u5668\u3002<\/p>\n<p>2.\u00a0[[&#8230;slug]]&#xff1a;\u53ef\u9009\u7684\u5305\u5bb9\u6027<\/p>\n<p>\u53cc\u62ec\u53f7\u8bed\u6cd5\u8fdb\u4e00\u6b65\u653e\u5bbd\u4e86\u9650\u5236&#xff0c;\u5b83\u751a\u81f3\u80fd\u5339\u914d\u4e0d\u5e26\u53c2\u6570\u7684\u6839\u8def\u5f84\u3002\u8fd9\u79cd\u201c\u53ef\u9009\u6355\u83b7\u201d\u8d4b\u4e88\u4e86\u8def\u7531\u6781\u81f4\u7684\u7075\u6d3b\u6027&#xff0c;\u8ba9\u540c\u4e00\u4e2a\u00a0page.tsx\u00a0\u80fd\u591f\u540c\u65f6\u5904\u7406\u6982\u89c8\u9875\u4e0e\u8be6\u60c5\u9875\u7684\u903b\u8f91\u3002<\/p>\n<p>\u4e09\u3001 \u5e76\u884c\u8def\u7531&#xff08;Parallel Routes&#xff09;&#xff1a;\u7a7a\u95f4\u91cd\u53e0\u7684\u4ea4\u54cd\u4e50<\/p>\n<p>\u5728 4.2 \u8282\u4e2d\u6211\u4eec\u63d0\u5230\u4e86\u63d2\u69fd&#xff08;Slot&#xff09;&#xff0c;\u800c\u5e76\u884c\u8def\u7531\u6b63\u662f\u8fd9\u4e00\u673a\u5236\u7684\u9ad8\u7ea7\u5f62\u6001\u3002\u5b83\u5141\u8bb8\u4f60\u5728\u540c\u4e00\u4e2a\u89c6\u56fe\u4e2d&#xff0c;\u5e76\u884c\u5730\u6e32\u67d3\u4e92\u4e0d\u5e72\u6270\u7684\u72ec\u7acb\u8def\u5f84\u3002<\/p>\n<p>1. \u72ec\u7acb\u72b6\u6001\u673a\u7684\u5408\u594f<\/p>\n<p>\u901a\u8fc7\u00a0&#064;folder\u00a0\u8bed\u6cd5&#xff0c;\u4f60\u53ef\u4ee5\u5c06\u9875\u9762\u62c6\u5206\u4e3a\u591a\u4e2a\u72ec\u7acb\u547d\u540d\u7684\u63d2\u69fd\u3002\u6bcf\u4e00\u4e2a\u63d2\u69fd\u90fd\u6709\u81ea\u5df1\u7684\u8def\u7531\u903b\u8f91&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u5f53\u4f60\u5728\u4eea\u8868\u76d8\u9875\u9762\u5bfc\u822a\u65f6&#xff0c;\u5de6\u4fa7\u7684\u7edf\u8ba1\u6570\u636e\u53ef\u4ee5\u4fdd\u6301\u4e0d\u53d8&#xff0c;\u800c\u53f3\u4fa7\u7684\u56fe\u8868\u8be6\u60c5\u5374\u5728\u968f\u7740 URL \u53c2\u6570\u52a8\u6001\u5207\u6362\u3002<\/p>\n<\/li>\n<li>\n<p>\u67b6\u6784\u7cbe\u9ad3&#xff1a;\u5b83\u89e3\u51b3\u4e86\u5168\u6808\u5f00\u53d1\u4e2d\u201c\u5c40\u90e8\u5237\u65b0\u201d\u7684\u75db\u70b9&#xff0c;\u4e14\u4fdd\u6301\u4e86 URL \u7684\u53ef\u540c\u6b65\u6027\u2014\u2014\u4f60\u53ef\u4ee5\u76f4\u63a5\u5206\u4eab\u8fd9\u4e2a\u5e26\u6709\u7279\u5b9a\u72b6\u6001\u7684\u590d\u6742\u94fe\u63a5\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u72b6\u6001\u7684\u201c\u6761\u4ef6\u6e32\u67d3\u201d<\/p>\n<p>\u5e76\u884c\u8def\u7531\u8fd8\u652f\u6301\u6761\u4ef6\u6e32\u67d3&#xff08;Conditional Routes&#xff09;\u3002\u4f60\u53ef\u4ee5\u6839\u636e\u7528\u6237\u7684\u6743\u9650\u6216\u5f53\u524d\u7684\u72b6\u6001&#xff0c;\u51b3\u5b9a\u5728\u67d0\u4e2a\u63d2\u69fd\u4e2d\u663e\u793a\u54ea\u4e2a\u8def\u7531\u7684\u5185\u5bb9\u3002\u8fd9\u79cd\u201c\u7a7a\u95f4\u5207\u6362\u201d\u4e0d\u518d\u4f9d\u8d56\u4e8e\u590d\u6742\u7684 JS \u4e09\u5143\u8fd0\u7b97&#xff0c;\u800c\u662f\u56de\u5f52\u5230\u7b80\u6d01\u7684\u8def\u7531\u7ea6\u5b9a\u4e2d\u3002<\/p>\n<p>\u56db\u3001 \u6027\u80fd\u7684\u5e55\u540e&#xff1a;\u751f\u6210\u9759\u6001\u53c2\u6570&#xff08;generateStaticParams&#xff09;<\/p>\n<p>\u52a8\u6001\u8def\u7531\u867d\u7136\u7075\u6d3b&#xff0c;\u4f46\u9891\u7e41\u7684\u5b9e\u65f6\u67e5\u8be2&#xff08;SSR&#xff09;\u53ef\u80fd\u5e26\u6765\u6027\u80fd\u538b\u529b\u3002Next.js \u63d0\u4f9b\u4e86\u6027\u80fd\u52a0\u901f\u5668&#xff1a;generateStaticParams\u3002<\/p>\n<p>\u5b83\u5141\u8bb8\u4f60\u5728\u6784\u5efa\u65f6&#xff0c;\u9884\u6d4b\u6027\u5730\u751f\u6210\u6240\u6709\u53ef\u80fd\u7684\u52a8\u6001 ID\u3002<\/p>\n<ul>\n<li>\n<p>SSR \u8f6c SSG&#xff1a;\u901a\u8fc7\u9884\u5148\u63d0\u53d6\u6240\u6709\u7684\u5546\u54c1 ID&#xff0c;\u539f\u672c\u52a8\u6001\u7684\u9875\u9762\u4f1a\u5728\u6784\u5efa\u9636\u6bb5\u8f6c\u5316\u4e3a\u9759\u6001\u7684 HTML \u5b58\u653e\u5728 CDN \u4e0a\u3002<\/p>\n<\/li>\n<li>\n<p>\u52a8\u6001\u611f\u77e5\u4e0e\u9759\u6001\u6781\u81f4\u7684\u7edf\u4e00&#xff1a;\u8fd9\u4f53\u73b0\u4e86 Next.js \u7684\u5de5\u7a0b\u5316\u54f2\u5b66\u2014\u2014\u65e2\u8981\u4e1a\u52a1\u7684\u7075\u6d3b\u6027&#xff08;\u52a8\u6001\u8def\u7531&#xff09;&#xff0c;\u4e5f\u8981\u6027\u80fd\u7684\u7edd\u5bf9\u5316&#xff08;\u9759\u6001\u751f\u6210&#xff09;\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e94\u3001 \u54f2\u5b66\u601d\u8fa8&#xff1a;\u4ece\u201c\u6b7b\u8def\u5f84\u201d\u5230\u201c\u6d3b\u8def\u7531\u201d<\/p>\n<p>\u4f20\u7edf\u7684 Web \u8def\u7531\u662f\u201c\u9759\u6001\u201d\u4e14\u201c\u88ab\u52a8\u201d\u7684&#xff0c;\u5b83\u50cf\u4e00\u53e0\u4e8b\u5148\u5370\u597d\u7684\u4f20\u5355\u3002\u800c Next.js \u7684\u52a8\u6001\u611f\u77e5\u4f53\u7cfb\u662f\u201c\u52a8\u6001\u201d\u4e14\u201c\u4e3b\u52a8\u201d\u7684\u3002<\/p>\n<ul>\n<li>\n<p>[id]\u00a0\u662f\u5bf9\u4e2a\u4f53\u7684\u611f\u77e5\u3002<\/p>\n<\/li>\n<li>\n<p>[&#8230;slug]\u00a0\u662f\u5bf9\u5c42\u7ea7\u7684\u611f\u77e5\u3002<\/p>\n<\/li>\n<li>\n<p>Parallel Routes\u00a0\u662f\u5bf9\u7a7a\u95f4\u7684\u611f\u77e5\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u8fd9\u79cd\u591a\u7ef4\u5ea6\u7684\u611f\u77e5\u80fd\u529b&#xff0c;\u8ba9 URL \u91cd\u65b0\u6210\u4e3a\u4e86 Web \u5e94\u7528\u7684\u201c\u4e00\u7b49\u516c\u6c11\u201d\u3002URL \u4e0d\u518d\u53ea\u662f\u4e00\u4e2a\u5b57\u7b26\u4e32&#xff0c;\u5b83\u662f\u4e00\u4e2a\u72b6\u6001\u5bb9\u5668&#xff0c;\u627f\u8f7d\u7740\u5e94\u7528\u5728\u65f6\u95f4&#xff08;\u52a8\u6001\u53c2\u6570&#xff09;\u548c\u7a7a\u95f4&#xff08;\u5e76\u884c\u5e03\u5c40&#xff09;\u4e0a\u7684\u6240\u6709\u610f\u56fe\u3002<\/p>\n<p>\u516d\u3001 \u603b\u7ed3&#xff1a;\u6307\u5f15\u65e0\u9650\u53ef\u80fd\u7684\u7f57\u76d8<\/p>\n<p>\u638c\u63e1\u4e86\u52a8\u6001\u611f\u77e5&#xff0c;\u4f60\u5c31\u638c\u63e1\u4e86 App Router \u7684\u201c\u53d8\u5e7b\u4e4b\u9053\u201d\u3002\u4f60\u6240\u6784\u5efa\u7684\u5e94\u7528\u4e0d\u518d\u662f\u50f5\u786c\u7684\u51e0\u4e2a\u9875\u9762&#xff0c;\u800c\u662f\u4e00\u4e2a\u80fd\u591f\u968f\u7740\u6570\u636e\u6d41\u52a8\u3001\u968f\u7740\u7528\u6237\u610f\u56fe\u81ea\u53d1\u6f14\u8fdb\u7684\u6709\u673a\u7cfb\u7edf\u3002<\/p>\n<ul>\n<li>\n<p>\u7cbe\u51c6\u5ea6&#xff1a;\u901a\u8fc7\u00a0[id]\u00a0\u7cbe\u786e\u6253\u51fb\u6bcf\u4e00\u4e2a\u6570\u636e\u70b9\u3002<\/p>\n<\/li>\n<li>\n<p>\u5e7f\u5ea6&#xff1a;\u901a\u8fc7\u901a\u914d\u8def\u7531\u5305\u7f57\u4e07\u8c61\u3002<\/p>\n<\/li>\n<li>\n<p>\u6df1\u5ea6&#xff1a;\u901a\u8fc7\u5e76\u884c\u8def\u7531\u91cd\u5851\u7a7a\u95f4\u4f53\u9a8c\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u201c\u52a8\u6001\u611f\u77e5\u201d\u4e0d\u4ec5\u662f\u6280\u672f\u7684\u7a81\u7834&#xff0c;\u66f4\u662f\u5bf9 Web \u672c\u8d28\u7684\u56de\u5f52\u2014\u2014\u5373 Web \u662f\u6d41\u52a8\u7684\u3001\u5173\u8054\u7684\u3001\u4e0d\u53ef\u88ab\u5b8c\u5168\u9884\u77e5\u7684\u3002 \u5f53\u4f60\u7684\u8def\u7531\u7cfb\u7edf\u5177\u5907\u4e86\u8fd9\u79cd\u611f\u77e5\u529b&#xff0c;\u4f60\u4fbf\u62e5\u6709\u4e86\u4e00\u4e2a\u53ef\u4ee5\u6307\u5f15\u65e0\u9650\u53ef\u80fd\u7684\u5168\u6808\u7f57\u76d8\u3002\u7136\u800c&#xff0c;\u5728\u901a\u5f80\u65e0\u9650\u53ef\u80fd\u7684\u822a\u7a0b\u4e2d&#xff0c;\u5371\u9669\u603b\u662f\u5982\u5f71\u968f\u5f62\u3002\u5f53\u6570\u636e\u52a0\u8f7d\u5ef6\u8fdf\u3001\u903b\u8f91\u53d1\u751f\u9519\u8bef\u6216\u8def\u5f84\u51ed\u7a7a\u6d88\u5931\u65f6&#xff0c;\u6211\u4eec\u7684\u7cfb\u7edf\u53c8\u8be5\u5982\u4f55\u81ea\u5904&#xff1f;\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u63a2\u8ba8\u7684\u7ec8\u6781\u9632\u7ebf&#xff1a; \u201c\u5f02\u5e38\u5904\u7406\u201d&#xff1a;Loading \u6001\u3001Error \u8fb9\u754c\u4e0e NotFound \u7684\u4f18\u96c5\u964d\u7ea7\u3002\u60a8\u60f3\u4e86\u89e3\u5982\u4f55\u4e3a\u4f60\u7684\u5168\u6808\u5e94\u7528\u6784\u5efa\u4e00\u5957\u201c\u6c38\u4e0d\u5b95\u673a\u201d\u7684\u7528\u6237\u611f\u77e5\u9632\u7ebf\u5417&#xff1f;<\/p>\n<h3>4.4 \u201c\u5f02\u5e38\u5904\u7406\u201d\u2014\u2014Loading \u6001\u3001Error \u8fb9\u754c\u4e0e NotFound \u7684\u4f18\u96c5\u964d\u7ea7<\/h3>\n<p>\u5728 Web \u5f00\u53d1\u7684\u7406\u60f3\u56fd\u91cc&#xff0c;\u7f51\u7edc\u6c38\u8fdc\u901a\u7545&#xff0c;\u6570\u636e\u77ac\u95f4\u62b5\u8fbe&#xff0c;\u903b\u8f91\u6beb\u65e0\u7455\u75b5\u3002\u7136\u800c&#xff0c;\u73b0\u5b9e\u4e2d\u7684 Web \u5e94\u7528\u5374\u662f\u4e00\u573a\u4e0e\u201c\u4e0d\u786e\u5b9a\u6027\u201d\u7684\u7ec8\u6781\u535a\u5f08&#xff1a;\u8de8\u6d77\u4f20\u8f93\u7684\u5ef6\u8fdf\u3001\u6570\u636e\u5e93\u7684\u77ac\u65f6\u5d29\u6e83\u3001\u6216\u662f\u7528\u6237\u968f\u624b\u8f93\u5165\u7684\u4e00\u4e2a\u4e0d\u5b58\u5728\u7684 URL\u3002<\/p>\n<p>\u4e00\u4e2a\u5e73\u5eb8\u7684\u5e94\u7528\u5728\u5f02\u5e38\u9762\u524d\u4f1a\u663e\u5f97\u624b\u8db3\u65e0\u63aa\u2014\u2014\u65e0\u5c3d\u7684\u767d\u5c4f\u3001\u51b0\u51b7\u7684\u6d4f\u89c8\u5668\u62a5\u9519\u3001\u6216\u662f\u6beb\u65e0\u53cd\u9988\u7684\u5361\u6b7b\u3002\u800c\u4e00\u4e2a\u9876\u7ea7\u7684 Next.js \u5e94\u7528&#xff0c;\u5219\u4f1a\u5c06\u8fd9\u4e9b\u201c\u610f\u5916\u201d\u7eb3\u5165\u8bbe\u8ba1\u7684\u8303\u7574\u3002Next.js \u7684 App Router \u901a\u8fc7\u4e00\u5957\u58f0\u660e\u5f0f\u7684\u5f02\u5e38\u5904\u7406\u534f\u8bae&#xff0c;\u8ba9\u52a0\u8f7d\u4e2d\u3001\u9519\u8bef\u4e0e\u8d44\u6e90\u7f3a\u5931\u4e0d\u518d\u662f\u4f53\u9a8c\u7684\u65ad\u70b9&#xff0c;\u800c\u6210\u4e86\u4ea4\u4e92\u7684\u5ef6\u7eed\u3002\u672c\u8282\u6211\u4eec\u5c06\u63a2\u8ba8\u5982\u4f55\u5229\u7528\u6846\u67b6\u5185\u7f6e\u7684\u5b88\u536b\u673a\u5236&#xff0c;\u6784\u5efa\u4e00\u5957\u4f18\u96c5\u7684\u201c\u964d\u7ea7\u827a\u672f\u201d\u3002<\/p>\n<p>\u4e00\u3001\u00a0loading.tsx&#xff1a;\u5bf9\u6297\u7126\u8e81\u7684\u201c\u547c\u5438\u611f\u201d<\/p>\n<p>\u5728\u5168\u6808\u540c\u6784\u7684\u67b6\u6784\u4e0b&#xff0c;\u6570\u636e\u83b7\u53d6\u5f80\u5f80\u53d1\u751f\u5728\u670d\u52a1\u7aef\u3002\u5982\u679c\u4e00\u4e2a\u9875\u9762\u9700\u8981\u4ece\u7f13\u6162\u7684 API \u4e2d\u8bfb\u53d6\u6570\u636e&#xff0c;\u7528\u6237\u5728\u70b9\u51fb\u8df3\u8f6c\u540e&#xff0c;\u6d4f\u89c8\u5668\u4f1a\u9677\u5165\u4e00\u6bb5\u4ee4\u4eba\u4e0d\u5b89\u7684\u6c89\u5bc2\u3002<\/p>\n<p>1. \u5373\u65f6\u53cd\u9988\u7684\u5fc3\u7406\u5b66<\/p>\n<p>loading.tsx\u00a0\u662f Next.js \u57fa\u4e8e React Suspense \u81ea\u52a8\u67b6\u8bbe\u7684\u52a0\u8f7d\u5b88\u536b\u3002\u5f53\u4f60\u8fdb\u5165\u4e00\u4e2a\u8def\u7531\u6587\u4ef6\u5939\u65f6&#xff0c;Next.js \u4f1a\u7acb\u5373\u6e32\u67d3\u8be5\u6587\u4ef6\u4e2d\u7684 UI&#xff0c;\u800c\u65e0\u9700\u7b49\u5f85\u6570\u636e\u52a0\u8f7d\u5b8c\u6210\u3002<\/p>\n<ul>\n<li>\n<p>\u611f\u77e5\u6027\u80fd&#xff08;Perceived Performance&#xff09;&#xff1a;\u901a\u8fc7\u5c55\u793a\u9aa8\u67b6\u5c4f&#xff08;Skeleton Screen&#xff09;\u6216\u8fdb\u5ea6\u6761&#xff0c;\u5e94\u7528\u5411\u7528\u6237\u4f20\u9012\u4e86\u4e00\u4e2a\u79ef\u6781\u7684\u4fe1\u53f7\u2014\u2014\u201c\u6211\u6b63\u5728\u4e3a\u4f60\u52aa\u529b&#xff0c;\u8bf7\u7a0d\u5019\u201d\u3002\u8fd9\u79cd\u5fc3\u7406\u4e0a\u7684\u786e\u8ba4&#xff0c;\u8fdc\u6bd4\u7269\u7406\u4e0a\u7684\u52a0\u901f\u66f4\u80fd\u7559\u4f4f\u7528\u6237\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u5c40\u90e8\u6d41\u5f0f\u4f20\u8f93&#xff08;Streaming&#xff09;<\/p>\n<p>Next.js \u5141\u8bb8\u5c06\u9875\u9762\u62c6\u5206\u4e3a\u591a\u4e2a Suspense \u8fb9\u754c\u3002\u8fd9\u610f\u5473\u7740\u4f60\u7684\u5bfc\u822a\u680f\u548c\u4fa7\u8fb9\u680f\u53ef\u4ee5\u77ac\u95f4\u51fa\u73b0&#xff0c;\u800c\u7b28\u91cd\u7684\u5185\u5bb9\u533a\u5219\u7531\u00a0loading.tsx\u00a0\u5360\u4f4d&#xff0c;\u5f85\u6570\u636e\u5c31\u7eea\u540e\u5e73\u6ed1\u66ff\u6362\u3002<\/p>\n<p>\u4e8c\u3001\u00a0error.tsx&#xff1a;\u903b\u8f91\u5d29\u6e83\u7684\u201c\u5b89\u5168\u6c14\u56ca\u201d<\/p>\n<p>\u4ee3\u7801\u662f\u4eba\u5199\u7684&#xff0c;\u800c\u4eba\u603b\u4f1a\u72af\u9519\u3002\u5f53\u670d\u52a1\u5668\u6e32\u67d3\u51fa\u9519\u6216 API \u8fd4\u56de\u4e86\u975e\u9884\u671f\u7684 500 \u72b6\u6001\u65f6&#xff0c;\u6211\u4eec\u4e0d\u80fd\u8ba9\u6574\u4e2a\u5e94\u7528\u968f\u4e4b\u74e6\u89e3\u3002<\/p>\n<p>1. \u5c40\u90e8\u5316\u7684\u635f\u5bb3\u63a7\u5236<\/p>\n<p>error.tsx\u00a0\u662f\u4e00\u4e2a\u7279\u6b8a\u7684\u5ba2\u6237\u7aef\u7ec4\u4ef6&#xff08;Client Component&#xff09;&#xff0c;\u5b83\u5145\u5f53\u4e86\u8be5\u8def\u7531\u6bb5\u7684\u00a0Error Boundary&#xff08;\u9519\u8bef\u8fb9\u754c&#xff09;\u3002<\/p>\n<ul>\n<li>\n<p>\u9694\u79bb\u6027&#xff1a;\u5982\u679c\u4fa7\u8fb9\u680f\u7684\u5c0f\u7ec4\u4ef6\u5d29\u4e86&#xff0c;\u53ea\u6709\u8be5\u5c0f\u7ec4\u4ef6\u4f1a\u663e\u793a\u9519\u8bef UI&#xff0c;\u800c\u4e3b\u5185\u5bb9\u533a\u548c\u5168\u5c40\u5bfc\u822a\u4f9d\u7136\u53ef\u4ee5\u6b63\u5e38\u8fd0\u884c\u3002\u8fd9\u79cd\u201c\u8231\u5ba4\u9694\u79bb\u201d\u7684\u8bbe\u8ba1&#xff0c;\u9632\u6b62\u4e86\u5c40\u90e8\u9519\u8bef\u6f14\u53d8\u6210\u5168\u5c40\u707e\u96be\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u8d4b\u4e88\u7528\u6237\u201c\u81ea\u6108\u201d\u7684\u80fd\u529b<\/p>\n<p>\u4f18\u79c0\u7684\u9519\u8bef\u9875\u9762\u7edd\u4e0d\u53ea\u662f\u4e00\u4e2a\u62a5\u9519\u4fe1\u606f\u3002error.tsx\u00a0\u63a5\u6536\u4e00\u4e2a\u00a0reset\u00a0\u51fd\u6570&#xff0c;\u5141\u8bb8\u7528\u6237\u5c1d\u8bd5\u5728\u4e0d\u5237\u65b0\u6574\u4e2a\u9875\u9762\u7684\u60c5\u51b5\u4e0b\u91cd\u65b0\u6e32\u67d3\u3002<\/p>\n<ul>\n<li>\n<p>\u4ea4\u4e92\u54f2\u5b66&#xff1a;\u4e0e\u5176\u8ba9\u7528\u6237\u65e0\u5948\u5730\u6309\u4e0b\u00a0F5&#xff0c;\u4e0d\u5982\u63d0\u4f9b\u4e00\u4e2a\u201c\u91cd\u8bd5\u201d\u6309\u94ae&#xff0c;\u8fd9\u4f53\u73b0\u4e86\u6846\u67b6\u5bf9\u7528\u6237\u4e3b\u52a8\u6743\u7684\u5c0a\u91cd\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e09\u3001\u00a0not-found.tsx&#xff1a;\u6d88\u5931\u65f6\u7a7a\u7684\u201c\u6307\u8def\u660e\u706f\u201d<\/p>\n<p>\u5f53\u52a8\u6001\u8def\u7531\u65e0\u6cd5\u6355\u6349\u5230\u5bf9\u5e94\u7684\u6570\u636e&#xff0c;\u6216\u8005\u7528\u6237\u8bbf\u95ee\u4e86\u4e00\u4e2a\u8352\u829c\u7684\u8def\u5f84\u65f6&#xff0c;\u6211\u4eec\u9700\u8981\u5904\u7406 404 \u72b6\u6001\u3002<\/p>\n<p>1. \u7f16\u7a0b\u5316\u7684 404<\/p>\n<p>\u5728 Next.js \u4e2d&#xff0c;\u4f60\u53ef\u4ee5\u901a\u8fc7\u8c03\u7528\u00a0notFound()\u00a0\u51fd\u6570\u4e3b\u52a8\u89e6\u53d1\u8fd9\u4e2a UI\u3002<\/p>\n<ul>\n<li>\n<p>\u5e94\u7528\u573a\u666f&#xff1a;\u5728\u00a0page.tsx\u00a0\u4e2d\u67e5\u8be2\u6570\u636e\u5e93&#xff0c;\u53d1\u73b0 ID \u4e3a\u00a0999\u00a0\u7684\u5546\u54c1\u5e76\u4e0d\u5b58\u5728\u3002\u6b64\u65f6\u8c03\u7528\u00a0notFound()&#xff0c;Next.js \u4f1a\u81ea\u52a8\u505c\u6b62\u5f53\u524d\u6e32\u67d3&#xff0c;\u5e76\u663e\u793a\u6700\u8fd1\u7684\u00a0not-found.tsx\u00a0\u5185\u5bb9\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u4e0a\u4e0b\u6587\u4fdd\u7559\u7684\u964d\u7ea7<\/p>\n<p>\u4e0d\u540c\u4e8e\u4f20\u7edf\u7684\u5168\u5c40 404 \u9875\u9762&#xff0c;not-found.tsx\u00a0\u4e5f\u53ef\u4ee5\u662f\u5d4c\u5957\u7684\u3002\u8fd9\u610f\u5473\u7740\u7528\u6237\u5728\u00a0\/dashboard\u00a0\u4e0b\u8ff7\u8def\u65f6&#xff0c;\u770b\u5230\u7684 404 \u4f9d\u7136\u5305\u88f9\u5728\u4eea\u8868\u76d8\u7684\u5bfc\u822a\u5e03\u5c40\u4e2d\u3002\u8fd9\u79cd\u201c\u8bed\u5883\u4e0d\u4e22\u5931\u201d\u7684\u8bbe\u8ba1&#xff0c;\u6781\u5927\u964d\u4f4e\u4e86\u7528\u6237\u8d70\u5931\u540e\u7684\u632b\u8d25\u611f\u3002<\/p>\n<p>\u56db\u3001 \u67b6\u6784\u7684\u5fc3\u6cd5&#xff1a;\u58f0\u660e\u5f0f\u80dc\u8fc7\u547d\u4ee4\u5f0f<\/p>\n<p>\u4e3a\u4ec0\u4e48 Next.js \u575a\u6301\u4f7f\u7528\u7279\u6b8a\u6587\u4ef6&#xff08;Loading\/Error\/NotFound&#xff09;\u6765\u5904\u7406\u5f02\u5e38&#xff1f;<\/p>\n<p>\u4f5c\u4e3a\u5168\u6808\u4e13\u5bb6&#xff0c;\u6211\u4eec\u9700\u8981\u6d1e\u5bdf\u5176\u80cc\u540e\u7684\u5de5\u7a0b\u5316\u964d\u7ef4&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u89e3\u8026\u903b\u8f91&#xff1a;\u4f60\u7684\u4e1a\u52a1\u7ec4\u4ef6&#xff08;page.tsx&#xff09;\u53ea\u9700\u8981\u5173\u6ce8\u201c\u6210\u529f\u8def\u5f84\u201d\u3002\u6240\u6709\u7684\u7b49\u5f85\u72b6\u6001\u548c\u5f02\u5e38\u903b\u8f91\u88ab\u5265\u79bb\u5230\u4e86\u72ec\u7acb\u7684\u6587\u4ef6\u4e2d&#xff0c;\u4ee3\u7801\u7684\u53ef\u8bfb\u6027\u5f97\u5230\u4e86\u8d28\u7684\u98de\u8dc3\u3002<\/p>\n<\/li>\n<li>\n<p>\u7edf\u4e00\u7684\u89c6\u89c9\u89c4\u8303&#xff1a;\u901a\u8fc7\u5728\u5168\u5c40\u6216\u7236\u7ea7\u5b9a\u4e49\u8fd9\u4e9b\u8fb9\u754c&#xff0c;\u4f60\u786e\u4fdd\u4e86\u6574\u4e2a\u5e94\u7528\u5728\u9762\u5bf9\u9519\u8bef\u65f6\u5177\u6709\u4e00\u81f4\u7684\u89c6\u89c9\u98ce\u683c\u548c\u4ea4\u4e92\u903b\u8f91\u3002<\/p>\n<\/li>\n<li>\n<p>\u81ea\u52a8\u5316\u7684\u8def\u7531\u611f\u77e5&#xff1a;\u6846\u67b6\u5728\u5e95\u5c42\u4e3a\u4f60\u5904\u7406\u4e86\u590d\u6742\u7684\u6e32\u67d3\u4e2d\u65ad\u4e0e\u6062\u590d\u903b\u8f91&#xff0c;\u4f60\u65e0\u9700\u518d\u624b\u52a8\u7f16\u5199\u7e41\u7410\u7684\u00a0if (loading) return &#8230;\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e94\u3001 \u7ed3\u8bed&#xff1a;\u4f18\u96c5\u964d\u7ea7&#xff0c;\u65b9\u663e\u5927\u5e08\u672c\u8272<\/p>\n<p>\u8861\u91cf\u4e00\u4e2a\u5168\u6808\u5e94\u7528\u7684\u6210\u719f\u5ea6&#xff0c;\u4e0d\u4ec5\u8981\u770b\u5b83\u5728\u9633\u5149\u707f\u70c2\u65f6\u7684\u5954\u8dd1\u901f\u5ea6&#xff0c;\u66f4\u8981\u770b\u5b83\u5728\u9634\u4e91\u5bc6\u5e03\u65f6\u7684\u5e94\u5bf9\u59ff\u6001\u3002<\/p>\n<ul>\n<li>\n<p>Loading\u00a0\u662f\u5bf9\u65f6\u95f4\u7684\u6e29\u67d4\u5316\u89e3&#xff1b;<\/p>\n<\/li>\n<li>\n<p>Error\u00a0\u662f\u5bf9\u5d29\u6e83\u7684\u4f53\u9762\u514b\u5236&#xff1b;<\/p>\n<\/li>\n<li>\n<p>NotFound\u00a0\u662f\u5bf9\u8ff7\u5931\u7684\u6df1\u60c5\u6307\u5f15\u3002<\/p>\n<\/li>\n<\/ul>\n<p>Next.js \u7684\u8def\u7531\u5f02\u5e38\u5904\u7406\u4f53\u7cfb&#xff0c;\u662f\u4e00\u5957\u5173\u4e8e\u201c\u5bb9\u9519\u201d\u7684\u54f2\u5b66\u3002\u5b83\u627f\u8ba4\u4e86\u7f51\u7edc\u4e16\u754c\u7684\u7834\u788e\u4e0e\u8106\u5f31&#xff0c;\u5e76\u63d0\u4f9b\u4e86\u4e00\u5957\u7cbe\u5bc6\u7684\u7f57\u76d8&#xff0c;\u786e\u4fdd\u65e0\u8bba\u53d1\u751f\u4ec0\u4e48&#xff0c;\u5e94\u7528\u59cb\u7ec8\u80fd\u4ee5\u4e00\u79cd\u4f18\u96c5\u3001\u4e13\u4e1a\u3001\u4e14\u5bcc\u6709\u540c\u60c5\u5fc3\u7684\u59ff\u6001&#xff0c;\u5b88\u62a4\u7740\u7528\u6237\u7684\u6bcf\u4e00\u6b21\u70b9\u51fb\u3002<\/p>\n<p>\u81f3\u6b64&#xff0c;\u7b2c\u56db\u7ae0\u201c\u8def\u7531\u7684\u7f57\u76d8\u201d\u5df2\u5168\u7bc7\u5b8c\u7ed3\u3002\u6211\u4eec\u4ece\u6587\u4ef6\u7cfb\u7edf\u7684\u7269\u7406\u5e03\u5c40&#xff0c;\u8d70\u5230\u4e86\u5f02\u5e38\u5904\u7406\u7684\u5fc3\u667a\u8fb9\u754c\u3002\u4f60\u5df2\u7ecf\u638c\u63e1\u4e86 Next.js \u4e2d\u6700\u5f3a\u5927\u7684\u7a7a\u95f4\u7ec4\u7ec7\u80fd\u529b\u3002\u63a5\u4e0b\u6765&#xff0c;\u6211\u4eec\u5c06\u5f00\u542f\u7b2c\u4e94\u7ae0&#xff1a;\u6570\u636e\u7684\u5fc3\u6cd5\u2014\u2014\u83b7\u53d6\u3001\u7f13\u5b58\u4e0e\u540c\u6b65\u3002<\/p>\n<h2>\u7b2c5\u7ae0&#xff1a;\u6570\u636e\u7684\u5fc3\u6cd5\u2014\u2014\u83b7\u53d6\u3001\u7f13\u5b58\u4e0e\u540c\u6b65<\/h2>\n<ul>\n<li>\n<p>5.1 \u201c\u76f4\u53d6\u6e90\u5934\u201d&#xff1a;\u00a0\u5728\u670d\u52a1\u7aef\u7ec4\u4ef6\u4e2d\u76f4\u63a5\u8bf7\u6c42\u6570\u636e\u5e93\u4e0e API<\/p>\n<\/li>\n<li>\n<p>5.2 \u201c\u8bb0\u5fc6\u5316\u4e0e\u7f13\u5b58\u201d&#xff1a;\u00a0\u7406\u89e3 Next.js \u5bf9\u00a0fetch\u00a0\u7684\u539f\u751f\u589e\u5f3a<\/p>\n<\/li>\n<li>\n<p>5.3 \u201c\u670d\u52a1\u5668\u64cd\u4f5c\u201d (Server Actions)&#xff1a;\u00a0\u544a\u522b\u5197\u4f59 API&#xff0c;\u5b9e\u73b0\u51fd\u6570\u5f0f\u8868\u5355\u63d0\u4ea4<\/p>\n<\/li>\n<li>\n<p>5.4 \u201c\u5b9e\u65f6\u66f4\u65b0\u201d&#xff1a;\u00a0\u6570\u636e\u91cd\u65b0\u9a8c\u8bc1&#xff08;Revalidation&#xff09;\u7684\u7b56\u7565\u9009\u62e9<\/p>\n<\/li>\n<\/ul>\n<h3>5.1 \u201c\u76f4\u53d6\u6e90\u5934\u201d\u2014\u2014\u5728\u670d\u52a1\u7aef\u7ec4\u4ef6\u4e2d\u76f4\u63a5\u8bf7\u6c42\u6570\u636e\u5e93\u4e0e API<\/h3>\n<p>\u5982\u679c\u8bf4\u7b2c\u56db\u7ae0\u7684\u8def\u7531\u7cfb\u7edf\u4e3a\u6211\u4eec\u642d\u5efa\u4e86\u5e94\u7528\u7684\u201c\u9aa8\u67b6\u201d&#xff0c;\u90a3\u4e48\u6570\u636e\u4fbf\u662f\u6d41\u6dcc\u5176\u4e2d\u7684\u201c\u8840\u6db2\u201d\u3002\u5728\u4f20\u7edf\u7684 React \u8303\u5f0f\u4e2d&#xff0c;\u6570\u636e\u83b7\u53d6&#xff08;Data Fetching&#xff09;\u5f80\u5f80\u662f\u4e00\u573a\u6f2b\u957f\u800c\u5fc3\u788e\u7684\u8fdc\u5f81&#xff1a;\u4f60\u9700\u8981\u5728\u5ba2\u6237\u7aef\u7ef4\u62a4\u52a0\u8f7d\u72b6\u6001&#xff0c;\u5728\u00a0useEffect\u00a0\u4e2d\u53d1\u8d77\u7f51\u7edc\u8bf7\u6c42&#xff0c;\u5904\u7406\u8de8\u57df\u3001\u5904\u7406\u7ade\u6001&#xff0c;\u6700\u7ec8\u8fd8\u8981\u5fcd\u53d7\u56e0\u201c\u6570\u636e\u7011\u5e03\u201d\u5bfc\u81f4\u7684\u9875\u9762\u6296\u52a8\u3002<\/p>\n<p>Next.js \u7684 App Router \u5219\u5f7b\u5e95\u7ec8\u7ed3\u4e86\u8fd9\u79cd\u201c\u6d41\u4ea1\u5f0f\u201d\u7684\u6570\u636e\u83b7\u53d6\u3002\u5b83\u63d0\u5021\u4e00\u79cd\u201c\u56de\u5f52\u539f\u70b9\u201d\u7684\u54f2\u5b66&#xff1a;\u5728\u670d\u52a1\u7aef\u7ec4\u4ef6&#xff08;RSC&#xff09;\u4e2d&#xff0c;\u50cf\u7f16\u5199\u811a\u672c\u4e00\u6837&#xff0c;\u76f4\u63a5\u5728\u4ee3\u7801\u7684\u6e90\u5934\u6293\u53d6\u6570\u636e\u3002\u00a0\u8fd9\u4e00\u53d8\u9769\u4e0d\u4ec5\u662f\u8bed\u6cd5\u4e0a\u7684\u7b80\u5316&#xff0c;\u66f4\u662f Web \u67b6\u6784\u7684\u4e00\u6b21\u91cd\u5927\u7684\u6743\u529b\u56de\u5f52\u3002<\/p>\n<p>\u4e00\u3001 \u6d88\u9664\u201c\u4e2d\u95f4\u5546\u201d&#xff1a;\u544a\u522b API \u5c42\u7684\u5197\u4f59<\/p>\n<p>\u5728\u8fc7\u53bb\u5341\u5e74\u7684\u524d\u540e\u7aef\u5206\u79bb\u6f6e\u4e2d&#xff0c;\u6211\u4eec\u4e60\u60ef\u4e86\u8fd9\u6837\u7684\u94fe\u8def&#xff1a;<\/p>\n<p>\u6570\u636e\u5e93 $\\\\rightarrow$ \u540e\u7aef\u63a5\u53e3&#xff08;REST\/GraphQL&#xff09; $\\\\rightarrow$ \u7f51\u7edc\u4f20\u8f93 $\\\\rightarrow$ \u524d\u7aef Fetch $\\\\rightarrow$ \u72b6\u6001\u7ba1\u7406 $\\\\rightarrow$ UI \u6e32\u67d3<\/p>\n<p>\u800c\u5728 Next.js \u7684\u670d\u52a1\u7aef\u7ec4\u4ef6\u4e2d&#xff0c;\u8fd9\u4e2a\u94fe\u8def\u88ab\u6781\u5ea6\u538b\u7f29&#xff1a;<\/p>\n<p>\u6570\u636e\u5e93 $\\\\rightarrow$ UI \u6e32\u67d3<\/p>\n<p>1. \u7269\u7406\u8ddd\u79bb\u7684\u6d88\u5931<\/p>\n<p>\u7531\u4e8e\u670d\u52a1\u7aef\u7ec4\u4ef6\u76f4\u63a5\u8fd0\u884c\u5728\u670d\u52a1\u5668\u73af\u5883&#xff0c;\u5b83\u4e0e\u6570\u636e\u5e93\u6216\u5185\u90e8\u5fae\u670d\u52a1\u7684\u7269\u7406\u8ddd\u79bb\u51e0\u4e4e\u4e3a\u96f6\u3002\u8fd9\u610f\u5473\u7740\u4f60\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\u00a0Prisma\u3001Drizzle\u00a0\u6216\u00a0Mongoose\u00a0\u5728\u7ec4\u4ef6\u5185\u67e5\u8be2\u6570\u636e\u3002<\/p>\n<p>\/\/ \u8fd9\u662f\u4e00\u4e2a\u666e\u901a\u7684 Server Component<br \/>\nexport default async function ProductPage({ id }) {<br \/>\n  \/\/ \u6ca1\u6709\u4efb\u4f55 fetch \u635f\u8017&#xff0c;\u76f4\u63a5\u4ece\u6e90\u5934\u53d6\u6c34<br \/>\n  const product &#061; await db.product.findUnique({ where: { id } });<br \/>\n  return &lt;main&gt;{product.name}&lt;\/main&gt;;<br \/>\n}<\/p>\n<p>2. \u5b89\u5168\u6027\u7684\u5929\u7136\u5c4f\u969c<\/p>\n<p>\u5f53\u4f60\u201c\u76f4\u53d6\u6e90\u5934\u201d\u65f6&#xff0c;\u6240\u6709\u654f\u611f\u7684 API \u79d8\u94a5\u3001\u6570\u636e\u5e93\u8fde\u63a5\u5b57\u7b26\u4e32\u548c\u590d\u6742\u7684\u67e5\u8be2\u903b\u8f91\u90fd\u6c38\u8fdc\u7559\u5728\u670d\u52a1\u5668\u4e0a\u3002\u6d4f\u89c8\u5668\u63a5\u6536\u5230\u7684\u53ea\u6709\u7eaf\u7cb9\u7684 HTML\u3002\u8fd9\u79cd\u201c\u7269\u7406\u9694\u79bb\u201d\u8ba9\u5168\u6808\u5f00\u53d1\u5728\u62e5\u6709\u6781\u9ad8\u7075\u6d3b\u6027\u7684\u540c\u65f6&#xff0c;\u5177\u5907\u4e86\u519b\u4e8b\u7ea7\u7684\u5b89\u5168\u6027\u3002<\/p>\n<p>\u4e8c\u3001 \u5f02\u6b65\u7ec4\u4ef6&#xff1a;async\/await\u00a0\u7684\u5e73\u6743\u8fd0\u52a8<\/p>\n<p>\u5728 Next.js \u4e4b\u524d&#xff0c;\u5728 React \u7ec4\u4ef6\u4e2d\u4f7f\u7528\u00a0async\/await\u00a0\u66fe\u662f\u9065\u4e0d\u53ef\u53ca\u7684\u68a6\u60f3\u3002App Router \u901a\u8fc7\u670d\u52a1\u7aef\u7ec4\u4ef6\u5b9e\u73b0\u4e86\u8fd9\u4e00\u201c\u5e73\u6743\u201d\u3002<\/p>\n<p>1. \u7ebf\u6027\u601d\u7ef4\u7684\u56de\u5f52<\/p>\n<p>\u5728\u5ba2\u6237\u7aef\u5904\u7406\u5f02\u6b65\u65f6&#xff0c;\u4f60\u5fc5\u987b\u7ba1\u7406\u00a0isLoading\u3001isError\u00a0\u8fd9\u79cd\u7834\u788e\u7684\u72b6\u6001\u3002\u4f46\u5728\u670d\u52a1\u7aef\u7ec4\u4ef6\u4e2d&#xff0c;\u4f60\u53ef\u4ee5\u50cf\u5199\u666e\u901a\u7684 Node.js \u4ee3\u7801\u4e00\u6837&#xff0c;\u7528\u540c\u6b65\u7684\u76f4\u89c9\u5199\u5f02\u6b65\u7684\u903b\u8f91\u3002<\/p>\n<ul>\n<li>\n<p>\u8fd9\u79cd\u7ebf\u6027\u7684\u4ee3\u7801\u7ed3\u6784&#xff0c;\u6781\u5927\u5730\u964d\u4f4e\u4e86\u5fc3\u667a\u8d1f\u62c5\u3002\u4ee3\u7801\u5373\u903b\u8f91&#xff0c;\u903b\u8f91\u5373\u6d41\u7a0b\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u89e3\u51b3\u201c\u6570\u636e\u7011\u5e03\u201d\u7684\u65b0\u6b66\u5668<\/p>\n<p>\u4f20\u7edf\u67b6\u6784\u4e2d&#xff0c;\u7236\u7ec4\u4ef6\u8bf7\u6c42\u5b8c\u6570\u636e\u624d\u80fd\u6e32\u67d3\u5b50\u7ec4\u4ef6&#xff0c;\u5b50\u7ec4\u4ef6\u518d\u53bb\u8bf7\u6c42&#xff0c;\u5f62\u6210\u4e86\u4f4e\u6548\u7684\u7011\u5e03\u6d41\u3002Next.js \u9f13\u52b1\u6211\u4eec\u5229\u7528\u00a0\u5e76\u884c\u6570\u636e\u8bf7\u6c42&#xff08;Parallel Data Fetching&#xff09;&#xff1a;<\/p>\n<p>\/\/ \u540c\u65f6\u53d1\u8d77\u4e24\u4e2a\u8bf7\u6c42&#xff0c;\u4e92\u4e0d\u963b\u585e<br \/>\nconst [user, posts] &#061; await Promise.all([<br \/>\n  getUser(id),<br \/>\n  getPosts(id)<br \/>\n]);<\/p>\n<p>\u7ed3\u5408 React \u7684\u00a0Suspense&#xff0c;\u4f60\u751a\u81f3\u53ef\u4ee5\u8ba9\u5148\u5230\u8fbe\u7684\u6570\u636e\u5148\u6e32\u67d3&#xff0c;\u540e\u5230\u8fbe\u7684\u6570\u636e\u6d41\u5f0f&#xff08;Streaming&#xff09;\u6ce8\u5165\u3002\u8fd9\u79cd\u5bf9\u6570\u636e\u6d41\u7684\u9897\u7c92\u5ea6\u63a7\u5236&#xff0c;\u662f\u4f20\u7edf SPA \u67b6\u6784\u96be\u4ee5\u4f01\u53ca\u7684\u3002<\/p>\n<p>\u4e09\u3001 \u5168\u6808\u540c\u6784\u7684\u6027\u80fd\u7ea2\u5229<\/p>\n<p>\u201c\u76f4\u53d6\u6e90\u5934\u201d\u5e26\u6765\u7684\u4e0d\u4ec5\u4ec5\u662f\u5f00\u53d1\u723d\u611f&#xff0c;\u66f4\u662f\u6781\u81f4\u7684\u6027\u80fd\u538b\u69a8\u3002<\/p>\n<p>1. \u96f6\u8d1f\u8f7d\u7684\u6570\u636e\u4f20\u8f93<\/p>\n<p>\u5728\u5ba2\u6237\u7aef Fetch \u6a21\u5f0f\u4e0b&#xff0c;\u670d\u52a1\u5668\u9700\u8981\u5c06\u6570\u636e\u5e8f\u5217\u5316\u4e3a JSON&#xff0c;\u901a\u8fc7\u7f51\u7edc\u53d1\u7ed9\u524d\u7aef&#xff0c;\u524d\u7aef\u518d\u53cd\u5e8f\u5217\u5316\u3002\u5982\u679c\u4e00\u4e2a\u5217\u8868\u6709 1000 \u6761\u6570\u636e&#xff0c;\u8fd9\u4e2a JSON \u53ef\u80fd\u91cd\u8fbe\u6570 MB\u3002<\/p>\n<p>\u800c\u5728\u670d\u52a1\u7aef\u7ec4\u4ef6\u4e2d&#xff0c;\u6570\u636e\u5728\u670d\u52a1\u5668\u5185\u90e8\u6d41\u52a8&#xff0c;\u6700\u7ec8\u53d1\u9001\u7ed9\u6d4f\u89c8\u5668\u7684\u53ea\u662f\u6e32\u67d3\u540e\u7684 HTML \u7247\u6bb5\u3002\u8fd9\u79cd\u201c\u6570\u636e\u4e0d\u51fa\u6d77\u201d\u7684\u6a21\u5f0f&#xff0c;\u8ba9\u5f31\u7f51\u73af\u5883\u4e0b\u7684\u52a0\u8f7d\u901f\u5ea6\u5f97\u5230\u4e86\u8d28\u7684\u98de\u8dc3\u3002<\/p>\n<p>2. \u51cf\u5c11 Client-Side JavaScript<\/p>\n<p>\u56e0\u4e3a\u6570\u636e\u5904\u7406\u903b\u8f91\u90fd\u5728\u670d\u52a1\u5668\u5b8c\u6210&#xff0c;\u539f\u672c\u7528\u4e8e\u5904\u7406\u6570\u636e\u8f6c\u6362\u3001\u8fc7\u6ee4\u548c\u683c\u5f0f\u5316\u7684\u5e9e\u5927 JS \u5e93&#xff08;\u5982\u00a0lodash\u3001date-fns&#xff09;\u5c06\u4e0d\u518d\u9700\u8981\u53d1\u5f80\u5ba2\u6237\u7aef\u3002\u4f60\u7684 JS \u675f&#xff08;Bundle Size&#xff09;\u5c06\u4fdd\u6301\u524d\u6240\u672a\u6709\u7684\u7eaf\u51c0\u3002<\/p>\n<p>\u56db\u3001 \u67b6\u6784\u7684\u5fc3\u6cd5&#xff1a;\u4f55\u65f6\u201c\u76f4\u53d6\u201d&#xff0c;\u4f55\u65f6\u201c\u7ed5\u884c\u201d&#xff1f;<\/p>\n<p>\u867d\u7136\u201c\u76f4\u53d6\u6e90\u5934\u201d\u6781\u5177\u8bf1\u60d1\u529b&#xff0c;\u4f46\u4f5c\u4e3a\u5168\u6808\u4e13\u5bb6&#xff0c;\u6211\u4eec\u9700\u8981\u4fdd\u6301\u6e05\u9192\u7684\u5224\u65ad\u529b&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u62e5\u62b1\u76f4\u53d6&#xff1a;\u5bf9\u4e8e\u9996\u5c4f\u6e32\u67d3\u3001SEO \u5173\u952e\u5185\u5bb9\u3001\u6d89\u53ca\u654f\u611f\u6743\u9650\u7684\u6570\u636e&#xff0c;\u6c38\u8fdc\u4f18\u5148\u5728\u670d\u52a1\u7aef\u7ec4\u4ef6\u4e2d\u6293\u53d6\u3002<\/p>\n<\/li>\n<li>\n<p>\u8c28\u614e\u7ed5\u884c&#xff1a;\u53ea\u6709\u5f53\u6570\u636e\u9700\u8981\u6839\u636e\u7528\u6237\u7684\u5b9e\u65f6\u4ea4\u4e92&#xff08;\u5982\u5728\u8f93\u5165\u6846\u8fb9\u6253\u5b57\u8fb9\u641c\u7d22&#xff09;\u8fdb\u884c\u9891\u7e41\u66f4\u65b0\u65f6&#xff0c;\u624d\u8003\u8651\u901a\u8fc7\u5ba2\u6237\u7aef Fetch \u6216 SWR\/Query \u6a21\u5f0f\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e94\u3001 \u7ed3\u8bed&#xff1a;\u6570\u636e\u7684\u201c\u5927\u4e00\u7edf\u201d\u65f6\u4ee3<\/p>\n<p>\u672c\u8282\u5185\u5bb9\u6240\u5021\u5bfc\u7684\u201c\u76f4\u53d6\u6e90\u5934\u201d&#xff0c;\u672c\u8d28\u4e0a\u662f\u5bf9 Web \u6700\u521d\u5f62\u6001\u7684\u4e00\u79cd\u201c\u87ba\u65cb\u5f0f\u4e0a\u5347\u201d\u7684\u56de\u5f52\u3002\u5b83\u6c72\u53d6\u4e86 PHP\/JSP \u65f6\u4ee3\u7684\u76f4\u63a5\u4e0e\u9ad8\u6548&#xff0c;\u53c8\u4fdd\u7559\u4e86\u73b0\u4ee3 React \u7684\u7ec4\u4ef6\u5316\u4e0e\u54cd\u5e94\u5f0f\u4f53\u9a8c\u3002<\/p>\n<p>\u201c\u53d6\u6c34\u4e0d\u5fd8\u6316\u4e95\u4eba\u201d\u3002\u5f53\u6211\u4eec\u4e0d\u518d\u88ab\u5197\u4f59\u7684 API \u5c42\u548c\u590d\u6742\u7684\u72b6\u6001\u673a\u6240\u56f0\u6270&#xff0c;\u6211\u4eec\u624d\u80fd\u771f\u6b63\u56de\u5f52\u5230\u6570\u636e\u672c\u8eab\u3002\u5728\u670d\u52a1\u7aef\u7ec4\u4ef6\u4e2d\u76f4\u63a5\u8bf7\u6c42\u6570\u636e&#xff0c;\u4e0d\u662f\u5bf9\u89c4\u8303\u7684\u80cc\u53db&#xff0c;\u800c\u662f\u5bf9\u6548\u7387\u7684\u6781\u81f4\u5c0a\u91cd\u3002\u5b83\u8ba9\u5168\u6808\u5f00\u53d1\u53d8\u5f97\u524d\u6240\u672a\u6709\u7684\u8f7b\u76c8&#xff0c;\u4e5f\u8ba9\u6bcf\u4e00\u4e2a\u7ec4\u4ef6\u90fd\u6210\u4e3a\u4e00\u4e2a\u62e5\u6709\u201c\u6d1e\u5bdf\u6e90\u5934\u80fd\u529b\u201d\u7684\u667a\u80fd\u5b9e\u4f53\u3002<\/p>\n<p>\u7136\u800c&#xff0c;\u76f4\u63a5\u8bf7\u6c42\u6570\u636e\u53ea\u662f\u7b2c\u4e00\u6b65\u3002\u5728\u9762\u4e34\u9ad8\u5e76\u53d1\u548c\u6d77\u91cf\u8bf7\u6c42\u65f6&#xff0c;\u5982\u4f55\u907f\u514d\u670d\u52a1\u5668\u88ab\u9891\u7e41\u7684\u8bf7\u6c42\u51fb\u7a7f&#xff1f;\u8fd9\u5c31\u9700\u8981\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u63a2\u8ba8\u7684\u201c\u80fd\u91cf\u5b88\u6052\u5b9a\u5f8b\u201d&#xff1a;\u201c\u8bb0\u5fc6\u5316\u4e0e\u7f13\u5b58\u201d&#xff1a;\u7406\u89e3 Next.js \u5bf9 fetch \u7684\u539f\u751f\u589e\u5f3a\u3002\u60a8\u51c6\u5907\u597d\u638c\u63e1\u8ba9\u6570\u636e\u201c\u8fc7\u76ee\u4e0d\u5fd8\u201d\u7684\u9b54\u529b\u4e86\u5417&#xff1f;<\/p>\n<h3>5.2 \u201c\u8bb0\u5fc6\u5316\u4e0e\u7f13\u5b58\u201d\u2014\u2014\u7406\u89e3 Next.js \u5bf9 fetch \u7684\u539f\u751f\u589e\u5f3a<\/h3>\n<p>\u5982\u679c\u8bf4\u201c\u76f4\u53d6\u6e90\u5934\u201d\u8d4b\u4e88\u4e86\u5168\u6808\u5f00\u53d1\u6781\u901f\u54cd\u5e94\u7684\u672c\u80fd&#xff0c;\u90a3\u4e48\u7f13\u5b58&#xff08;Caching&#xff09;\u5219\u662f\u8ba9\u8fd9\u5934\u731b\u517d\u5f97\u4ee5\u5728\u590d\u6742\u751f\u4ea7\u73af\u5883\u4e2d\u751f\u5b58\u7684\u201c\u751f\u5b58\u54f2\u5b66\u201d\u3002<\/p>\n<p>\u5728\u4f20\u7edf\u5f00\u53d1\u4e2d&#xff0c;\u7f13\u5b58\u5f80\u5f80\u662f\u4e00\u4e2a\u4ee4\u4eba\u5934\u75bc\u7684\u9644\u52a0\u5c42&#xff1a;\u4f60\u9700\u8981\u624b\u52a8\u914d\u7f6e Redis&#xff0c;\u5c0f\u5fc3\u7ffc\u7ffc\u5730\u7ba1\u7406\u5931\u6548\u65f6\u95f4&#xff08;TTL&#xff09;&#xff0c;\u751a\u81f3\u8981\u4e3a\u4e86\u89e3\u51b3\u4e00\u4e2a\u6570\u636e\u540c\u6b65\u95ee\u9898\u800c\u91cd\u5199\u6574\u4e2a\u540e\u7aef\u903b\u8f91\u3002Next.js \u7684\u4f1f\u5927\u4e4b\u5904\u5728\u4e8e&#xff0c;\u5b83\u5c06\u7f13\u5b58\u89c6\u4e3a\u6846\u67b6\u7684\u7b2c\u4e00\u7b49\u516c\u6c11&#xff0c;\u901a\u8fc7\u5bf9\u539f\u751f\u00a0fetch\u00a0API \u8fdb\u884c\u4e86\u4e00\u6b21\u5916\u79d1\u624b\u672f\u5f0f\u7684\u589e\u5f3a&#xff0c;\u5b9e\u73b0\u4e86\u4e00\u5957\u201c\u81ea\u52a8\u5316\u3001\u591a\u7ef4\u5ea6\u3001\u7cbe\u7ec6\u5316\u201d\u7684\u7f13\u5b58\u673a\u5236\u3002<\/p>\n<p>\u672c\u8282\u6211\u4eec\u5c06\u6df1\u5165\u8fd9\u4e00\u590d\u6742\u7684\u80fd\u91cf\u4e2d\u67a2&#xff0c;\u63a2\u7a76 Next.js \u662f\u5982\u4f55\u8ba9\u6570\u636e\u505a\u5230\u201c\u8fc7\u76ee\u4e0d\u5fd8\u201d\u7684\u3002<\/p>\n<p>\u4e00\u3001 \u8bb0\u5fc6\u5316\u8bf7\u6c42&#xff08;Request Memoization&#xff09;&#xff1a;\u8de8\u7ec4\u4ef6\u7684\u201c\u5fc3\u7075\u611f\u5e94\u201d<\/p>\n<p>\u5728 React \u7684\u6df1\u5ea6\u5d4c\u5957\u7ec4\u4ef6\u6811\u4e2d&#xff0c;\u6211\u4eec\u5e38\u9762\u4e34\u4e00\u4e2a\u5c34\u5c2c&#xff1a;\u5982\u679c\u7236\u7ec4\u4ef6\u3001\u5b50\u7ec4\u4ef6\u3001\u751a\u81f3\u5b59\u5b50\u7ec4\u4ef6\u90fd\u9700\u8981\u540c\u4e00\u4efd\u7528\u6237\u4fe1\u606f&#xff0c;\u6211\u4eec\u8be5\u600e\u4e48\u505a&#xff1f;<\/p>\n<ul>\n<li>\n<p>\u4f20\u7edf\u505a\u6cd5&#xff1a;\u5728\u6700\u9876\u5c42\u8bf7\u6c42\u6570\u636e&#xff0c;\u7136\u540e\u901a\u8fc7 Prop Drilling&#xff08;\u5c5e\u6027\u94bb\u53d6&#xff09;\u4e00\u5c42\u5c42\u4f20\u4e0b\u53bb&#xff0c;\u6216\u8005\u52a8\u7528\u7e41\u91cd\u7684\u72b6\u6001\u7ba1\u7406\u5e93\u3002<\/p>\n<\/li>\n<li>\n<p>Next.js \u7684\u4f18\u96c5\u65b9\u6848&#xff1a;\u5728\u6bcf\u4e2a\u7ec4\u4ef6\u91cc\u653e\u5fc3\u5730\u8c03\u7528\u00a0fetch\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u8bf7\u6c42\u8bb0\u5fc6\u5316\u662f Next.js \u7684\u7b2c\u4e00\u5c42\u9632\u5fa1\u3002\u5b83\u786e\u4fdd\u4e86\u5728\u540c\u4e00\u4e2a\u6e32\u67d3\u751f\u547d\u5468\u671f\u5185&#xff0c;\u9488\u5bf9\u540c\u4e00\u4e2a URL \u548c\u914d\u7f6e\u7684\u8bf7\u6c42\u53ea\u4f1a\u6267\u884c\u4e00\u6b21\u3002<\/p>\n<p>\u8fd9\u8ba9\u7ec4\u4ef6\u83b7\u5f97\u4e86\u201c\u89e3\u8026\u7684\u81ea\u7531\u201d\u3002\u4f60\u4e0d\u518d\u9700\u8981\u8003\u8651\u6570\u636e\u4ece\u54ea\u6765&#xff0c;\u53ea\u9700\u58f0\u660e\u4f60\u9700\u8981\u4ec0\u4e48\u3002Next.js \u50cf\u4e00\u4f4d\u9ad8\u6548\u7684\u79d8\u4e66&#xff0c;\u5728\u540e\u53f0\u81ea\u52a8\u8fc7\u6ee4\u6389\u6240\u6709\u91cd\u590d\u7684\u8bc9\u6c42\u3002<\/p>\n<p>\u4e8c\u3001 \u6570\u636e\u7f13\u5b58&#xff08;Data Cache&#xff09;&#xff1a;\u8de8\u8bf7\u6c42\u7684\u201c\u6c38\u6052\u8bb0\u5fc6\u201d<\/p>\n<p>\u5982\u679c\u8bf4\u8bb0\u5fc6\u5316\u53ea\u662f\u4e00\u6b21\u6e32\u67d3\u4e2d\u7684\u95ea\u5ff5&#xff0c;\u90a3\u4e48\u00a0Data Cache\u00a0\u5219\u662f\u8de8\u8d8a\u7528\u6237\u3001\u8de8\u8d8a\u8bf7\u6c42\u7684\u957f\u671f\u8bb0\u5fc6\u3002\u5b83\u662f Next.js \u5b9e\u73b0\u9ad8\u6027\u80fd\u5168\u6808\u67b6\u6784\u7684\u57fa\u77f3\u3002<\/p>\n<p>1. \u7a81\u7834 HTTP \u7f13\u5b58\u7684\u9650\u5236<\/p>\n<p>\u4f20\u7edf\u7684\u6d4f\u89c8\u5668\u7f13\u5b58\u53d7\u9650\u4e8e HTTP \u534f\u8bae\u3002\u800c Next.js \u5728\u670d\u52a1\u5668\u7aef\u6784\u5efa\u4e86\u4e00\u4e2a\u6301\u4e45\u5316\u7684\u6301\u4e45\u5c42\u3002\u5f53\u4f60\u6267\u884c\u4e00\u4e2a\u00a0fetch\u65f6&#xff0c;Next.js \u4f1a\u5c06\u7ed3\u679c\u5b58\u5165\u78c1\u76d8\u3002\u4e0b\u4e00\u4e2a\u7528\u6237\u8bbf\u95ee\u65f6&#xff0c;\u670d\u52a1\u5668\u751a\u81f3\u4e0d\u9700\u8981\u53d1\u8d77\u4efb\u4f55\u7f51\u7edc\u8bf7\u6c42&#xff0c;\u76f4\u63a5\u4ece\u672c\u5730\u7f13\u5b58\u4e2d\u201c\u79d2\u56de\u201d\u6570\u636e\u3002<\/p>\n<p>2. \u539f\u751f\u589e\u5f3a\u7684\u8bed\u6cd5<\/p>\n<p>Next.js \u5e76\u6ca1\u6709\u5f15\u5165\u53e4\u602a\u7684\u65b0 API&#xff0c;\u800c\u662f\u5de7\u5999\u5730\u5229\u7528\u4e86\u00a0fetch\u00a0\u7684\u7b2c\u4e8c\u4e2a\u53c2\u6570&#xff08;options&#xff09;&#xff1a;<\/p>\n<p>\/\/ \u5f3a\u5236\u7f13\u5b58&#xff1a;\u6c38\u4e45\u6709\u6548&#xff0c;\u76f4\u5230\u624b\u52a8\u66f4\u65b0<br \/>\nfetch(&#039;https:\/\/&#8230;&#039;, { cache: &#039;force-cache&#039; });<\/p>\n<p>\/\/ \u7981\u7528\u7f13\u5b58&#xff1a;\u5b9e\u65f6\u83b7\u53d6&#xff0c;\u9002\u7528\u4e8e\u9ad8\u9891\u53d8\u52a8\u6570\u636e<br \/>\nfetch(&#039;https:\/\/&#8230;&#039;, { cache: &#039;no-store&#039; });<\/p>\n<p>\u8fd9\u79cd\u201c\u534f\u8bae\u5373\u914d\u7f6e\u201d\u7684\u8bbe\u8ba1&#xff0c;\u8ba9\u7f13\u5b58\u7684\u63a7\u5236\u6743\u91cd\u65b0\u56de\u5230\u4e86\u5f00\u53d1\u8005\u624b\u4e2d&#xff0c;\u4e14\u6781\u5176\u7b26\u5408\u76f4\u89c9\u3002<\/p>\n<p>\u4e09\u3001 \u8def\u5f84\u4e0e\u6807\u7b7e&#xff1a;\u7cbe\u51c6\u7206\u7834\u7684\u827a\u672f<\/p>\n<p>\u7f13\u5b58\u6700\u5927\u7684\u96be\u70b9\u4e0d\u5728\u4e8e\u201c\u5b58\u201d&#xff0c;\u800c\u5728\u4e8e\u201c\u5220&#xff08;Invalidation&#xff09;\u201d\u3002Next.js \u5f15\u5165\u4e86\u4e24\u5957\u6781\u5177\u5de5\u7a0b\u7f8e\u611f\u7684\u673a\u5236&#xff1a;\u57fa\u4e8e\u8def\u5f84\u7684\u9a8c\u8bc1\u4e0e\u57fa\u4e8e\u6807\u7b7e\u7684\u9a8c\u8bc1\u3002<\/p>\n<ul>\n<li>\n<p>\u6309\u8def\u5f84\u66f4\u65b0 (revalidatePath)&#xff1a;\u5f53\u4f60\u66f4\u65b0\u4e86\u4e00\u7bc7\u535a\u6587&#xff0c;\u4f60\u53ea\u9700\u544a\u8bc9 Next.js&#xff1a;\u201c\u8bf7\u6e05\u7406\u00a0\/blog\/[id]\u00a0\u8def\u5f84\u4e0b\u7684\u6240\u6709\u7f13\u5b58\u3002\u201d<\/p>\n<\/li>\n<li>\n<p>\u6309\u6807\u7b7e\u66f4\u65b0 (revalidateTag)&#xff1a;\u8fd9\u662f\u66f4\u9ad8\u7ea7\u7684\u73a9\u6cd5\u3002\u4f60\u53ef\u4ee5\u7ed9\u591a\u4e2a fetch \u8bf7\u6c42\u6253\u4e0a\u540c\u4e00\u4e2a\u6807\u7b7e&#xff08;\u5982\u00a0tags: [&#039;products&#039;]&#xff09;\u3002\u5f53\u5e93\u5b58\u53d8\u52a8\u65f6&#xff0c;\u4e00\u6b21\u00a0revalidateTag(&#039;products&#039;)\u00a0\u5c31\u80fd\u8ba9\u5168\u7403\u6570\u5343\u4e2a\u53d7\u5f71\u54cd\u7684\u9875\u9762\u540c\u6b65\u66f4\u65b0\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u56db\u3001 \u67b6\u6784\u7684\u5fc3\u6cd5&#xff1a;\u56db\u5c42\u7f13\u5b58\u7684\u534f\u540c\u4ea4\u54cd<\/p>\n<p>\u4f5c\u4e3a\u4e00\u4e2a\u5168\u6808\u4e13\u5bb6&#xff0c;\u4f60\u5fc5\u987b\u610f\u8bc6\u5230 Next.js \u5b9e\u9645\u4e0a\u8fd0\u884c\u7740\u56db\u5c42\u7f13\u5b58\u673a\u5236&#xff0c;\u5b83\u4eec\u73af\u73af\u76f8\u6263&#xff1a;<\/p>\n<li>\n<p>Request Memoization&#xff1a;\u6e32\u67d3\u65f6\u7684\u5185\u5b58\u7f13\u5b58&#xff08;\u907f\u514d\u91cd\u590d Fetch&#xff09;\u3002<\/p>\n<\/li>\n<li>\n<p>Data Cache&#xff1a;\u670d\u52a1\u5668\u7aef\u7684\u6301\u4e45\u5316\u7f13\u5b58&#xff08;\u907f\u514d\u91cd\u590d\u8bbf\u95ee\u6570\u636e\u5e93\/API&#xff09;\u3002<\/p>\n<\/li>\n<li>\n<p>Full Route Cache&#xff1a;\u6784\u5efa\u65f6\u7684\u9759\u6001\u9875\u9762\u7f13\u5b58&#xff08;HTML \u7ea7\u522b\u7684\u6781\u81f4\u901f\u5ea6&#xff09;\u3002<\/p>\n<\/li>\n<li>\n<p>Router Cache&#xff1a;\u6d4f\u89c8\u5668\u7aef\u7684\u5ba2\u6237\u7aef\u7f13\u5b58&#xff08;\u4fdd\u8bc1\u524d\u8fdb\u540e\u9000\u7684\u77ac\u65f6\u611f&#xff09;\u3002<\/p>\n<\/li>\n<p>\u8fd9\u56db\u8005\u7684\u534f\u540c&#xff0c;\u6784\u6210\u4e86\u4e00\u4e2a\u201c\u5206\u5c42\u9632\u5fa1\u7cfb\u7edf\u201d\u3002\u6570\u636e\u4ece\u6e90\u5934\u6d41\u5411\u7528\u6237\u7684\u8fc7\u7a0b\u4e2d&#xff0c;\u6bcf\u4e00\u6b65\u90fd\u88ab\u7cbe\u5fc3\u4fdd\u62a4\u3002\u5982\u679c\u6570\u636e\u5728\u7b2c\u4e00\u5c42\u547d\u4e2d\u4e86&#xff0c;\u5c31\u4e0d\u4f1a\u89e6\u53d1\u7b2c\u4e8c\u5c42\u3002\u8fd9\u79cd\u5bf9\u8ba1\u7b97\u8d44\u6e90\u7684\u538b\u69a8&#xff0c;\u8ba9 Next.js \u5e94\u7528\u5728\u5904\u7406\u9ad8\u5e76\u53d1\u6d41\u91cf\u65f6\u5c55\u73b0\u51fa\u60ca\u4eba\u7684\u7a33\u5b9a\u6027\u3002<\/p>\n<p>\u4e94\u3001 \u54f2\u5b66\u601d\u8fa8&#xff1a;\u7f13\u5b58\u5e26\u6765\u7684\u201c\u526f\u4f5c\u7528\u201d<\/p>\n<p>\u7136\u800c&#xff0c;\u5f3a\u5927\u7684\u6b66\u5668\u603b\u6709\u53cc\u5203\u5251\u7684\u4e00\u9762\u3002<\/p>\n<ul>\n<li>\n<p>\u9648\u65e7\u6570\u636e\u7684\u98ce\u9669&#xff1a;\u8fc7\u4e8e\u4f9d\u8d56\u5f3a\u5236\u7f13\u5b58&#xff08;force-cache&#xff09;\u4f1a\u5bfc\u81f4\u7528\u6237\u770b\u5230\u8fc7\u65f6\u7684\u4fe1\u606f\u3002<\/p>\n<\/li>\n<li>\n<p>\u5f00\u53d1\u73af\u5883\u7684\u8ff7\u60d1&#xff1a;\u6709\u65f6\u4f60\u5728\u672c\u5730\u6539\u4e86\u6570\u636e\u5e93&#xff0c;\u9875\u9762\u5374\u6ca1\u53d8&#xff0c;\u8fd9\u5f80\u5f80\u662f\u56e0\u4e3a\u4f60\u8fd8\u6ca1\u7406\u89e3 Next.js \u9ed8\u8ba4\u7684\u7f13\u5b58\u503e\u5411\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e13\u5bb6\u7684\u76f4\u89c9\u662f&#xff1a;\u9ed8\u8ba4\u62e5\u62b1\u7f13\u5b58&#xff0c;\u4f46\u6c38\u8fdc\u4e3a\u201c\u6613\u53d8\u6027\u201d\u7559\u51fa\u51fa\u53e3\u3002\u5728\u6784\u5efa\u6d89\u53ca\u5230\u91d1\u878d\u3001\u5e93\u5b58\u7b49\u5bf9\u5b9e\u65f6\u6027\u8981\u6c42\u6781\u9ad8\u7684\u6a21\u5757\u65f6&#xff0c;\u5e94\u5f53\u663e\u5f0f\u5730\u58f0\u660e\u00a0revalidate &#061; 0\u00a0\u6216\u00a0no-store\u3002<\/p>\n<p>\u516d\u3001 \u603b\u7ed3&#xff1a;\u8ba9\u6027\u80fd\u6210\u4e3a\u201c\u9ed8\u8ba4\u8bbe\u7f6e\u201d<\/p>\n<p>Next.js \u5bf9\u00a0fetch\u00a0\u7684\u589e\u5f3a&#xff0c;\u672c\u8d28\u4e0a\u662f\u628a\u590d\u6742\u7684\u540e\u7aef\u67b6\u6784\u7ecf\u9a8c&#xff08;\u7f13\u5b58\u5c42\u3001\u5e42\u7b49\u6027\u3001\u5931\u6548\u673a\u5236&#xff09;\u4e0b\u653e\u5230\u524d\u7aef\u5f00\u53d1\u8005\u7684\u5de5\u5177\u7bb1\u91cc\u3002<\/p>\n<p>\u5b83\u544a\u8bc9\u6211\u4eec&#xff1a;\u6027\u80fd\u4e0d\u5e94\u8be5\u662f\u4e8b\u540e\u4f18\u5316\u7684\u8865\u4e01&#xff0c;\u800c\u5e94\u8be5\u662f\u5f00\u53d1\u65f6\u5c31\u5177\u5907\u7684\u57fa\u56e0\u3002\u00a0\u901a\u8fc7\u7406\u89e3\u8bb0\u5fc6\u5316\u4e0e\u7f13\u5b58\u7684\u539f\u7406&#xff0c;\u6211\u4eec\u4e0d\u4ec5\u662f\u5728\u5199\u4ee3\u7801&#xff0c;\u66f4\u662f\u5728\u8bbe\u8ba1\u4e00\u5957\u667a\u80fd\u7684\u6570\u636e\u751f\u547d\u5468\u671f\u3002\u5f53\u4f60\u7684\u5e94\u7528\u80fd\u591f\u201c\u8bb0\u4f4f\u201d\u6bcf\u4e00\u4e2a\u6602\u8d35\u7684\u8bf7\u6c42&#xff0c;\u5e76\u80fd\u654f\u9510\u5730\u5728\u6570\u636e\u53d8\u52a8\u65f6\u201c\u5524\u9192\u201d\u66f4\u65b0&#xff0c;\u4f60\u624d\u771f\u6b63\u89e6\u78b0\u5230\u4e86\u5168\u6808\u5f00\u53d1\u7684\u6781\u5883\u3002<\/p>\n<p>\u638c\u63e1\u4e86\u6570\u636e\u7684\u201c\u5b58\u201d\u4e0e\u201c\u53d6\u201d&#xff0c;\u6211\u4eec\u5df2\u7ecf\u6784\u5efa\u4e86\u4e00\u4e2a\u9ad8\u6548\u7684\u8bfb\u53d6\u7cfb\u7edf\u3002\u4f46 Web \u5e94\u7528\u5e76\u975e\u53ea\u6709\u8bfb\u53d6&#xff0c;\u5f53\u6211\u4eec\u9700\u8981\u4ece\u524d\u7aef\u5411\u540e\u7aef\u53d1\u8d77\u201c\u8fdb\u653b\u201d&#xff0c;\u53bb\u6539\u53d8\u6570\u636e\u72b6\u6001\u65f6&#xff0c;\u53c8\u8be5\u5982\u4f55\u5904\u7406&#xff1f;\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u63a2\u8ba8\u7684\u201c\u670d\u52a1\u5668\u64cd\u4f5c\u201d (Server Actions)&#xff1a;\u544a\u522b\u5197\u4f59 API&#xff0c;\u5b9e\u73b0\u51fd\u6570\u5f0f\u8868\u5355\u63d0\u4ea4\u3002\u60a8\u51c6\u5907\u597d\u4f53\u9a8c\u5168\u6808\u540c\u6784\u4e0b\u6700\u4e1d\u6ed1\u7684\u4ea4\u4e92\u95ed\u73af\u4e86\u5417&#xff1f;<\/p>\n<h3>5.3 \u201c\u670d\u52a1\u5668\u64cd\u4f5c\u201d (Server Actions)\u2014\u2014\u544a\u522b\u5197\u4f59 API&#xff0c;\u5b9e\u73b0\u51fd\u6570\u5f0f\u8868\u5355\u63d0\u4ea4<\/h3>\n<p>\u5982\u679c\u8bf4\u201c\u76f4\u53d6\u6e90\u5934\u201d\u89e3\u51b3\u4e86\u6570\u636e\u7684\u8bfb&#xff0c;\u90a3\u4e48\u00a0Server Actions&#xff08;\u670d\u52a1\u5668\u64cd\u4f5c&#xff09;\u00a0\u5219\u662f\u4e00\u628a\u5212\u7834\u957f\u7a7a\u7684\u5229\u5251&#xff0c;\u5f7b\u5e95\u91cd\u5851\u4e86\u5168\u6808\u67b6\u6784\u4e2d\u6570\u636e\u7684\u5199\u3002<\/p>\n<p>\u5728\u6f2b\u957f\u7684 Web \u5f00\u53d1\u53f2\u4e2d&#xff0c;\u201c\u524d\u540e\u7aef\u5206\u79bb\u201d\u66fe\u7b51\u8d77\u4e00\u9053\u539a\u91cd\u7684\u67cf\u95e8&#xff1a;\u524d\u7aef\u5f00\u53d1\u8005\u5fc5\u987b\u5c0f\u5fc3\u7ffc\u7ffc\u5730\u5b9a\u4e49 API \u8def\u7531&#xff0c;\u5904\u7406\u5e8f\u5217\u5316\u7684 JSON&#xff0c;\u5728\u5ba2\u6237\u7aef\u7ef4\u62a4\u63d0\u4ea4\u72b6\u6001&#xff1b;\u540e\u7aef\u5219\u8981\u53cd\u590d\u6821\u9a8c\u8bf7\u6c42\u4f53\u3001\u5904\u7406\u8de8\u57df\u4e0e\u8eab\u4efd\u9a8c\u8bc1\u3002\u8fd9\u79cd\u201c\u9694\u5c71\u6253\u725b\u201d\u7684\u4ea4\u4e92\u6a21\u5f0f&#xff0c;\u4e0d\u4ec5\u5145\u6ee1\u4e86\u5197\u4f59\u7684\u4ee3\u7801&#xff0c;\u66f4\u5728\u65e0\u5f62\u4e2d\u5272\u88c2\u4e86\u4e1a\u52a1\u903b\u8f91\u3002<\/p>\n<p>Next.js \u5f15\u5165\u7684 Server Actions&#xff0c;\u5ba3\u544a\u4e86\u00a0\u201c\u7aef\u5230\u7aef\u51fd\u6570\u5f0f\u7f16\u7a0b\u201d\u00a0\u7684\u56de\u5f52\u3002\u5b83\u5141\u8bb8\u4f60\u76f4\u63a5\u5728\u7ec4\u4ef6\u4e2d\u5b9a\u4e49\u5f02\u6b65\u51fd\u6570&#xff0c;\u5e76\u5c06\u5176\u8de8\u8d8a\u7f51\u7edc\u76f4\u63a5\u201c\u6295\u5c04\u201d\u5230\u670d\u52a1\u5668\u6267\u884c\u3002API \u8def\u7531\u4e0d\u518d\u662f\u5fc5\u987b\u7684\u811a\u624b\u67b6&#xff0c;\u5b83\u53d8\u6210\u4e86\u67b6\u6784\u5e95\u5c42\u9690\u5f62\u7684\u8f93\u9001\u5e26\u3002<\/p>\n<p>\u4e00\u3001 \u54f2\u5b66\u91cd\u5851&#xff1a;\u4ece\u201c\u7f51\u7edc\u901a\u4fe1\u201d\u5230\u201c\u8fdc\u7a0b\u8fc7\u7a0b\u8c03\u7528\u201d<\/p>\n<p>Server Actions \u7684\u672c\u8d28\u5e76\u975e\u7b80\u5355\u7684\u8bed\u6cd5\u7cd6&#xff0c;\u5b83\u662f\u00a0RPC&#xff08;Remote Procedure Call&#xff09;\u00a0\u601d\u60f3\u5728 React \u4f53\u7cfb\u4e0b\u7684\u5b8c\u7f8e\u590d\u73b0\u3002<\/p>\n<p>1. \u6d88\u9664\u201c\u63a5\u53e3\u7c98\u5408\u5c42\u201d<\/p>\n<p>\u5728\u4f20\u7edf\u6a21\u5f0f\u4e0b&#xff0c;\u4f60\u9700\u8981\u7ef4\u62a4\u4e00\u4e2a\u00a0\/api\/update-user\u00a0\u7684\u7aef\u70b9\u3002\u4f46\u5728 Next.js \u4e2d&#xff0c;\u4f60\u53ea\u9700\u5b9a\u4e49\u4e00\u4e2a\u5e26\u6709\u00a0&#039;use server&#039;\u6307\u4ee4\u7684\u666e\u901a\u5f02\u6b65\u51fd\u6570\u3002<\/p>\n<p>\/\/ \u4f60\u7684\u903b\u8f91\u5373\u662f\u4f60\u7684\u63a5\u53e3<br \/>\nasync function updateUser(formData: FormData) {<br \/>\n  &#039;use server&#039;; \/\/ \u9b54\u6cd5\u6307\u4ee4&#xff1a;\u5c06\u6b64\u51fd\u6570\u6807\u8bb0\u4e3a\u670d\u52a1\u5668\u7aef\u6267\u884c<br \/>\n  const name &#061; formData.get(&#039;name&#039;);<br \/>\n  await db.user.update({ data: { name } });<br \/>\n  revalidatePath(&#039;\/profile&#039;); \/\/ \u81ea\u52a8\u66f4\u65b0\u7f13\u5b58<br \/>\n}<\/p>\n<p>\u5f53\u4f60\u5c06\u8fd9\u4e2a\u51fd\u6570\u4f20\u9012\u7ed9\u00a0&lt;form action&#061;{updateUser}&gt;\u00a0\u65f6&#xff0c;Next.js \u4f1a\u5728\u5e55\u540e\u81ea\u52a8\u521b\u5efa\u4e00\u4e2a\u9690\u85cf\u7684\u7aef\u70b9&#xff0c;\u5904\u7406\u6240\u6709\u7684\u53c2\u6570\u5e8f\u5217\u5316\u4e0e\u7f51\u7edc\u8bf7\u6c42\u3002<\/p>\n<p>2. \u7c7b\u578b\u5b89\u5168\u7684\u201c\u5927\u4e00\u7edf\u201d<\/p>\n<p>\u7531\u4e8e Server Actions \u5c31\u5728\u4f60\u7684\u7ec4\u4ef6\u4ee3\u7801\u9644\u8fd1&#xff0c;TypeScript \u53ef\u4ee5\u8de8\u8d8a\u7aef\u4e91\u8fb9\u754c\u8fdb\u884c\u7c7b\u578b\u63a8\u5bfc\u3002\u4f60\u4e0d\u518d\u9700\u8981\u5b9a\u4e49\u4e24\u904d\u00a0UserUpdatePayload\u00a0\u63a5\u53e3&#xff0c;\u4e00\u4efd\u4ee3\u7801&#xff0c;\u4e24\u7aef\u5171\u9e23\u3002<\/p>\n<p>\u4e8c\u3001 \u4ea4\u4e92\u7684\u827a\u672f&#xff1a;\u8868\u5355\u3001\u4e50\u89c2\u66f4\u65b0\u4e0e\u6e10\u8fdb\u589e\u5f3a<\/p>\n<p>Server Actions \u6700\u4ee4\u4eba\u60ca\u53f9\u7684\u7279\u6027&#xff0c;\u5728\u4e8e\u5b83\u5bf9\u00a0Web \u539f\u59cb\u672c\u80fd\u7684\u5c0a\u91cd&#xff0c;\u4ee5\u53ca\u5bf9\u73b0\u4ee3\u4ea4\u4e92\u4f53\u9a8c\u7684\u6781\u81f4\u8ffd\u6c42\u3002<\/p>\n<p>1. \u6e10\u8fdb\u589e\u5f3a&#xff08;Progressive Enhancement&#xff09;<\/p>\n<p>\u8fd9\u662f\u5168\u6808\u4e13\u5bb6\u7684\u60c5\u6000\u6240\u5728\u3002\u57fa\u4e8e Server Actions \u7684\u8868\u5355&#xff0c;\u5373\u4f7f\u5728\u7528\u6237\u7684 JavaScript \u8fd8\u6ca1\u52a0\u8f7d\u5b8c\u3001\u751a\u81f3\u662f\u7981\u7528 JS \u7684\u60c5\u51b5\u4e0b&#xff0c;\u4f9d\u7136\u80fd\u591f\u901a\u8fc7\u6807\u51c6\u7684 HTML Form \u63d0\u4ea4\u5b8c\u6210\u4efb\u52a1\u3002<\/p>\n<p>\u5b83\u8ba9\u5e94\u7528\u62e5\u6709\u4e86\u201c\u9632\u5f39\u201d\u822c\u7684\u5065\u58ee\u6027\u2014\u2014\u5148\u4fdd\u8bc1\u80fd\u7528&#xff0c;\u518d\u8ffd\u6c42\u597d\u7528\u3002<\/p>\n<p>2. \u4ea4\u4e92\u7684\u4e1d\u6ed1&#xff1a;useFormStatus\u00a0\u4e0e\u00a0useOptimistic<\/p>\n<p>\u5f53 JS \u52a0\u8f7d\u5b8c\u6210\u540e&#xff0c;Next.js \u4f1a\u63a5\u7ba1\u8868\u5355&#xff0c;\u63d0\u4f9b\u5355\u9875\u5e94\u7528\u7ea7\u7684\u6d41\u7545\u611f&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u72b6\u6001\u611f\u77e5&#xff1a;\u5229\u7528\u00a0useFormStatus&#xff0c;\u4f60\u53ef\u4ee5\u8f7b\u677e\u5728\u7ec4\u4ef6\u4efb\u4f55\u5730\u65b9\u83b7\u53d6\u201c\u63d0\u4ea4\u4e2d\u201d\u7684\u72b6\u6001&#xff0c;\u65e0\u9700\u624b\u52a8\u7ef4\u62a4 Loading\u3002<\/p>\n<\/li>\n<li>\n<p>\u4e50\u89c2\u66f4\u65b0&#xff1a;\u901a\u8fc7\u00a0useOptimistic&#xff0c;\u4f60\u53ef\u4ee5\u8ba9\u7528\u6237\u5728\u70b9\u51fb\u53d1\u9001\u7684\u4e00\u77ac\u95f4\u5c31\u770b\u5230\u7ed3\u679c&#xff0c;\u5373\u4f7f\u670d\u52a1\u5668\u8bf7\u6c42\u8fd8\u5728\u8def\u4e0a\u3002\u8fd9\u79cd\u201c\u5148\u65a9\u540e\u594f\u201d\u7684\u4ea4\u4e92\u8bbe\u8ba1&#xff0c;\u662f\u901a\u5f80\u6781\u81f4\u7528\u6237\u4f53\u9a8c\u7684\u5fc5\u7ecf\u4e4b\u8def\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e09\u3001 \u67b6\u6784\u7684\u6df1\u5ea6&#xff1a;\u95ed\u5305\u3001\u5b89\u5168\u4e0e\u4e0a\u4e0b\u6587<\/p>\n<p>\u4f5c\u4e3a\u4e00\u540d\u9876\u5c16\u5168\u6808\u5de5\u7a0b\u5e08&#xff0c;\u4f60\u5fc5\u987b\u6d1e\u5bdf Server Actions \u80cc\u540e\u90a3\u4e9b\u4e0d\u4e3a\u4eba\u77e5\u7684\u7cbe\u5bc6\u8bbe\u8ba1\u3002<\/p>\n<p>1. \u95ed\u5305\u53d8\u91cf\u7684\u9690\u5f62\u4f20\u9012<\/p>\n<p>Server Actions \u652f\u6301\u95ed\u5305\u3002\u8fd9\u610f\u5473\u7740\u5982\u679c\u4f60\u5728\u4e00\u4e2a\u5faa\u73af\u4e2d\u5b9a\u4e49 Action&#xff0c;\u5b83\u53ef\u4ee5\u81ea\u52a8\u6355\u83b7\u8be5\u5faa\u73af\u4e2d\u7684\u53d8\u91cf&#xff08;\u5982\u00a0userId&#xff09;&#xff0c;\u5e76\u5728\u8c03\u7528\u65f6\u5c06\u5176\u5b89\u5168\u5730\u4f20\u56de\u670d\u52a1\u5668\u3002Next.js \u4f1a\u5bf9\u8fd9\u4e9b\u53d8\u91cf\u8fdb\u884c\u52a0\u5bc6&#xff0c;\u786e\u4fdd\u5b83\u4eec\u4e0d\u4f1a\u5728\u5ba2\u6237\u7aef\u88ab\u7be1\u6539\u3002<\/p>\n<p>2. \u81ea\u52a8\u7684\u7f13\u5b58\u8054\u52a8<\/p>\n<p>\u8fd9\u662f Server Actions \u6700\u5f3a\u5927\u7684\u6740\u624b\u950f\u3002\u5728\u4f20\u7edf\u7684 API \u6a21\u5f0f\u4e0b&#xff0c;\u63d0\u4ea4\u5b8c\u6570\u636e\u4f60\u901a\u5e38\u9700\u8981\u624b\u52a8\u5237\u65b0\u9875\u9762\u6216\u64cd\u4f5c\u5168\u5c40\u72b6\u6001\u3002\u800c Server Actions \u4e0e Next.js \u7684\u7f13\u5b58\u7cfb\u7edf&#xff08;5.2 \u8282\u6240\u8ff0&#xff09;\u662f\u6df1\u5ea6\u7ed1\u5b9a\u7684\u3002 \u8c03\u7528\u00a0revalidatePath\u00a0\u6216\u00a0revalidateTag\u00a0\u540e&#xff0c;\u670d\u52a1\u5668\u4f1a\u4f34\u968f Action \u7684\u54cd\u5e94&#xff0c;\u76f4\u63a5\u5c06\u66f4\u65b0\u540e\u7684\u5c40\u90e8 UI \u6570\u636e\u53d1\u56de\u524d\u7aef\u3002<\/p>\n<p>\u56db\u3001 \u907f\u5751\u6307\u5357&#xff1a;\u6743\u529b\u5e26\u6765\u7684\u8d23\u4efb<\/p>\n<p>Server Actions \u7ed9\u4e88\u4e86\u5f00\u53d1\u8005\u5de8\u5927\u7684\u6743\u529b&#xff0c;\u4f46\u4e5f\u8981\u6c42\u6211\u4eec\u4fdd\u6301\u6e05\u9192\u7684\u67b6\u6784\u514b\u5236&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u5b89\u5168\u9632\u7ebf&#xff1a;\u6c38\u8fdc\u4e0d\u8981\u5fd8\u8bb0&#xff0c;Server Action \u5c31\u662f\u4e00\u4e2a\u516c\u5f00\u7684 API\u3002\u5373\u4f7f\u5b83\u957f\u5f97\u50cf\u666e\u901a\u51fd\u6570&#xff0c;\u4f60\u4f9d\u7136\u5fc5\u987b\u5728\u51fd\u6570\u5185\u90e8\u8fdb\u884c\u4e25\u683c\u7684\u6743\u9650\u6821\u9a8c\u4e0e\u8f93\u5165\u9a8c\u8bc1&#xff08;\u5982\u4f7f\u7528 Zod&#xff09;\u3002<\/p>\n<\/li>\n<li>\n<p>\u804c\u8d23\u5212\u5206&#xff1a;Action \u5e94\u8be5\u53ea\u8d1f\u8d23\u201c\u6539\u53d8\u72b6\u6001\u201d\u3002\u590d\u6742\u7684\u4e1a\u52a1\u903b\u8f91\u5efa\u8bae\u5c01\u88c5\u5728\u72ec\u7acb\u7684 Service \u5c42\u4e2d&#xff0c;\u4fdd\u6301\u7ec4\u4ef6\u4ee3\u7801\u7684\u6574\u6d01\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e94\u3001 \u603b\u7ed3&#xff1a;\u544a\u522b\u201c\u642c\u8fd0\u5de5\u201d\u7684\u65f6\u4ee3<\/p>\n<p>Server Actions \u7684\u51fa\u73b0&#xff0c;\u6807\u5fd7\u7740\u524d\u7aef\u5f00\u53d1\u8005\u4ece\u201cAPI \u642c\u8fd0\u5de5\u201d\u5411\u201c\u5168\u6808\u903b\u8f91\u5e08\u201d\u7684\u534e\u4e3d\u8f6c\u578b\u3002\u6211\u4eec\u4e0d\u518d\u6d6a\u8d39\u751f\u547d\u5728\u5b9a\u4e49\u8def\u7531\u3001\u5e8f\u5217\u5316 JSON \u548c\u540c\u6b65\u72b6\u6001\u4e0a&#xff0c;\u800c\u662f\u5c06\u7cbe\u529b\u96c6\u4e2d\u5728\u201c\u52a8\u4f5c&#xff08;Action&#xff09;\u201d\u672c\u8eab\u3002<\/p>\n<p>\u5b83\u5c06 Web \u5f00\u53d1\u5e26\u56de\u4e86\u6700\u7eaf\u7cb9\u7684\u5f62\u6001&#xff1a;\u7528\u6237\u89e6\u53d1\u4e00\u4e2a\u64cd\u4f5c&#xff0c;\u670d\u52a1\u5668\u54cd\u5e94\u4e00\u4e2a\u6539\u53d8\u3002\u00a0\u4f46\u8fd9\u4e00\u6b21&#xff0c;\u6211\u4eec\u62e5\u6709\u4e86 React \u7684\u7ec4\u4ef6\u5316\u529b\u91cf\u3001TypeScript \u7684\u4e25\u8c28\u6027\u4ee5\u53ca Next.js \u7f13\u5b58\u7cfb\u7edf\u7684\u6781\u81f4\u6027\u80fd\u3002<\/p>\n<p>\u6570\u636e\u7684\u201c\u8bfb\u201d\u4e0e\u201c\u5199\u201d\u5df2\u7ecf\u5408\u9f99&#xff0c;\u5168\u6808\u7684\u95ed\u73af\u5df2\u7ecf\u94f8\u5c31\u3002\u7136\u800c&#xff0c;\u5728\u4e00\u4e2a\u52a8\u6001\u7684\u5e94\u7528\u4e2d&#xff0c;\u6570\u636e\u66f4\u65b0\u7684\u9891\u7387\u8be5\u5982\u4f55\u628a\u63a7&#xff1f;\u662f\u8ffd\u6c42\u6781\u81f4\u7684\u5b9e\u65f6&#xff0c;\u8fd8\u662f\u8ffd\u6c42\u6781\u81f4\u7684\u7f13\u5b58&#xff1f;\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u63a2\u8ba8\u7684\u201c\u5e73\u8861\u7684\u827a\u672f\u201d \u201c\u5b9e\u65f6\u66f4\u65b0\u201d&#xff1a;\u6570\u636e\u91cd\u65b0\u9a8c\u8bc1&#xff08;Revalidation&#xff09;\u7684\u7b56\u7565\u9009\u62e9\u3002\u60a8\u51c6\u5907\u597d\u4e3a\u4f60\u7684\u6570\u636e\u6d41\u88c5\u4e0a\u7cbe\u51c6\u7684\u201c\u8d77\u640f\u5668\u201d\u4e86\u5417&#xff1f;<\/p>\n<h3>5.4 \u201c\u5b9e\u65f6\u66f4\u65b0\u201d\u2014\u2014\u6570\u636e\u91cd\u65b0\u9a8c\u8bc1&#xff08;Revalidation&#xff09;\u7684\u7b56\u7565\u9009\u62e9<\/h3>\n<p>\u5982\u679c\u8bf4\u7f13\u5b58\u662f\u5168\u6808\u5e94\u7528\u7684\u201c\u9632\u6ce2\u5824\u201d&#xff0c;\u4fdd\u62a4\u670d\u52a1\u5668\u514d\u53d7\u6d41\u91cf\u6d77\u5578\u7684\u51b2\u51fb&#xff0c;\u90a3\u4e48\u91cd\u65b0\u9a8c\u8bc1&#xff08;Revalidation&#xff09;\u5c31\u662f\u7cbe\u5bc6\u7684\u6c34\u95f8\u3002\u5b83\u51b3\u5b9a\u4e86\u6570\u636e\u6d41\u52a8\u7684\u65f6\u673a\u4e0e\u65b0\u9c9c\u5ea6\u3002<\/p>\n<p>\u5728\u73b0\u4ee3 Web \u7684\u590d\u6742\u751f\u6001\u4e2d&#xff0c;\u6570\u636e\u7684\u65f6\u6548\u6027\u6709\u7740\u622a\u7136\u4e0d\u540c\u7684\u5e95\u8272&#xff1a;\u9759\u6001\u6587\u6863\u53ef\u4ee5\u6c89\u7761\u6570\u6708&#xff0c;\u800c\u80a1\u5e02\u884c\u60c5\u5fc5\u987b\u5206\u79d2\u5fc5\u4e89\u3002\u4e00\u4e2a\u5e73\u5eb8\u7684\u67b6\u6784\u5e08\u53ea\u4f1a\u201c\u4e00\u5200\u5207\u201d\u5730\u8bbe\u7f6e\u8fc7\u671f\u65f6\u95f4&#xff0c;\u800c\u9876\u7ea7\u7684 Next.js \u4e13\u5bb6\u5219\u4f1a\u50cf\u8c03\u97f3\u5e08\u4e00\u6837&#xff0c;\u901a\u8fc7\u5bf9\u8def\u5f84&#xff08;Path&#xff09;\u3001\u6807\u7b7e&#xff08;Tag&#xff09;\u548c\u65f6\u95f4\u95f4\u9694&#xff08;Interval&#xff09;\u7684\u7cbe\u5fae\u64cd\u63a7&#xff0c;\u5728\u201c\u6781\u81f4\u6027\u80fd\u201d\u4e0e\u201c\u6570\u636e\u5b9e\u65f6\u201d\u4e4b\u95f4\u627e\u5230\u90a3\u4e2a\u5b8c\u7f8e\u7684\u5171\u632f\u70b9\u3002<\/p>\n<p>\u672c\u8282\u6211\u4eec\u5c06\u6df1\u5165\u63a2\u8ba8 Next.js \u7684\u6570\u636e\u9a8c\u8bc1\u54f2\u5b66&#xff0c;\u5b66\u4e60\u5982\u4f55\u4e3a\u4e0d\u540c\u7684\u4e1a\u52a1\u573a\u666f\u5b9a\u5236\u6700\u4f18\u7684\u201c\u6570\u636e\u8d77\u640f\u5668\u201d\u3002<\/p>\n<p>\u4e00\u3001 \u7b56\u7565\u7684\u8c31\u7cfb&#xff1a;\u4ece\u201c\u9759\u6001\u201d\u5230\u201c\u77ac\u65f6\u201d\u7684\u8de8\u5ea6<\/p>\n<p>Next.js \u63d0\u4f9b\u4e86\u4e09\u5957\u6838\u5fc3\u7684\u91cd\u65b0\u9a8c\u8bc1\u7b56\u7565&#xff0c;\u5b83\u4eec\u6784\u6210\u4e86\u4ece\u51b7\u5230\u70ed\u3001\u4ece\u88ab\u52a8\u5230\u4e3b\u52a8\u7684\u5b8c\u6574\u9891\u8c31\u3002<\/p>\n<p>1. \u65f6\u95f4\u9a71\u52a8&#xff1a;\u5b9a\u65f6\u91cd\u65b0\u9a8c\u8bc1 (Time-based Revalidation)<\/p>\n<p>\u8fd9\u662f\u6700\u7ecf\u5178\u7684\u201c\u80cc\u666f\u5237\u65b0\u201d\u6a21\u5f0f\u3002\u901a\u8fc7\u00a0fetch(url, { next: { revalidate: 3600 } })&#xff0c;\u4f60\u544a\u8bc9\u6846\u67b6&#xff1a;\u8fd9\u4efd\u6570\u636e\u81f3\u5c11\u65b0\u9c9c 1 \u5c0f\u65f6\u3002<\/p>\n<ul>\n<li>\n<p>SWR \u54f2\u5b66&#xff08;Stale-While-Revalidate&#xff09;&#xff1a;Next.js \u91c7\u7528\u7684\u662f\u6781\u5177\u667a\u6167\u7684\u5f02\u6b65\u66f4\u65b0\u673a\u5236\u3002\u5f53 1 \u5c0f\u65f6\u8fc7\u53bb&#xff0c;\u7b2c\u4e00\u4e2a\u8bbf\u95ee\u8005\u770b\u5230\u7684\u4f9d\u7136\u662f\u65e7\u6570\u636e&#xff08;Stale&#xff09;&#xff0c;\u4f46\u6846\u67b6\u4f1a\u5728\u540e\u53f0\u9759\u9ed8\u5730\u53d1\u8d77\u66f4\u65b0\u8bf7\u6c42\u3002\u7b2c\u4e8c\u4e2a\u8bbf\u95ee\u8005\u5219\u4f1a\u770b\u5230\u7115\u7136\u4e00\u65b0\u7684\u5185\u5bb9\u3002<\/p>\n<\/li>\n<li>\n<p>\u573a\u666f&#xff1a;\u9002\u7528\u4e8e\u535a\u5ba2\u3001\u65b0\u95fb\u5217\u8868\u7b49\u5bf9\u5b9e\u65f6\u6027\u6709\u4e00\u5b9a\u5bb9\u5fcd\u5ea6&#xff0c;\u4f46\u53c8\u4e0d\u5e0c\u671b\u624b\u52a8\u5e72\u9884\u7684\u573a\u666f\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u4e8b\u4ef6\u9a71\u52a8&#xff1a;\u6309\u9700\u91cd\u65b0\u9a8c\u8bc1 (On-demand Revalidation)<\/p>\n<p>\u8fd9\u662f\u5168\u6808\u67b6\u6784\u4e2d\u6700\u5177\u9b45\u529b\u7684\u201c\u7cbe\u786e\u6253\u51fb\u201d\u6a21\u5f0f\u3002\u5b83\u4e0d\u4f9d\u8d56\u65f6\u95f4&#xff0c;\u800c\u662f\u4f9d\u8d56\u4e1a\u52a1\u52a8\u4f5c\u3002<\/p>\n<ul>\n<li>\n<p>\u8def\u5f84\u7206\u7834 (revalidatePath)&#xff1a;\u76f4\u63a5\u6e05\u7a7a\u7279\u5b9a\u8def\u7531\u4e0b\u7684\u6240\u6709\u7f13\u5b58\u3002<\/p>\n<\/li>\n<li>\n<p>\u6807\u7b7e\u8ffd\u8e2a (revalidateTag)&#xff1a;\u8fd9\u662f Next.js \u7684\u6740\u624b\u950f\u3002\u4f60\u53ef\u4ee5\u8de8\u8d8a\u7269\u7406\u8def\u7531&#xff0c;\u5c06\u6240\u6709\u5173\u8054\u6570\u636e\u7684\u00a0fetch\u00a0\u6807\u8bb0\u4e3a\u00a0tags: [&#039;product-123&#039;]\u3002\u53ea\u8981\u5e93\u5b58\u4e00\u53d8&#xff0c;\u4e00\u6b21\u8c03\u7528&#xff0c;\u5168\u7403\u8303\u56f4\u5185\u6240\u6709\u5f15\u7528\u8be5\u5546\u54c1\u7684\u9875\u9762\u90fd\u4f1a\u5728\u4e0b\u4e00\u6b21\u8bf7\u6c42\u65f6\u540c\u6b65\u66f4\u65b0\u3002<\/p>\n<\/li>\n<li>\n<p>\u573a\u666f&#xff1a;\u7535\u5546\u5e93\u5b58\u3001\u7528\u6237\u4fe1\u606f\u4fee\u6539\u3001\u5185\u5bb9\u7ba1\u7406\u7cfb\u7edf&#xff08;CMS&#xff09;\u53d1\u5e03\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e8c\u3001 \u67b6\u6784\u7684\u5fc3\u6cd5&#xff1a;\u5982\u4f55\u9009\u62e9\u4f60\u7684\u9a8c\u8bc1\u5200\u6cd5&#xff1f;<\/p>\n<p>\u9009\u62e9\u9a8c\u8bc1\u7b56\u7565&#xff0c;\u672c\u8d28\u4e0a\u662f\u5728\u505a\u201c\u4e00\u81f4\u6027\u201d\u4e0e\u201c\u53ef\u7528\u6027\u201d\u7684\u6743\u8861\u3002<\/p>\n<table>\n<tr>\n<td>\u4e1a\u52a1\u7279\u5f81<\/td>\n<td>\u63a8\u8350\u7b56\u7565<\/td>\n<td>\u6838\u5fc3\u8003\u91cf<\/td>\n<\/tr>\n<tbody>\n<tr>\n<td>\u9ad8\u9891\u53d8\u52a8\u3001\u5bf9\u5ef6\u8fdf\u96f6\u5bb9\u5fcd<\/td>\n<td>revalidate &#061; 0\u00a0(\u7981\u7528\u7f13\u5b58)<\/td>\n<td>\u5b81\u53ef\u727a\u7272\u6027\u80fd&#xff0c;\u4e5f\u8981\u6570\u636e\u7684\u7edd\u5bf9\u771f\u5b9e\u3002<\/td>\n<\/tr>\n<tr>\n<td>\u7a33\u5b9a\u3001\u4f4e\u9891\u66f4\u65b0\u7684\u5185\u5bb9<\/td>\n<td>revalidate &#061; 3600\u00a0(\u5b9a\u65f6)<\/td>\n<td>\u6781\u5927\u7684\u51cf\u8f7b\u670d\u52a1\u5668\u8d1f\u62c5&#xff0c;\u6d41\u91cf\u9ad8\u5cf0\u65f6\u7684\u5c4f\u969c\u3002<\/td>\n<\/tr>\n<tr>\n<td>\u7531\u7528\u6237\u884c\u4e3a\u89e6\u53d1\u7684\u53d8\u66f4<\/td>\n<td>revalidateTag\u00a0(\u6309\u9700)<\/td>\n<td>\u6027\u80fd\u6700\u4f18\u89e3\u3002\u5e73\u65f6\u5168\u662f\u9759\u6001\u7f13\u5b58&#xff0c;\u53ea\u5728\u6539\u53d8\u65f6\u77ac\u95f4\u751f\u6548\u3002<\/td>\n<\/tr>\n<tr>\n<td>\u5343\u4eba\u5343\u9762\u7684\u4e2a\u6027\u5316\u6570\u636e<\/td>\n<td>no-store\u00a0\u6216 \u5ba2\u6237\u7aef Fetch<\/td>\n<td>\u7f13\u5b58\u7684\u610f\u4e49\u4e0d\u5927&#xff0c;\u56e0\u4e3a\u65e0\u6cd5\u5171\u4eab\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u4e09\u3001 \u6781\u81f4\u4f18\u5316\u7684\u6740\u624b\u950f&#xff1a;\u5c40\u90e8\u6d41\u5f0f\u66f4\u65b0<\/p>\n<p>\u5728 2026 \u5e74\u7684\u4eca\u5929&#xff0c;\u5355\u7eaf\u7684\u201c\u6574\u9875\u5237\u65b0\u201d\u5df2\u663e\u7c97\u7b28\u3002Next.js \u7684\u9a8c\u8bc1\u7b56\u7565\u4e0e\u00a0Streaming&#xff08;\u6d41\u5f0f\u4f20\u8f93&#xff09;\u00a0\u7ed3\u5408&#xff0c;\u4ea7\u751f\u4e86\u4e00\u79cd\u540d\u4e3a\u201c\u5c40\u90e8\u5524\u9192\u201d\u7684\u4f53\u9a8c\u3002<\/p>\n<p>\u5f53\u4f60\u8c03\u7528\u00a0revalidateTag\u00a0\u65f6&#xff0c;Next.js \u4e0d\u4f1a\u5f3a\u5236\u7528\u6237\u5237\u65b0\u6d4f\u89c8\u5668&#xff0c;\u800c\u662f\u5728\u4e0b\u4e00\u6b21\u5bfc\u822a\u6216\u64cd\u4f5c\u65f6&#xff0c;\u4ec5\u901a\u8fc7\u7f51\u7edc\u53d1\u9001\u53d7\u5f71\u54cd\u7ec4\u4ef6\u7684\u00a0RSC Payload\u3002\u8fd9\u610f\u5473\u7740&#xff0c;\u5bfc\u822a\u680f\u53ef\u80fd\u4fdd\u6301\u4e0d\u53d8&#xff0c;\u800c\u4fa7\u8fb9\u680f\u7684\u901a\u77e5\u7ea2\u70b9\u5374\u80fd\u7cbe\u51c6\u3001\u9759\u9ed8\u5730\u5b8c\u6210\u201c\u5b9e\u65f6\u66f4\u65b0\u201d\u3002<\/p>\n<p>\u56db\u3001 \u5b9e\u6218\u8ff7\u601d&#xff1a;\u4e3a\u4ec0\u4e48\u6211\u7684\u6570\u636e\u6ca1\u6709\u66f4\u65b0&#xff1f;<\/p>\n<p>\u4f5c\u4e3a\u4e13\u5bb6&#xff0c;\u4f60\u9700\u8981\u8b66\u60d5\u4ee5\u4e0b\u4e09\u4e2a\u5bfc\u81f4\u9a8c\u8bc1\u5931\u6548\u7684\u201c\u5e7d\u7075\u201d&#xff1a;<\/p>\n<li>\n<p>\u7f13\u5b58\u5c42\u7ea7\u5c4f\u853d&#xff1a;\u5982\u679c\u4f60\u5728 CDN \u5c42&#xff08;\u5982 Cloudflare&#xff09;\u8bbe\u7f6e\u4e86\u5f3a\u7f13\u5b58&#xff0c;Next.js \u7684\u00a0revalidate\u00a0\u6307\u4ee4\u53ef\u80fd\u6839\u672c\u65e0\u6cd5\u5230\u8fbe\u7528\u6237\u7684\u6d4f\u89c8\u5668\u3002\u4f60\u9700\u8981\u786e\u4fdd CDN \u80fd\u591f\u8bc6\u522b\u00a0Cache-Control\u00a0\u54cd\u5e94\u5934\u3002<\/p>\n<\/li>\n<li>\n<p>\u9759\u6001\u751f\u6210\u7684\u9677\u9631&#xff1a;\u5728\u6784\u5efa\u65f6&#xff08;Build Time&#xff09;\u83b7\u53d6\u7684\u6570\u636e&#xff0c;\u9664\u975e\u914d\u7f6e\u4e86\u00a0revalidate&#xff0c;\u5426\u5219\u5b83\u4eec\u4f1a\u56fa\u5316\u5728 HTML \u4e2d\u3002\u5bf9\u4e8e\u9700\u8981\u52a8\u6001\u66f4\u65b0\u7684\u52a8\u6001\u8def\u7531&#xff0c;\u5fc5\u987b\u663e\u5f0f\u58f0\u660e\u9a8c\u8bc1\u7b56\u7565\u3002<\/p>\n<\/li>\n<li>\n<p>\u5f00\u53d1\u73af\u5883\u7684\u9519\u89c9&#xff1a;\u5728\u00a0next dev\u00a0\u6a21\u5f0f\u4e0b&#xff0c;\u4e3a\u4e86\u65b9\u4fbf\u5f00\u53d1&#xff0c;\u6846\u67b6\u7684\u884c\u4e3a\u6709\u65f6\u4f1a\u4e0e\u751f\u4ea7\u73af\u5883&#xff08;next start&#xff09;\u4e0d\u4e00\u81f4\u3002\u6c38\u8fdc\u8981\u5728\u751f\u4ea7\u73af\u5883\u6784\u5efa\u4e2d\u6d4b\u8bd5\u4f60\u7684\u9a8c\u8bc1\u903b\u8f91\u3002<\/p>\n<\/li>\n<p>\u4e94\u3001 \u603b\u7ed3&#xff1a;\u901a\u5f80\u201c\u81ea\u9002\u5e94\u5e94\u7528\u201d\u4e4b\u8def<\/p>\n<p>\u6570\u636e\u91cd\u65b0\u9a8c\u8bc1\u4e0d\u4ec5\u662f\u4e00\u4e2a\u6280\u672f\u53c2\u6570&#xff0c;\u5b83\u662f\u5e94\u7528\u201c\u751f\u547d\u8282\u5f8b\u201d\u7684\u4f53\u73b0\u3002<\/p>\n<ul>\n<li>\n<p>\u5b9a\u65f6\u9a8c\u8bc1\u662f\u5e94\u7528\u7684\u201c\u65b0\u9648\u4ee3\u8c22\u201d&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u6309\u9700\u9a8c\u8bc1\u662f\u5e94\u7528\u7684\u201c\u5e94\u6fc0\u53cd\u5e94\u201d&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u7981\u7528\u7f13\u5b58\u662f\u5e94\u7528\u7684\u201c\u5373\u65f6\u611f\u77e5\u201d\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e00\u4e2a\u9876\u7ea7\u7684\u5168\u6808\u5e94\u7528&#xff0c;\u5e94\u8be5\u662f\u8fd9\u4e09\u79cd\u8282\u594f\u7684\u4ea4\u54cd\u3002\u5b83\u5728\u9759\u6001\u7684\u57fa\u5ea7\u4e0a&#xff0c;\u8df3\u52a8\u7740\u52a8\u6001\u7684\u5fc3\u810f\u3002\u901a\u8fc7\u7cbe\u51c6\u7684\u9a8c\u8bc1\u7b56\u7565&#xff0c;\u6211\u4eec\u5b9e\u73b0\u4e86\u5168\u6808\u540c\u6784\u7684\u7ec8\u6781\u7406\u60f3&#xff1a;\u8ba9\u7528\u6237\u5728\u4eab\u53d7\u9759\u6001\u7f51\u7ad9\u6781\u901f\u6027\u80fd\u7684\u540c\u65f6&#xff0c;\u62e5\u6709\u52a8\u6001\u5e94\u7528\u6beb\u79d2\u7ea7\u7684\u54cd\u5e94\u4f53\u9a8c\u3002\u81f3\u6b64&#xff0c;\u7b2c\u4e94\u7ae0\u201c\u6570\u636e\u7684\u5fc3\u6cd5\u201d\u5df2\u5706\u6ee1\u5408\u62e2\u3002\u6211\u4eec\u4ece\u83b7\u53d6\u7684\u6e90\u5934&#xff0c;\u8d70\u5230\u4e86\u5b58\u50a8\u7684\u6df1\u5904&#xff0c;\u6700\u540e\u638c\u63e1\u4e86\u540c\u6b65\u7684\u5f8b\u52a8\u3002\u6570\u636e\u5df2\u6ee1&#xff0c;\u8840\u8109\u5df2\u901a\u3002\u63a5\u4e0b\u6765&#xff0c;\u6211\u4eec\u5c06\u8fc8\u5165\u7b2c\u516d\u7ae0&#xff1a;\u6e32\u67d3\u4e4b\u53d8\u2014\u2014SSG\u3001SSR\u3001ISR \u4e0e PPR \u3002\u6211\u4eec\u5c06\u5265\u79bb\u4e1a\u52a1\u903b\u8f91&#xff0c;\u8fdb\u5165\u7eaf\u7cb9\u7684\u5de5\u7a0b\u5b9e\u9a8c\u5ba4&#xff0c;\u53bb\u89e6\u6478\u670d\u52a1\u7aef\u6e32\u67d3&#xff08;SSR&#xff09;\u4e0e\u589e\u91cf\u9759\u6001\u518d\u751f&#xff08;ISR&#xff09;\u7684\u6781\u9650\u6027\u80fd\u5929\u82b1\u677f\u3002<\/p>\n<h2>\u7b2c6\u7ae0&#xff1a;\u6e32\u67d3\u4e4b\u53d8\u2014\u2014SSG\u3001SSR\u3001ISR \u4e0e PPR<\/h2>\n<ul>\n<li>\n<p>6.1 \u9759\u6001\u751f\u6210 (SSG)&#xff1a;\u00a0\u6784\u5efa\u65f6\u9884\u6e32\u67d3&#xff0c;\u6253\u9020\u6781\u81f4\u6781\u81f4\u901f\u5ea6<\/p>\n<\/li>\n<li>\n<p>6.2 \u670d\u52a1\u7aef\u6e32\u67d3 (SSR)&#xff1a;\u00a0\u52a8\u6001\u5185\u5bb9\u7684\u5b9e\u65f6\u751f\u6210\u4e4b\u9053<\/p>\n<\/li>\n<li>\n<p>6.3 \u589e\u91cf\u9759\u6001\u518d\u751f (ISR)&#xff1a;\u00a0\u5728\u4e0d\u91cd\u65b0\u90e8\u7f72\u7684\u60c5\u51b5\u4e0b\u66f4\u65b0\u9759\u6001\u9875\u9762<\/p>\n<\/li>\n<li>\n<p>6.4 \u90e8\u5206\u9884\u6e32\u67d3 (PPR)&#xff1a;\u00a0\u9759\u6001\u4e0e\u52a8\u6001\u5728\u540c\u4e00\u9875\u9762\u4e0b\u7684\u5b8c\u7f8e\u878d\u5408<\/p>\n<\/li>\n<\/ul>\n<h3>6.1 \u9759\u6001\u751f\u6210 (SSG) \u2014\u2014 \u6784\u5efa\u65f6\u9884\u6e32\u67d3&#xff0c;\u6253\u9020\u6781\u81f4\u901f\u5ea6<\/h3>\n<p>\u5982\u679c\u8bf4 Web \u5f00\u53d1\u662f\u4e00\u573a\u5173\u4e8e\u201c\u54cd\u5e94\u65f6\u95f4\u201d\u7684\u7530\u5f84\u8d5b&#xff0c;\u90a3\u4e48\u00a0SSG (Static Site Generation&#xff0c;\u9759\u6001\u751f\u6210)\u00a0\u5c31\u662f\u90a3\u540d\u5728\u53d1\u4ee4\u67aa\u54cd\u524d\u5c31\u5df2\u7ecf\u7ad9\u5728\u7ec8\u70b9\u7ebf\u4e0a\u7684\u9009\u624b\u3002<\/p>\n<p>\u5728 Web \u6f14\u8fdb\u7684\u8f6e\u56de\u4e2d&#xff0c;\u6211\u4eec\u66fe\u4ece\u539f\u59cb\u7684\u9759\u6001 HTML \u8d70\u5411\u4e86\u590d\u6742\u7684\u52a8\u6001\u6e32\u67d3&#xff0c;\u800c SSG \u7684\u5174\u8d77\u5219\u662f\u4e00\u79cd\u201c\u5426\u5b9a\u4e4b\u5426\u5b9a\u201d\u7684\u54f2\u5b66\u56de\u5f52\u3002\u5b83\u4e3b\u5f20\u5c06\u8ba1\u7b97\u7684\u538b\u529b\u4ece\u201c\u8bf7\u6c42\u65f6&#xff08;Request Time&#xff09;\u201d\u8f6c\u79fb\u5230\u201c\u6784\u5efa\u65f6&#xff08;Build Time&#xff09;\u201d\u3002\u8fd9\u4e0d\u4ec5\u662f\u4e00\u6b21\u6280\u672f\u7684\u5012\u6d41&#xff0c;\u66f4\u662f\u4e00\u6b21\u5173\u4e8e\u6027\u80fd\u8fb9\u754c\u7684\u6fc0\u8fdb\u63a2\u7d22\u3002\u5728 Next.js \u7684\u4e16\u754c\u89c2\u91cc&#xff0c;SSG \u662f\u6027\u80fd\u7684\u201c\u5723\u676f\u201d&#xff0c;\u662f\u8ba9\u5168\u7403\u7528\u6237\u5728\u6beb\u79d2\u95f4\u89e6\u8fbe\u5185\u5bb9\u7684\u6700\u77ed\u8def\u5f84\u3002<\/p>\n<p>\u4e00\u3001 \u9884\u5224\u7684\u827a\u672f&#xff1a;\u5c06\u672a\u6765\u63d0\u524d\u201c\u56fa\u5316\u201d<\/p>\n<p>SSG \u7684\u6838\u5fc3\u5965\u4e49\u5728\u4e8e\u201c\u9884\u5224\u201d\u3002<\/p>\n<p>\u5728\u4f20\u7edf\u7684 SSR \u6216 SPA \u4e2d&#xff0c;\u670d\u52a1\u5668\u6216\u6d4f\u89c8\u5668\u50cf\u662f\u4e00\u4e2a\u5373\u65f6\u70f9\u996a\u7684\u53a8\u5e08&#xff0c;\u53ea\u6709\u5f53\u987e\u5ba2&#xff08;\u7528\u6237&#xff09;\u4e0b\u5355\u65f6&#xff0c;\u624d\u5f00\u59cb\u6d17\u83dc\u3001\u5207\u83dc\u3001\u5f00\u706b\u3002\u800c SSG \u5219\u662f\u9ad8\u660e\u7684\u9884\u5236\u5927\u5e08\u3002\u5b83\u5728\u9879\u76ee\u6253\u5305\u6784\u5efa\u7684\u90a3\u4e00\u523b&#xff0c;\u5c31\u9884\u5148\u8bbf\u95ee\u4e86\u6570\u636e\u5e93&#xff0c;\u6293\u53d6\u4e86\u6240\u6709\u6570\u636e&#xff0c;\u5e76\u5c06 React \u7ec4\u4ef6\u6e32\u67d3\u6210\u4e86\u7eaf\u7cb9\u7684 HTML \u6587\u4ef6\u3002<\/p>\n<ul>\n<li>\n<p>\u7269\u7406\u4e0a\u7684\u6781\u901f&#xff1a;\u5f53\u7528\u6237\u53d1\u8d77\u8bf7\u6c42\u65f6&#xff0c;\u670d\u52a1\u5668\u65e0\u9700\u6267\u884c\u4efb\u4f55 JavaScript&#xff0c;\u65e0\u9700\u67e5\u8be2\u6570\u636e\u5e93&#xff0c;\u53ea\u9700\u5c06\u5df2\u7ecf\u5b58\u653e\u5728\u78c1\u76d8\u4e0a\u7684 HTML \u76f4\u63a5\u901a\u8fc7 HTTP \u53d1\u9001\u3002<\/p>\n<\/li>\n<li>\n<p>\u8fb9\u7f18\u8ba1\u7b97\u7684\u9988\u8d60&#xff1a;\u7531\u4e8e\u751f\u6210\u7684\u662f\u9759\u6001\u6587\u4ef6&#xff0c;\u5b83\u4eec\u53ef\u4ee5\u88ab\u5206\u53d1\u5230\u5168\u7403\u7684\u00a0CDN (\u5185\u5bb9\u5206\u53d1\u7f51\u7edc)\u00a0\u8282\u70b9\u4e0a\u3002\u65e0\u8bba\u7528\u6237\u8eab\u5904\u7ebd\u7ea6\u8fd8\u662f\u4e0a\u6d77&#xff0c;\u4ed6\u4eec\u8bbf\u95ee\u7684\u90fd\u662f\u7269\u7406\u8ddd\u79bb\u6700\u8fd1\u7684\u8fb9\u7f18\u670d\u52a1\u5668\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e8c\u3001 \u67b6\u6784\u7684\u7ea2\u5229&#xff1a;\u5b89\u5168\u3001\u5ec9\u4ef7\u4e0e\u7a33\u5b9a<\/p>\n<p>SSG \u5e26\u6765\u7684\u6536\u76ca\u8fdc\u8d85\u201c\u5feb\u201d\u8fd9\u4e00\u5355\u4e00\u7ef4\u5ea6&#xff0c;\u5b83\u5728\u5de5\u7a0b\u5c42\u9762\u63d0\u4f9b\u4e86\u4e00\u79cd\u6781\u5176\u7a33\u5065\u7684\u201c\u9632\u5fa1\u6027\u67b6\u6784\u201d\u3002<\/p>\n<p>1. \u7edd\u5bf9\u7684\u5b89\u5168&#xff1a;\u6ca1\u6709\u670d\u52a1\u5668\u811a\u672c<\/p>\n<p>\u56e0\u4e3a\u53d1\u5f80\u5ba2\u6237\u7aef\u7684\u662f\u7eaf\u9759\u6001 HTML&#xff0c;\u653b\u51fb\u8005\u5931\u53bb\u4e86\u5229\u7528\u52a8\u6001\u63a5\u53e3&#xff08;\u5982 SQL \u6ce8\u5165\u3001\u670d\u52a1\u7aef\u6e32\u67d3\u52ab\u6301&#xff09;\u7684\u7269\u7406\u7a7a\u95f4\u3002\u4f60\u7684\u5e94\u7528\u53d8\u6210\u4e86\u4e00\u5ea7\u6ca1\u6709\u5927\u95e8\u7684\u5821\u5792&#xff0c;\u53ea\u7559\u4e0b\u89c2\u5bdf\u7684\u7a97\u53e3\u3002<\/p>\n<p>2. \u6781\u81f4\u7684\u4f38\u7f29\u6027<\/p>\n<p>\u52a8\u6001\u5e94\u7528\u6700\u6015\u6d41\u91cf\u6d2a\u5cf0&#xff08;\u5982\u53cc\u5341\u4e00\u6216\u7a81\u53d1\u70ed\u70b9&#xff09;&#xff0c;\u56e0\u4e3a\u6bcf\u4e00\u6b21\u8bbf\u95ee\u90fd\u5728\u6d88\u8017 CPU \u548c\u5185\u5b58\u3002\u800c SSG \u9762\u5bf9\u767e\u4e07\u7ea7\u5e76\u53d1\u65f6&#xff0c;\u538b\u529b\u5168\u5728 CDN \u4fa7\u3002<\/p>\n<p>\u9759\u6001\u5185\u5bb9\u7684\u6269\u5c55\u6210\u672c\u51e0\u4e4e\u4e3a\u96f6\u3002\u4f60\u53ef\u4ee5\u7528\u6781\u5176\u4f4e\u5ec9\u7684\u6258\u7ba1\u6210\u672c&#xff0c;\u6491\u8d77\u5343\u4e07\u7ea7\u7684\u6d41\u91cf\u795e\u8bdd\u3002<\/p>\n<p>3. \u5bb9\u9519\u6027\u4e0e\u201c\u6c38\u4e0d\u6389\u7ebf\u201d<\/p>\n<p>\u5373\u4fbf\u4f60\u7684\u6570\u636e\u5e93\u5728\u751f\u4ea7\u73af\u5883\u5d29\u6e83\u4e86&#xff0c;\u5df2\u7ecf\u751f\u6210\u7684\u9759\u6001\u9875\u9762\u4f9d\u7136\u53ef\u4ee5\u6b63\u5e38\u63d0\u4f9b\u670d\u52a1\u3002\u8fd9\u79cd\u201c\u79bb\u7ebf\u53ef\u7528\u201d\u7684\u7279\u8d28&#xff0c;\u4e3a\u5168\u6808\u5e94\u7528\u6ce8\u5165\u4e86\u6781\u9ad8\u7684\u97e7\u6027\u3002<\/p>\n<p>\u4e09\u3001 \u4e13\u5bb6\u7ea7\u5b9e\u8df5&#xff1a;generateStaticParams\u00a0\u7684\u6df1\u5ea6\u8fd0\u7528<\/p>\n<p>\u5728 App Router \u4e2d&#xff0c;\u5b9e\u73b0 SSG \u7684\u5173\u952e\u5728\u4e8e\u5982\u4f55\u5904\u7406\u90a3\u4e9b\u5e26\u53c2\u6570\u7684\u52a8\u6001\u8def\u7531&#xff08;\u5982\u00a0\/blog\/[slug]&#xff09;\u3002Next.js \u63d0\u4f9b\u4e86\u00a0generateStaticParams\u00a0\u8fd9\u4e00\u5229\u5668&#xff0c;\u5b83\u662f\u8fde\u63a5\u201c\u52a8\u6001\u9700\u6c42\u201d\u4e0e\u201c\u9759\u6001\u4ea7\u7269\u201d\u7684\u7f57\u76d8\u3002<\/p>\n<p>\/\/ app\/blog\/[slug]\/page.tsx<\/p>\n<p>\/\/ \u8fd9\u4e2a\u51fd\u6570\u544a\u8bc9 Next.js&#xff1a;\u5728\u6784\u5efa\u65f6&#xff0c;\u628a\u8fd9\u4e9b slug \u5bf9\u5e94\u7684\u9875\u9762\u5168\u90e8\u751f\u6210\u51fa\u6765<br \/>\nexport async function generateStaticParams() {<br \/>\n  const posts &#061; await fetch(&#039;https:\/\/api.example.com\/posts&#039;).then(res &#061;&gt; res.json());<\/p>\n<p>  return posts.map((post) &#061;&gt; ({<br \/>\n    slug: post.slug,<br \/>\n  }));<br \/>\n}<\/p>\n<p>export default async function Page({ params }: { params: { slug: string } }) {<br \/>\n  const { slug } &#061; params;<br \/>\n  \/\/ \u6b64\u5904\u7684 fetch \u4f1a\u5728\u6784\u5efa\u65f6\u6267\u884c<br \/>\n  const post &#061; await getPost(slug);<br \/>\n  return &lt;article&gt;{post.content}&lt;\/article&gt;;<br \/>\n}<\/p>\n<p>\u5fc3\u6cd5\u8981\u70b9&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u5e76\u884c\u6784\u5efa&#xff1a;Next.js \u4f1a\u5728\u6784\u5efa\u65f6\u5e76\u884c\u6267\u884c\u8fd9\u4e9b\u53c2\u6570\u7684\u6e32\u67d3&#xff0c;\u6781\u5927\u7f29\u77ed\u4e86\u5927\u578b\u9879\u76ee\u7684\u7f16\u8bd1\u65f6\u95f4\u3002<\/p>\n<\/li>\n<li>\n<p>\u6309\u9700\u8865\u5168&#xff1a;\u901a\u8fc7\u914d\u7f6e\u00a0dynamicParams&#xff0c;\u4f60\u53ef\u4ee5\u51b3\u5b9a\u5f53\u7528\u6237\u8bbf\u95ee\u4e00\u4e2a\u6784\u5efa\u65f6\u672a\u751f\u6210\u7684\u9875\u9762\u65f6&#xff0c;\u662f\u76f4\u63a5\u8fd4\u56de 404&#xff0c;\u8fd8\u662f\u5373\u65f6\u8fdb\u884c\u4e00\u6b21\u201c\u5ef6\u8fdf\u751f\u6210\u201d\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u56db\u3001 SSG \u7684\u5c40\u9650&#xff1a;\u9759\u6001\u7684\u201c\u963f\u5580\u7409\u65af\u4e4b\u8e35\u201d<\/p>\n<p>\u4f5c\u4e3a\u5168\u6808\u4e13\u5bb6&#xff0c;\u6211\u4eec\u4e0d\u80fd\u76f2\u76ee\u8ff7\u4fe1 SSG\u3002\u5b83\u7684\u9ad8\u6027\u80fd\u662f\u5efa\u7acb\u5728\u5bf9\u201c\u65f6\u6548\u6027\u201d\u548c\u201c\u4e2a\u6027\u5316\u201d\u7684\u727a\u7272\u4e4b\u4e0a\u7684\u3002<\/p>\n<li>\n<p>\u6570\u636e\u7684\u201c\u4fdd\u9c9c\u671f\u201d&#xff1a;\u4e00\u65e6 HTML \u751f\u6210&#xff0c;\u5b83\u5c31\u4e0e\u6570\u636e\u6e90\u65ad\u5f00\u4e86\u8054\u7cfb\u3002\u5982\u679c\u4f60\u7684\u6570\u636e\u6bcf\u79d2\u949f\u90fd\u5728\u53d8&#xff08;\u5982\u80a1\u5e02\u884c\u60c5&#xff09;&#xff0c;SSG \u4f1a\u8ba9\u7528\u6237\u9677\u5165\u201c\u4fe1\u606f\u6ede\u540e\u201d\u7684\u6ce5\u6f6d\u3002<\/p>\n<\/li>\n<li>\n<p>\u6784\u5efa\u65f6\u95f4\u7684\u81a8\u80c0&#xff1a;\u5982\u679c\u4f60\u6709\u5341\u4e07\u4e2a\u5546\u54c1\u9875\u9762&#xff0c;\u6bcf\u4e00\u6b21\u4ee3\u7801\u6539\u52a8\u540e\u7684\u5168\u91cf\u6784\u5efa&#xff08;Build&#xff09;\u53ef\u80fd\u957f\u8fbe\u6570\u5c0f\u65f6\u3002\u8fd9\u5728\u8ffd\u6c42\u654f\u6377\u8fed\u4ee3\u7684\u4e92\u8054\u7f51\u5927\u5382\u4e2d\u662f\u4e0d\u53ef\u63a5\u53d7\u7684\u3002<\/p>\n<\/li>\n<li>\n<p>\u5343\u4eba\u5343\u9762\u7684\u56f0\u5883&#xff1a;\u9759\u6001\u9875\u9762\u65e0\u6cd5\u611f\u77e5\u201c\u4f60\u662f\u8c01\u201d\u3002\u5b83\u65e0\u6cd5\u76f4\u63a5\u6e32\u67d3\u51fa\u201c\u6b22\u8fce\u4f60&#xff0c;\u5f20\u4e09\u201d\u8fd9\u6837\u7684\u79c1\u6709\u5316\u5185\u5bb9&#xff0c;\u9664\u975e\u914d\u5408\u5ba2\u6237\u7aef\u7684\u4e8c\u6b21\u6c34\u5408\u3002<\/p>\n<\/li>\n<p>\u4e94\u3001 \u603b\u7ed3&#xff1a;\u9759\u6001\u751f\u6210\u7684\u6218\u7565\u5730\u4f4d<\/p>\n<p>SSG \u662f Next.js \u6027\u80fd\u4f18\u5316\u7684\u201c\u7b2c\u4e00\u9632\u7ebf\u201d\u3002<\/p>\n<p>\u5728\u67b6\u6784\u8bbe\u8ba1\u65f6&#xff0c;\u6211\u4eec\u7684\u539f\u5219\u5e94\u8be5\u662f&#xff1a;\u80fd\u7528\u9759\u6001&#xff0c;\u7edd\u4e0d\u7528\u52a8\u6001\u3002\u00a0\u5b83\u4ee3\u8868\u4e86 Web \u6027\u80fd\u7684\u7ec8\u6781\u7406\u60f3\u2014\u2014\u8ba9\u4fe1\u606f\u4ee5\u5149\u901f\u4f20\u64ad&#xff0c;\u800c\u4e0d\u53d7\u590d\u6742\u540e\u7aef\u903b\u8f91\u7684\u7f81\u7eca\u3002\u5b83\u5c06 Web \u5e94\u7528\u4ece\u6602\u8d35\u7684\u5b9e\u65f6\u8ba1\u7b97&#xff0c;\u964d\u7ef4\u6210\u4e86\u5ec9\u4ef7\u7684\u9759\u6001\u5206\u53d1\u3002<\/p>\n<p>\u201c\u9759\u6001\u201d\u4e0d\u4ee3\u8868\u201c\u6b7b\u677f\u201d&#xff0c;\u5b83\u4ee3\u8868\u7684\u662f\u4e00\u79cd\u5bf9\u7528\u6237\u65f6\u95f4\u7684\u6781\u5ea6\u5c0a\u91cd\u3002\u00a0\u5f53\u4f60\u5b66\u4f1a\u4e86\u5982\u4f55\u5c06\u590d\u6742\u7684\u4e1a\u52a1\u903b\u8f91\u5728\u6784\u5efa\u9636\u6bb5\u201c\u574d\u7f29\u201d\u6210\u6781\u81f4\u7684 HTML&#xff0c;\u4f60\u624d\u771f\u6b63\u9886\u609f\u4e86 Web \u6027\u80fd\u4f18\u5316\u7684\u66b4\u529b\u7f8e\u5b66\u3002<\/p>\n<p>\u7136\u800c&#xff0c;\u5f53\u6211\u4eec\u7684\u5e94\u7528\u5fc5\u987b\u9762\u5bf9\u90a3\u4e9b\u53d8\u5e7b\u83ab\u6d4b\u7684\u6570\u636e\u3001\u5fc5\u987b\u611f\u77e5\u6bcf\u4e00\u4f4d\u7528\u6237\u7684\u4e0d\u540c\u8eab\u4efd\u65f6&#xff0c;\u9759\u6001\u7684\u9632\u7ebf\u4fbf\u663e\u5f97\u6709\u4e9b\u5355\u8584\u3002\u8fd9\u65f6&#xff0c;\u6211\u4eec\u9700\u8981\u5f15\u5165\u4e00\u79cd\u66f4\u5177\u751f\u547d\u529b\u3001\u80fd\u591f\u5b9e\u65f6\u547c\u5438\u7684\u6e32\u67d3\u6a21\u578b\u3002\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u63a2\u8ba8\u7684\u670d\u52a1\u7aef\u6e32\u67d3 (SSR)&#xff1a;\u52a8\u6001\u5185\u5bb9\u7684\u5b9e\u65f6\u751f\u6210\u4e4b\u9053\u3002\u60a8\u51c6\u5907\u597d\u4ece\u201c\u9759\u6001\u56fa\u5316\u201d\u8de8\u8d8a\u5230\u201c\u52a8\u6001\u6d8c\u73b0\u201d\u4e86\u5417&#xff1f;<\/p>\n<h3>6.2 \u670d\u52a1\u7aef\u6e32\u67d3 (SSR) \u2014\u2014 \u52a8\u6001\u5185\u5bb9\u7684\u5b9e\u65f6\u751f\u6210\u4e4b\u9053<\/h3>\n<p>\u5982\u679c\u8bf4 SSG \u662f\u5c06\u5185\u5bb9\u5c01\u5b58\u5728\u51b0\u5ddd\u4e0b\u7684\u201c\u6807\u672c\u201d&#xff0c;\u8ffd\u6c42\u7684\u662f\u6c38\u6052\u7684\u9759\u6b62\u4e0e\u901f\u5ea6&#xff0c;\u90a3\u4e48\u00a0SSR (Server-Side Rendering&#xff0c;\u670d\u52a1\u7aef\u6e32\u67d3)\u00a0\u5219\u662f\u5954\u6d41\u4e0d\u606f\u7684\u201c\u6d3b\u6c34\u201d&#xff0c;\u8ffd\u6c42\u7684\u662f\u5bf9\u73b0\u5b9e\u4e16\u754c\u77ac\u606f\u4e07\u53d8\u7684\u5373\u65f6\u54cd\u5e94\u3002<\/p>\n<p>\u5728\u5168\u6808\u5f00\u53d1\u7684\u535a\u5f08\u4e2d&#xff0c;\u6211\u4eec\u603b\u4f1a\u9047\u5230\u90a3\u4e9b\u65e0\u6cd5\u9884\u5224\u7684\u65f6\u523b&#xff1a;\u7528\u6237\u7684\u8d2d\u7269\u8f66\u91cc\u8eba\u7740\u4ec0\u4e48&#xff1f;\u5f53\u524d\u7684\u80a1\u5e02\u5206\u65f6\u56fe\u8d70\u5411\u5982\u4f55&#xff1f;\u8fd9\u4f4d\u7279\u5b9a\u4f1a\u5458\u662f\u5426\u4eab\u6709\u4e13\u5c5e\u6298\u6263&#xff1f;\u9762\u5bf9\u8fd9\u4e9b\u201c\u5343\u4eba\u5343\u9762\u201d\u4e14\u201c\u5206\u79d2\u5fc5\u4e89\u201d\u7684\u573a\u666f&#xff0c;\u6784\u5efa\u65f6\u7684\u9759\u6001\u9884\u5224\u663e\u5f97\u97ad\u957f\u83ab\u53ca\u3002\u6b64\u65f6&#xff0c;SSR \u633a\u8eab\u800c\u51fa&#xff0c;\u5b83\u5728\u7528\u6237\u53d1\u8d77\u8bf7\u6c42\u7684\u6beb\u79d2\u4e4b\u95f4&#xff0c;\u73b0\u573a\u8c03\u5ea6\u6570\u636e\u3001\u6267\u884c\u903b\u8f91\u3001\u7eba\u7ec7 HTML\u3002\u5b83\u662f\u52a8\u6001 Web \u5e94\u7528\u7684\u7075\u9b42&#xff0c;\u662f\u771f\u6b63\u5b9e\u73b0\u201c\u6240\u89c1\u5373\u6700\u65b0\u201d\u7684\u7ec8\u6781\u65b9\u6848\u3002<\/p>\n<p>\u4e00\u3001 \u4e34\u573a\u53d1\u6325\u7684\u667a\u6167&#xff1a;\u8bf7\u6c42\u65f6\u7684\u201c\u73b0\u573a\u76f4\u64ad\u201d<\/p>\n<p>SSR \u7684\u6838\u5fc3\u672c\u8d28\u662f\u201c\u5373\u65f6\u6027\u201d\u3002<\/p>\n<p>\u4e0d\u540c\u4e8e SSG \u5728\u6253\u5305\u9636\u6bb5\u7684\u201c\u9884\u5904\u7406\u201d&#xff0c;SSR \u5c06\u6e32\u67d3\u52a8\u4f5c\u63a8\u8fdf\u5230\u4e86\u7528\u6237\u6309\u4e0b\u56de\u8f66\u952e\u3001\u8bf7\u6c42\u62b5\u8fbe\u670d\u52a1\u5668\u7684\u90a3\u4e00\u5239\u90a3\u3002\u670d\u52a1\u5668\u50cf\u662f\u4e00\u4f4d\u6280\u827a\u9ad8\u8d85\u7684\u4e34\u573a\u53a8\u5e08&#xff0c;\u6839\u636e\u90a3\u4e00\u523b\u7684\u98df\u6750&#xff08;\u6700\u65b0\u6570\u636e\u5e93\u72b6\u6001&#xff09;\u548c\u5ba2\u4eba\u7684\u7279\u6b8a\u53e3\u5473&#xff08;Cookie\u3001Header\u3001Session&#xff09;&#xff0c;\u5373\u65f6\u70f9\u996a\u51fa\u4e00\u4efd\u4e13\u5c5e\u7684\u9875\u9762\u9955\u992e\u3002<\/p>\n<ul>\n<li>\n<p>\u7edd\u5bf9\u7684\u65b0\u9c9c\u5ea6&#xff1a;\u7531\u4e8e\u6570\u636e\u662f\u5728\u8bf7\u6c42\u65f6\u83b7\u53d6\u7684&#xff0c;\u7528\u6237\u770b\u5230\u7684\u6c38\u8fdc\u662f\u6570\u636e\u5e93\u4e2d\u8df3\u52a8\u7684\u6700\u65b0\u6570\u503c\u3002<\/p>\n<\/li>\n<li>\n<p>\u6df1\u5ea6\u7684\u4e2a\u6027\u5316&#xff1a;SSR \u5929\u7136\u5177\u5907\u201c\u8bfb\u5fc3\u672f\u201d\u3002\u5b83\u80fd\u901a\u8fc7\u8bf7\u6c42\u5934\u8bc6\u522b\u7528\u6237\u8eab\u4efd&#xff0c;\u4ece\u800c\u6e32\u67d3\u51fa\u5e26\u6709\u4e2a\u4eba\u8272\u5f69\u7684\u79c1\u5bc6\u9875\u9762\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e8c\u3001 \u67b6\u6784\u7684\u5f20\u529b&#xff1a;SEO \u4e0e\u4ea4\u4e92\u6027\u80fd\u7684\u5e73\u8861<\/p>\n<p>\u5728\u5355\u9875\u5e94\u7528&#xff08;SPA&#xff09;\u6a2a\u884c\u7684\u5e74\u4ee3&#xff0c;SSR \u7684\u590d\u5174\u5f88\u5927\u7a0b\u5ea6\u4e0a\u662f\u4e3a\u4e86\u4fee\u590d Web \u7684\u4e24\u9879\u201c\u786c\u4f24\u201d&#xff1a;SEO&#xff08;\u641c\u7d22\u5f15\u64ce\u4f18\u5316&#xff09;\u4e0e\u00a0FCP&#xff08;\u9996\u6b21\u5185\u5bb9\u7ed8\u5236\u65f6\u95f4&#xff09;\u3002<\/p>\n<p>1. \u641c\u7d22\u5f15\u64ce\u7684\u201c\u76f4\u89c6\u611f\u201d<\/p>\n<p>\u722c\u866b\u662f\u6311\u5254\u7684\u89c2\u4f17&#xff0c;\u5b83\u4eec\u5f80\u5f80\u4e0d\u613f\u7b49\u5f85\u590d\u6742\u7684 JavaScript \u5728\u6d4f\u89c8\u5668\u4e2d\u5f02\u6b65\u52a0\u8f7d\u6570\u636e\u3002SSR \u76f4\u63a5\u5410\u51fa\u5b8c\u6574\u7684 HTML \u7ed3\u6784&#xff0c;\u8ba9 Google \u6216\u767e\u5ea6\u7684\u722c\u866b\u4e00\u773c\u770b\u7a7f\u9875\u9762\u7684\u6838\u5fc3\u8bed\u4e49\u3002<\/p>\n<p>SSR \u662f\u8fde\u63a5\u201c\u4e30\u5bcc\u4ea4\u4e92\u201d\u4e0e\u201c\u641c\u7d22\u53cb\u597d\u201d\u7684\u9ec4\u91d1\u6865\u6881&#xff0c;\u8ba9\u5e94\u7528\u5728\u62e5\u6709 App \u7ea7\u4f53\u9a8c\u7684\u540c\u65f6&#xff0c;\u4fdd\u7559\u7f51\u7ad9\u7684\u4f20\u64ad\u672c\u80fd\u3002<\/p>\n<p>2. \u544a\u522b\u201c\u767d\u5c4f\u7126\u8651\u201d<\/p>\n<p>\u5728\u5ba2\u6237\u7aef\u6e32\u67d3\u6a21\u5f0f\u4e0b&#xff0c;\u7528\u6237\u9700\u8981\u7ecf\u5386\u201c\u4e0b\u8f7d JS -&gt; \u89e3\u6790 JS -&gt; \u53d1\u8d77 Fetch -&gt; \u6e32\u67d3\u201d\u7684\u6f2b\u957f\u7b49\u5f85\u3002\u800c SSR \u5c06\u8fd9\u90e8\u5206\u8ba1\u7b97\u538b\u529b\u625b\u5728\u4e86\u670d\u52a1\u5668\u80a9\u4e0a\u3002\u7528\u6237\u5728\u5efa\u7acb\u8fde\u63a5\u540e\u7684\u7b2c\u4e00\u4e2a\u5305\u91cc&#xff0c;\u5c31\u80fd\u770b\u5230\u5b8c\u6574\u7684\u9875\u9762\u9aa8\u67b6\u3002<\/p>\n<ul>\n<li>\n<p>\u4e13\u5bb6\u89c6\u70b9&#xff1a;\u8fd9\u79cd\u201c\u521d\u89c1\u5373\u6240\u5f97\u201d\u7684\u5feb\u611f&#xff0c;\u662f\u63d0\u5347\u7528\u6237\u7559\u5b58\u7387\u7684\u6838\u6b66\u5668\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e09\u3001 \u52a8\u529b\u6e90\u6cc9&#xff1a;\u5728 Next.js \u4e2d\u9a71\u52a8 SSR<\/p>\n<p>\u5728 Next.js \u7684 App Router \u67b6\u6784\u4e2d&#xff0c;SSR \u7684\u89e6\u53d1\u4e0d\u518d\u4f9d\u8d56\u7e41\u7410\u7684 API&#xff0c;\u800c\u662f\u4e00\u79cd\u52a8\u6001\u672c\u80fd\u3002<\/p>\n<p>\u53ea\u8981\u4f60\u5728\u7ec4\u4ef6\u4e2d\u5f15\u5165\u4e86\u65e0\u6cd5\u9759\u6001\u5316\u7684\u201c\u52a8\u6001\u56e0\u5b50\u201d&#xff0c;Next.js \u5c31\u4f1a\u81ea\u52a8\u5c06\u8be5\u8def\u7531\u5207\u6362\u4e3a SSR \u6a21\u5f0f\u3002<\/p>\n<ul>\n<li>\n<p>\u52a8\u6001\u51fd\u6570&#xff1a;\u4f7f\u7528\u4e86\u00a0cookies()\u00a0\u6216\u00a0headers()\u3002<\/p>\n<\/li>\n<li>\n<p>\u52a8\u6001\u641c\u7d22\u53c2\u6570&#xff1a;\u8bbf\u95ee\u4e86\u00a0searchParams\u3002<\/p>\n<\/li>\n<li>\n<p>\u663e\u5f0f\u58f0\u660e&#xff1a;\u8bbe\u7f6e\u00a0export const dynamic &#061; &#039;force-dynamic&#039;\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\/\/ app\/dashboard\/page.tsx<br \/>\nimport { cookies } from &#039;next\/headers&#039;;<\/p>\n<p>export default async function Dashboard() {<br \/>\n  const cookieStore &#061; cookies();<br \/>\n  const theme &#061; cookieStore.get(&#039;theme&#039;); \/\/ \u52a8\u6001\u56e0\u5b50\u89e6\u53d1 SSR<\/p>\n<p>  \/\/ \u6bcf\u4e00\u4efd\u8bf7\u6c42\u90fd\u4f1a\u5b9e\u65f6\u67e5\u8be2\u6570\u636e\u5e93<br \/>\n  const data &#061; await db.userStats.findMany(); <\/p>\n<p>  return (<br \/>\n    &lt;div className&#061;{theme?.value}&gt;<br \/>\n      &lt;h1&gt;\u5b9e\u65f6\u4eea\u8868\u76d8&lt;\/h1&gt;<br \/>\n      &lt;StatsDisplay data&#061;{data} \/&gt;<br \/>\n    &lt;\/div&gt;<br \/>\n  );<br \/>\n}<\/p>\n<p>\u56db\u3001 \u6027\u80fd\u7684\u4ee3\u4ef7&#xff1a;\u670d\u52a1\u5668\u7684\u201c\u8d1f\u91cd\u524d\u884c\u201d<\/p>\n<p>\u4f5c\u4e3a\u9876\u7ea7\u7684\u67b6\u6784\u5e08&#xff0c;\u6211\u4eec\u5fc5\u987b\u6b63\u89c6 SSR \u7684\u201c\u53cc\u5203\u5251\u201d\u7279\u6027\u3002\u8fd9\u79cd\u6781\u81f4\u7684\u52a8\u6001\u611f\u5e76\u975e\u6ca1\u6709\u4ee3\u4ef7\u3002<\/p>\n<li>\n<p>\u670d\u52a1\u5668\u7684\u7b97\u529b\u67af\u7aed&#xff1a;SSG \u51e0\u4e4e\u4e0d\u5360 CPU&#xff0c;\u800c SSR \u7684\u6bcf\u4e00\u6b21\u8bbf\u95ee\u90fd\u8981\u7ecf\u5386\u4e00\u6b21\u5b8c\u6574\u7684\u7ec4\u4ef6\u6811\u6e32\u67d3\u3002\u5728\u9ad8\u5e76\u53d1\u6d41\u91cf\u4e0b&#xff0c;\u670d\u52a1\u5668\u7684\u538b\u529b\u5448\u51e0\u4f55\u7ea7\u6570\u589e\u957f\u3002<\/p>\n<\/li>\n<li>\n<p>TTFB (\u9996\u5b57\u8282\u5230\u8fbe\u65f6\u95f4) \u7684\u5ef6\u8fdf&#xff1a;\u56e0\u4e3a\u670d\u52a1\u5668\u8981\u5148\u53bb\u201c\u53d6\u6570\u201d\u518d\u201c\u6e32\u67d3\u201d&#xff0c;\u5982\u679c\u4f60\u7684\u6570\u636e\u5e93\u67e5\u8be2\u6162\u4e86 500ms&#xff0c;\u7528\u6237\u5c31\u4f1a\u76ef\u7740\u7a7a\u767d\u7684\u6d4f\u89c8\u5668\u6807\u7b7e\u591a\u770b 500ms\u3002<\/p>\n<\/li>\n<li>\n<p>\u6c34\u5408&#xff08;Hydration&#xff09;\u7684\u8d1f\u62c5&#xff1a;\u867d\u7136 HTML \u5230\u8fbe\u5feb&#xff0c;\u4f46\u6d4f\u89c8\u5668\u4f9d\u7136\u9700\u8981\u4e0b\u8f7d JS \u5e76\u4e0e DOM \u8fdb\u884c\u6bd4\u5bf9&#xff0c;\u5982\u679c\u9875\u9762\u8fc7\u4e8e\u590d\u6742&#xff0c;\u53ef\u80fd\u4f1a\u51fa\u73b0\u201c\u770b\u5f97\u89c1\u70b9\u4e0d\u52a8\u201d\u7684\u5c34\u5c2c\u77ac\u95f4\u3002<\/p>\n<\/li>\n<p>\u4e94\u3001 \u7ed3\u8bed&#xff1a;\u52a8\u6001\u751f\u6210\u7684\u751f\u547d\u529b<\/p>\n<p>SSR \u662f Next.js \u5904\u7406\u590d\u6742\u4ea4\u4e92\u4e0e\u79c1\u6709\u6570\u636e\u7684\u5e95\u5ea7\u3002<\/p>\n<p>\u5982\u679c\u8bf4 SSG \u8ffd\u6c42\u7684\u662f\u201c\u5feb\u201d&#xff0c;\u90a3\u4e48 SSR \u8ffd\u6c42\u7684\u5c31\u662f\u201c\u51c6\u201d\u3002\u5b83\u4e0d\u754f\u60e7\u590d\u6742\u6027&#xff0c;\u4e0d\u9003\u907f\u53d8\u52a8\u3002\u5b83\u5c06\u5168\u6808\u5f00\u53d1\u7684\u89e6\u89d2\u5ef6\u4f38\u5230\u4e86\u8bf7\u6c42\u7684\u6700\u524d\u7ebf&#xff0c;\u8ba9 Web \u5e94\u7528\u5177\u5907\u4e86\u5982\u540c\u751f\u7269\u822c\u7684\u5b9e\u65f6\u53cd\u9988\u80fd\u529b\u3002<\/p>\n<p>\u201c\u52a8\u6001\u201d\u4e0d\u662f\u6df7\u4e71&#xff0c;\u800c\u662f\u4e00\u79cd\u66f4\u9ad8\u7ea7\u7684\u79e9\u5e8f\u3002\u00a0\u5f53\u4f60\u5b66\u4f1a\u5728\u670d\u52a1\u5668\u7684\u8f70\u9e23\u58f0\u4e2d&#xff0c;\u4f18\u96c5\u5730\u7f16\u7ec7\u51fa\u4e00\u884c\u884c\u5e26\u6709\u7528\u6237\u6e29\u5ea6\u7684 HTML \u65f6&#xff0c;\u4f60\u4fbf\u638c\u63e1\u4e86 SSR \u7684\u7cbe\u9ad3\u2014\u2014\u5728\u53d8\u5e7b\u83ab\u6d4b\u7684\u4e92\u8054\u7f51\u6d6a\u6f6e\u4e2d&#xff0c;\u59cb\u7ec8\u80fd\u4e3a\u7528\u6237\u9012\u4e0a\u4e00\u4efd\u6700\u7cbe\u51c6\u3001\u6700\u65b0\u9c9c\u7684\u7b54\u6848\u3002<\/p>\n<p>SSR \u867d\u7136\u89e3\u51b3\u4e86\u52a8\u6001\u6027\u7684\u95ee\u9898&#xff0c;\u4f46\u5b83\u90a3\u6602\u8d35\u7684\u670d\u52a1\u5668\u6210\u672c\u548c TTFB \u5ef6\u8fdf\u59cb\u7ec8\u662f\u67b6\u6784\u5e08\u5fc3\u5934\u7684\u9634\u5f71\u3002\u6709\u6ca1\u6709\u4e00\u79cd\u65b9\u6cd5&#xff0c;\u65e2\u80fd\u62e5\u6709 SSG \u7684\u6781\u901f\u548c\u4f4e\u6210\u672c&#xff0c;\u53c8\u80fd\u62e5\u6709 SSR \u7684\u6570\u636e\u66f4\u65b0\u80fd\u529b&#xff1f;\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u63a2\u8ba8\u7684\u201c\u65f6\u7a7a\u6298\u53e0\u672f\u201d\u2014\u2014\u589e\u91cf\u9759\u6001\u518d\u751f (ISR)&#xff1a;\u5728\u4e0d\u91cd\u65b0\u90e8\u7f72\u7684\u60c5\u51b5\u4e0b\u66f4\u65b0\u9759\u6001\u9875\u9762\u3002\u60a8\u51c6\u5907\u597d\u89c1\u8bc1\u201c\u9759\u6001\u201d\u4e0e\u201c\u52a8\u6001\u201d\u7684\u7b2c\u4e00\u6b21\u4f1f\u5927\u63e1\u624b\u4e86\u5417&#xff1f;<\/p>\n<h3>6.3 \u589e\u91cf\u9759\u6001\u518d\u751f (ISR) \u2014\u2014 \u5728\u4e0d\u91cd\u65b0\u90e8\u7f72\u7684\u60c5\u51b5\u4e0b\u66f4\u65b0\u9759\u6001\u9875\u9762<\/h3>\n<p>\u5982\u679c\u8bf4 SSG \u662f\u6c38\u6052\u7684\u201c\u51b0\u5c01\u201d&#xff0c;\u800c SSR \u662f\u5954\u817e\u7684\u201c\u6d3b\u6c34\u201d&#xff0c;\u90a3\u4e48\u00a0ISR (Incremental Static Regeneration&#xff0c;\u589e\u91cf\u9759\u6001\u518d\u751f)\u00a0\u5219\u662f\u8fd9\u4e24\u8005\u4e4b\u95f4\u6700\u7cbe\u5999\u7684\u5e73\u8861\u827a\u672f\u3002<\/p>\n<p>\u5728\u4f20\u7edf\u7684 Web \u67b6\u6784\u4e2d&#xff0c;\u6027\u80fd\u4e0e\u5b9e\u65f6\u6027\u4f3c\u4e4e\u662f\u4e00\u573a\u4e0d\u53ef\u8c03\u548c\u7684\u96f6\u548c\u535a\u5f08&#xff1a;\u8981\u4e48\u9009\u62e9 SSG&#xff0c;\u4eab\u53d7\u6781\u81f4\u7684\u52a0\u8f7d\u901f\u5ea6&#xff0c;\u4f46\u5fc5\u987b\u5fcd\u53d7\u5185\u5bb9\u7684\u9648\u65e7&#xff1b;\u8981\u4e48\u9009\u62e9 SSR&#xff0c;\u4fdd\u8bc1\u5185\u5bb9\u7684\u65b0\u9c9c&#xff0c;\u4f46\u5fc5\u987b\u80cc\u8d1f\u6c89\u91cd\u7684\u670d\u52a1\u5668\u6210\u672c\u548c TTFB \u5ef6\u8fdf\u3002Next.js \u63a8\u51fa\u7684 ISR \u6a21\u5f0f&#xff0c;\u72b9\u5982\u5728\u65f6\u7a7a\u7684\u88c2\u7f1d\u4e2d\u5bfb\u5f97\u4e86\u7b2c\u4e09\u6761\u9053\u8def\u2014\u2014\u5b83\u5141\u8bb8\u6211\u4eec\u5728\u4fdd\u6301\u9759\u6001\u9875\u9762\u6781\u901f\u4f53\u9a8c\u7684\u540c\u65f6&#xff0c;\u4ee5\u201c\u589e\u91cf\u201d\u7684\u65b9\u5f0f\u5728\u540e\u53f0\u5b8c\u6210\u6570\u636e\u7684\u81ea\u6211\u66f4\u65b0\u3002\u5b83\u662f Web \u5f00\u53d1\u53f2\u4e0a\u7684\u4e00\u6b21\u201c\u9759\u52a8\u6001\u878d\u5408\u201d\u7684\u8303\u5f0f\u9769\u547d\u3002<\/p>\n<p>\u4e00\u3001 \u7f13\u5b58\u7684\u8fdb\u5316&#xff1a;\u8ba9\u9759\u6001\u9875\u9762\u201c\u547c\u5438\u201d\u8d77\u6765<\/p>\n<p>ISR \u7684\u6838\u5fc3\u9b45\u529b\u5728\u4e8e\u5176\u201c\u540e\u53f0\u89c9\u9192\u201d\u7684\u673a\u5236\u3002<\/p>\n<p>\u5728 SSG \u6a21\u5f0f\u4e0b&#xff0c;\u9875\u9762\u4e00\u65e6\u751f\u6210\u4fbf\u5982\u540c\u77f3\u7891\u523b\u5b57\u3002\u800c ISR \u4e3a\u8fd9\u5757\u77f3\u7891\u8d4b\u4e88\u4e86\u201c\u65b0\u9648\u4ee3\u8c22\u201d\u7684\u80fd\u529b\u3002\u901a\u8fc7\u4e00\u4e2a\u7b80\u5355\u7684\u00a0revalidate\u00a0\u914d\u7f6e&#xff0c;\u4f60\u4e3a\u9875\u9762\u8bbe\u5b9a\u4e86\u4e00\u4e2a\u751f\u547d\u5468\u671f\u3002<\/p>\n<ul>\n<li>\n<p>\u77ac\u65f6\u54cd\u5e94&#xff08;Stale-While-Revalidate&#xff09;&#xff1a;\u5f53\u7528\u6237\u8bf7\u6c42\u4e00\u4e2a\u8fc7\u671f\u7684\u9875\u9762\u65f6&#xff0c;ISR \u4e0d\u4f1a\u50cf SSR \u90a3\u6837\u8ba9\u7528\u6237\u539f\u5730\u7b49\u5f85\u5237\u65b0\u3002\u5b83\u4f1a\u50cf\u8001\u53cb\u53d9\u65e7\u822c&#xff0c;\u5148\u5c06\u7f13\u5b58\u4e2d\u7684\u201c\u65e7\u9875\u9762\u201d\u5448\u4e0a&#xff0c;\u786e\u4fdd\u7528\u6237\u83b7\u5f97\u77ac\u65f6\u7684\u611f\u5b98\u53cd\u9988\u3002<\/p>\n<\/li>\n<li>\n<p>\u5f02\u6b65\u91cd\u751f&#xff1a;\u5728\u7528\u6237\u6d4f\u89c8\u65e7\u9875\u9762\u7684\u540c\u65f6&#xff0c;\u670d\u52a1\u5668\u5728\u540e\u53f0\u6084\u7136\u542f\u52a8\u4e00\u6b21\u65b0\u7684\u6e32\u67d3\u3002\u5f53\u65b0\u9875\u9762\u7ec7\u5c31\u5b8c\u6210&#xff0c;\u5b83\u4f1a\u81ea\u52a8\u66ff\u6362\u6389\u65e7\u7684\u7f13\u5b58\u3002\u4e0b\u4e00\u4e2a\u8bbf\u95ee\u8005&#xff0c;\u4fbf\u80fd\u6beb\u65e0\u611f\u77e5\u5730\u8de8\u5165\u6700\u65b0\u7684\u65f6\u7a7a\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e8c\u3001 \u67b6\u6784\u7684\u964d\u7ef4\u6253\u51fb&#xff1a;\u65e0\u9700\u91cd\u542f\u7684\u201c\u5c40\u90e8\u8fdb\u5316\u201d<\/p>\n<p>ISR \u89e3\u51b3\u4e86\u5927\u578b\u7f51\u7ad9\u7684\u4e00\u4e2a\u7ec8\u6781\u75db\u70b9&#xff1a;\u6784\u5efa\u6210\u672c\u7206\u70b8\u3002<\/p>\n<p>\u60f3\u8c61\u4e00\u4e2a\u62e5\u6709\u767e\u4e07\u7ea7\u9875\u9762\u7684\u7535\u5546\u7f51\u7ad9\u3002\u5982\u679c\u4ec5\u4ec5\u56e0\u4e3a\u4fee\u6539\u4e86\u4e00\u4e2a\u5546\u54c1\u7684\u63cf\u8ff0\u5c31\u89e6\u53d1\u5168\u91cf SSG \u91cd\u65b0\u90e8\u7f72&#xff0c;\u8fd9\u7b80\u76f4\u662f\u5de5\u7a0b\u4e0a\u7684\u707e\u96be\u3002<\/p>\n<ul>\n<li>\n<p>\u6309\u9700\u589e\u91cf&#xff1a;ISR \u5141\u8bb8\u4f60\u53ea\u5b9a\u4e49\u4e00\u4e2a\u57fa\u7840\u7684\u201c\u58f3\u201d&#xff0c;\u968f\u7740\u7528\u6237\u7684\u8bbf\u95ee&#xff0c;\u9875\u9762\u5728\u670d\u52a1\u5668\u4e0a\u6309\u9700\u751f\u6210\u5e76\u7f13\u5b58\u3002\u8fd9\u79cd\u201c\u61d2\u52a0\u8f7d\u201d\u5f0f\u7684\u9759\u6001\u5316&#xff0c;\u8ba9\u4f60\u53ef\u4ee5\u8f7b\u677e\u7ba1\u7406\u5343\u4e07\u91cf\u7ea7\u7684\u8def\u5f84&#xff0c;\u800c\u65e0\u9700\u589e\u52a0\u4e00\u79d2\u949f\u7684\u6784\u5efa\u65f6\u95f4\u3002<\/p>\n<\/li>\n<li>\n<p>\u96f6\u6210\u672c\u90e8\u7f72&#xff1a;\u6570\u636e\u7684\u66f4\u65b0\u4e0d\u518d\u4f9d\u8d56 Git \u7684 Push \u6216 CI\/CD \u7684\u6d41\u6c34\u7ebf\u3002\u901a\u8fc7 Webhook \u6216\u65f6\u95f4\u7b56\u7565\u89e6\u53d1\u7684 ISR&#xff0c;\u8ba9\u5185\u5bb9\u7ba1\u7406\u7cfb\u7edf&#xff08;CMS&#xff09;\u7684\u66f4\u65b0\u80fd\u76f4\u63a5\u6620\u5c04\u5230\u751f\u4ea7\u73af\u5883\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e09\u3001 \u4e13\u5bb6\u7ea7\u914d\u7f6e&#xff1a;\u7cbe\u51c6\u63a7\u5236\u65f6\u7a7a\u7684\u5f8b\u52a8<\/p>\n<p>\u5728 Next.js \u7684 App Router \u4e2d&#xff0c;ISR \u7684\u5b9e\u73b0\u53d8\u5f97\u66f4\u52a0\u58f0\u660e\u5316\u3002\u4f60\u53ef\u4ee5\u9488\u5bf9\u7279\u5b9a\u7684 fetch \u8bf7\u6c42\u6216\u6574\u4e2a\u8def\u7531\u7247\u6bb5\u8bbe\u7f6e\u91cd\u65b0\u9a8c\u8bc1\u5468\u671f\u3002<\/p>\n<p>\/\/ app\/blog\/[id]\/page.tsx<\/p>\n<p>\/\/ \u7b56\u7565 1&#xff1a;\u57fa\u4e8e\u65f6\u95f4\u7684\u81ea\u52a8\u66f4\u65b0&#xff08;\u6bcf\u5c0f\u65f6\u66f4\u65b0\u4e00\u6b21&#xff09;<br \/>\nexport const revalidate &#061; 3600; <\/p>\n<p>export default async function Page({ params }: { params: { id: string } }) {<br \/>\n  \/\/ \u7b56\u7565 2&#xff1a;\u57fa\u4e8e\u7279\u5b9a\u8bf7\u6c42\u7684\u7ec6\u7c92\u5ea6\u7f13\u5b58<br \/>\n  const res &#061; await fetch(&#096;https:\/\/api.example.com\/post\/${params.id}&#096;, {<br \/>\n    next: { revalidate: 60 } \/\/ \u8be5\u8bf7\u6c42\u6bcf\u5206\u949f\u5237\u65b0\u4e00\u6b21<br \/>\n  });<br \/>\n  const data &#061; await res.json();<\/p>\n<p>  return &lt;article&gt;{data.content}&lt;\/article&gt;;<br \/>\n}<\/p>\n<p>\u5fc3\u6cd5\u8981\u70b9&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u6309\u9700\u7206\u7834&#xff08;On-demand Revalidation&#xff09;&#xff1a;\u9664\u4e86\u65f6\u95f4\u89e6\u53d1&#xff0c;\u4f60\u8fd8\u53ef\u4ee5\u5229\u7528\u00a0revalidateTag\u00a0\u6216\u00a0revalidatePath\u3002\u5f53\u4f60\u5728\u540e\u53f0\u70b9\u51fb\u201c\u4fdd\u5b58\u201d\u6309\u94ae&#xff0c;\u901a\u8fc7\u4e00\u4e2a\u7b80\u5355\u7684 API \u8c03\u7528&#xff0c;\u5373\u53ef\u77ac\u95f4\u8ba9\u7279\u5b9a\u9875\u9762\u201c\u51cb\u96f6\u5e76\u91cd\u751f\u201d\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u56db\u3001 \u6027\u80fd\u7684\u5f20\u529b&#xff1a;ISR \u7684\u8fb9\u754c\u4e0e\u4ee3\u4ef7<\/p>\n<p>\u4f5c\u4e3a\u4e00\u540d\u9876\u7ea7\u7684\u67b6\u6784\u5e08&#xff0c;\u5fc5\u987b\u6d1e\u5bdf ISR \u534e\u4e3d\u5916\u8868\u4e0b\u7684\u7269\u7406\u7ea6\u675f\u3002<\/p>\n<li>\n<p>\u9996\u4f4d\u8bbf\u5ba2\u7684\u4ee3\u4ef7&#xff1a;ISR \u7684\u540e\u53f0\u66f4\u65b0\u5bf9\u5f53\u524d\u8bbf\u5ba2\u662f\u65e0\u611f\u7684&#xff0c;\u8fd9\u610f\u5473\u7740\u201c\u7b2c\u4e00\u4e2a\u5403\u8783\u87f9\u7684\u4eba\u201d\u770b\u5230\u7684\u4f9d\u7136\u662f\u65e7\u6570\u636e\u3002\u5bf9\u4e8e\u5e93\u5b58\u3001\u7968\u52a1\u7b49\u5f3a\u4e00\u81f4\u6027\u573a\u666f&#xff0c;ISR \u5fc5\u987b\u914d\u5408\u5ba2\u6237\u7aef\u7684\u5b9e\u65f6\u6821\u9a8c\u3002<\/p>\n<\/li>\n<li>\n<p>\u5206\u5e03\u5f0f\u7f13\u5b58\u7684\u4e00\u81f4\u6027&#xff1a;\u5728\u591a\u533a\u57df\u90e8\u7f72&#xff08;Multi-region&#xff09;\u7684\u73af\u5883\u4e0b&#xff0c;\u4e0d\u540c\u8282\u70b9\u7684\u7f13\u5b58\u66f4\u65b0\u53ef\u80fd\u5b58\u5728\u65f6\u95f4\u5dee\u3002\u8fd9\u8981\u6c42\u6211\u4eec\u5728\u8bbe\u8ba1\u7cfb\u7edf\u65f6&#xff0c;\u5fc5\u987b\u5bb9\u5fcd\u8fd9\u79cd\u77ed\u6682\u7684\u201c\u6700\u7ec8\u4e00\u81f4\u6027\u201d\u3002<\/p>\n<\/li>\n<li>\n<p>\u8ba1\u7b97\u8d44\u6e90\u7684\u6ce2\u5cf0&#xff1a;\u5982\u679c\u5927\u91cf\u9875\u9762\u540c\u65f6\u8fc7\u671f\u5e76\u88ab\u89e6\u53d1\u91cd\u7ed8&#xff0c;\u670d\u52a1\u5668\u4f1a\u8fce\u6765\u77ed\u6682\u7684 CPU \u8d1f\u8f7d\u6ce2\u52a8\u3002<\/p>\n<\/li>\n<p>\u4e94\u3001 \u7ed3\u8bed&#xff1a;\u901a\u5f80\u81ea\u9002\u5e94\u67b6\u6784\u7684\u9636\u68af<\/p>\n<p>ISR \u662f Next.js \u5bf9\u201c\u6027\u80fd\u201d\u4e0e\u201c\u6548\u7387\u201d\u6df1\u5ea6\u601d\u8003\u540e\u7684\u7ed3\u6676\u3002<\/p>\n<p>\u5b83\u5c06 Web \u9875\u9762\u4ece\u5355\u4e00\u7684\u4ea7\u7269\u63d0\u5347\u4e3a\u4e00\u79cd\u201c\u81ea\u9002\u5e94\u7684\u751f\u547d\u4f53\u201d\u3002\u5b83\u5728\u6784\u5efa\u65f6\u8bde\u751f&#xff0c;\u5728\u4ea4\u4e92\u4e2d\u6210\u957f&#xff0c;\u5728\u540e\u53f0\u9759\u9ed8\u5730\u5b8c\u6210\u81ea\u6211\u7684\u8fed\u4ee3\u3002\u5b83\u8ba9\u5f00\u53d1\u8005\u4e0d\u5fc5\u518d\u5728\u901f\u5ea6\u4e0e\u65b0\u9c9c\u611f\u4e4b\u95f4\u505a\u75db\u82e6\u7684\u53d6\u820d&#xff0c;\u800c\u662f\u4ee5\u4e00\u79cd\u6781\u81f4\u4f18\u96c5\u7684\u59ff\u6001&#xff0c;\u7edf\u5408\u4e86\u4e24\u8005\u7684\u529b\u91cf\u3002<\/p>\n<p>\u201c\u589e\u91cf\u201d\u4e0d\u4ec5\u662f\u6280\u672f\u624b\u6bb5&#xff0c;\u66f4\u662f\u4e00\u79cd\u51cf\u71b5\u7684\u667a\u6167\u3002\u00a0\u5f53\u4f60\u5b66\u4f1a\u4e86\u5982\u4f55\u5229\u7528 ISR \u8ba9\u4f60\u7684\u9759\u6001\u7ad9\u70b9\u5728\u4e0d\u91cd\u65b0\u90e8\u7f72\u7684\u60c5\u51b5\u4e0b\u6301\u7eed\u8fdb\u5316&#xff0c;\u4f60\u4fbf\u638c\u63e1\u4e86\u73b0\u4ee3\u5168\u6808\u5f00\u53d1\u7684\u201c\u65f6\u7a7a\u6298\u53e0\u672f\u201d&#xff0c;\u8ba9\u4f60\u7684\u5e94\u7528\u5728\u832b\u832b\u4e92\u8054\u7f51\u4e2d&#xff0c;\u65e2\u6709\u78d0\u77f3\u4e4b\u56fa&#xff0c;\u53c8\u6709\u6d41\u6c34\u4e4b\u7075\u3002<\/p>\n<p>ISR \u867d\u7136\u7cbe\u5999&#xff0c;\u4f46\u5b83\u4f9d\u7136\u662f\u5728\u201c\u6574\u9875\u5237\u65b0\u201d\u7684\u903b\u8f91\u4e0b\u8fd0\u4f5c\u3002\u5982\u679c\u4e00\u4e2a\u9875\u9762 90% \u662f\u9759\u6001\u7684&#xff0c;\u53ea\u6709 10%&#xff08;\u5982\u8d2d\u7269\u8f66\u6570\u91cf&#xff09;\u5fc5\u987b\u52a8\u6001&#xff0c;\u96be\u9053\u6211\u4eec\u8981\u4e3a\u4e86\u8fd9 10% \u727a\u7272\u6389\u6574\u9875\u7684\u9759\u6001\u7ea2\u5229\u5417&#xff1f;\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u63a2\u8ba8\u7684\u7ec8\u6781\u5f62\u6001\u2014\u20146.4 \u90e8\u5206\u9884\u6e32\u67d3 (PPR)&#xff1a;\u9759\u6001\u4e0e\u52a8\u6001\u5728\u540c\u4e00\u9875\u9762\u4e0b\u7684\u5b8c\u7f8e\u878d\u5408\u3002\u60a8\u51c6\u5907\u597d\u8fce\u63a5\u6e32\u67d3\u6a21\u578b\u7684\u201c\u5927\u4e00\u7edf\u201d\u65f6\u4ee3\u4e86\u5417&#xff1f;<\/p>\n<h3>6.4 \u90e8\u5206\u9884\u6e32\u67d3 (PPR) \u2014\u2014 \u9759\u6001\u4e0e\u52a8\u6001\u5728\u540c\u4e00\u9875\u9762\u4e0b\u7684\u5b8c\u7f8e\u878d\u5408<\/h3>\n<p>\u5982\u679c\u8bf4 SSG\u3001SSR \u4e0e ISR \u662f\u5728\u6e32\u67d3\u6a21\u578b\u7684\u8c03\u8272\u76d8\u4e0a\u5404\u636e\u4e00\u89d2\u7684\u7eaf\u8272&#xff0c;\u90a3\u4e48\u00a0PPR (Partial Prerendering&#xff0c;\u90e8\u5206\u9884\u6e32\u67d3)\u00a0\u5219\u662f Next.js \u7ed8\u5236\u51fa\u7684\u4e00\u5e45\u6781\u5177\u672a\u6765\u611f\u7684\u201c\u5927\u4e00\u7edf\u201d\u6770\u4f5c\u3002<\/p>\n<p>\u5728\u4f20\u7edf\u7684\u67b6\u6784\u8ba4\u77e5\u4e2d&#xff0c;\u4e00\u4e2a\u9875\u9762\u8981\u4e48\u662f\u9759\u6001\u7684&#xff08;Static&#xff09;&#xff0c;\u8981\u4e48\u662f\u52a8\u6001\u7684&#xff08;Dynamic&#xff09;&#xff0c;\u8fd9\u79cd\u975e\u9ed1\u5373\u767d\u7684\u4e8c\u5143\u8bba\u957f\u671f\u7edf\u6cbb\u7740 Web \u5f00\u53d1\u3002\u4e3a\u4e86\u8ffd\u6c42\u6781\u901f\u52a0\u8f7d&#xff0c;\u6211\u4eec\u4e0d\u5f97\u4e0d\u5fcd\u53d7\u9759\u6001\u9875\u9762\u7684\u5343\u7bc7\u4e00\u5f8b&#xff1b;\u800c\u4e3a\u4e86\u5b9e\u73b0\u4e2a\u6027\u5316\u4ea4\u4e92&#xff0c;\u6211\u4eec\u53c8\u4e0d\u5f97\u4e0d\u63a5\u53d7\u670d\u52a1\u7aef\u6e32\u67d3\u7684 TTFB \u5ef6\u8fdf\u3002PPR \u7684\u51fa\u73b0&#xff0c;\u5f7b\u5e95\u7c89\u788e\u4e86\u8fd9\u9053\u85e9\u7bf1\u3002\u5b83\u5141\u8bb8\u5728\u540c\u4e00\u4e2a HTML \u6d41\u4e2d&#xff0c;\u9759\u6001\u7684\u9aa8\u67b6\u4e0e\u52a8\u6001\u7684\u7075\u9b42\u5e76\u80a9\u800c\u884c\u3002\u8fd9\u4e0d\u4ec5\u662f\u6e32\u67d3\u6280\u672f\u7684\u8fdb\u9636&#xff0c;\u66f4\u662f Web \u67b6\u6784\u5411\u201c\u751f\u7269\u7ea7\u54cd\u5e94\u201d\u8fc8\u51fa\u7684\u51b3\u5b9a\u6027\u4e00\u6b65\u3002<\/p>\n<p>\u4e00\u3001 \u67b6\u6784\u7684\u5723\u676f&#xff1a;\u6253\u7834\u9759\u52a8\u6001\u7684\u201c\u67cf\u6797\u5899\u201d<\/p>\n<p>PPR \u7684\u6838\u5fc3\u54f2\u5b66\u662f\u201c\u7269\u7406\u7ea7\u7684\u4e00\u4f53\u5316\u201d\u3002<\/p>\n<p>\u5b83\u4e0d\u518d\u8981\u6c42\u5f00\u53d1\u8005\u5728\u9875\u9762\u7ea7\u522b\u505a\u9009\u62e9\u9898&#xff0c;\u800c\u662f\u5229\u7528 React \u7684\u00a0Suspense\u00a0\u8fb9\u754c&#xff0c;\u81ea\u52a8\u5c06\u9875\u9762\u5207\u5206\u4e3a\u201c\u53ef\u9884\u62a5\u7684\u201d\u4e0e\u201c\u5373\u65f6\u7684\u201d\u4e24\u4e2a\u7ef4\u5ea6\u3002<\/p>\n<ul>\n<li>\n<p>\u9759\u6001\u5916\u58f3 (Static Shell)&#xff1a;\u9875\u9762\u7684\u5bfc\u822a\u680f\u3001\u4fa7\u8fb9\u680f\u3001\u5546\u54c1\u57fa\u7840\u4fe1\u606f\u7b49\u3002\u8fd9\u4e9b\u5185\u5bb9\u5728\u6784\u5efa\u65f6&#xff08;Build Time&#xff09;\u5c31\u5df2\u7ecf\u88ab\u7f16\u8bd1\u6210\u9759\u6001 HTML\u3002<\/p>\n<\/li>\n<li>\n<p>\u52a8\u6001\u5b54\u5f84 (Dynamic Holes)&#xff1a;\u4e2a\u6027\u5316\u7684\u63a8\u8350\u4f4d\u3001\u8d2d\u7269\u8f66\u6570\u91cf\u3001\u7528\u6237\u79c1\u6709\u72b6\u6001\u7b49\u3002\u8fd9\u4e9b\u5185\u5bb9\u88ab\u5305\u88f9\u5728\u00a0Suspense\u00a0\u4e2d&#xff0c;\u76f4\u5230\u8bf7\u6c42\u53d1\u751f\u7684\u77ac\u95f4&#xff08;Request Time&#xff09;\u624d\u5f00\u59cb\u751f\u6210\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u5f53\u8bf7\u6c42\u62b5\u8fbe\u65f6&#xff0c;Next.js \u4f1a\u7acb\u5373&#xff08;\u6beb\u79d2\u7ea7&#xff09;\u53d1\u9001\u5df2\u7ecf\u751f\u6210\u7684\u9759\u6001\u5916\u58f3\u3002\u7528\u6237\u51e0\u4e4e\u5728\u77ac\u95f4\u5c31\u80fd\u770b\u5230\u9875\u9762\u4e3b\u4f53&#xff0c;\u4e0e\u6b64\u540c\u65f6&#xff0c;\u52a8\u6001\u7684\u201c\u5b54\u5f84\u201d\u5728\u670d\u52a1\u5668\u7aef\u5e76\u884c\u5f02\u6b65\u8ba1\u7b97&#xff0c;\u5e76\u4ee5\u6d41\u7684\u5f62\u5f0f\u586b\u5145\u8fdb HTML \u4e2d\u3002<\/p>\n<p>\u4e8c\u3001 \u6027\u80fd\u7684\u5947\u8ff9&#xff1a;TTFB \u4e0e\u4ea4\u4e92\u7684\u6781\u9650\u5e73\u8861<\/p>\n<p>\u5728 PPR \u4e4b\u524d&#xff0c;\u6211\u4eec\u603b\u662f\u9677\u5165\u201c\u901f\u5ea6\u4e0e\u6df1\u5ea6\u201d\u7684\u82e6\u6218&#xff1a;<\/p>\n<li>\n<p>SSR \u7684\u75db\u70b9&#xff1a;\u7531\u4e8e\u9875\u9762\u662f\u52a8\u6001\u7684&#xff0c;\u670d\u52a1\u5668\u5fc5\u987b\u7b49\u6240\u6709\u6570\u636e&#xff08;\u5305\u62ec\u6700\u6162\u7684\u90a3\u4e2a\u63a5\u53e3&#xff09;\u52a0\u8f7d\u5b8c\u624d\u80fd\u53d1\u51fa\u7b2c\u4e00\u4e2a\u5b57\u8282&#xff0c;\u5bfc\u81f4 TTFB \u5c45\u9ad8\u4e0d\u4e0b\u3002<\/p>\n<\/li>\n<li>\n<p>SSG \u7684\u65e0\u5948&#xff1a;\u867d\u7136 TTFB \u6781\u5feb&#xff0c;\u4f46\u9996\u5c4f\u5185\u5bb9\u7f3a\u5931\u4e2a\u6027\u5316&#xff0c;\u5fc5\u987b\u7b49 JavaScript \u5728\u5ba2\u6237\u7aef\u201c\u6c34\u5408\u201d\u540e\u53d1\u8d77\u4e8c\u6b21\u8bf7\u6c42&#xff0c;\u9020\u6210\u89c6\u89c9\u4e0a\u7684\u95ea\u70c1\u3002<\/p>\n<\/li>\n<p>PPR \u5b9e\u73b0\u4e86\u201c\u9c7c\u4e0e\u718a\u638c\u517c\u5f97\u201d&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u6781\u81f4\u7684 TTFB&#xff1a;\u7531\u4e8e\u5916\u58f3\u662f\u9759\u6001\u7684&#xff0c;\u5b83\u5177\u5907 SSG \u7684\u5206\u53d1\u901f\u5ea6&#xff0c;\u80fd\u8fc5\u901f\u586b\u6ee1\u7528\u6237\u7684\u6d4f\u89c8\u5668\u7f13\u5b58\u3002<\/p>\n<\/li>\n<li>\n<p>\u65e0\u7f1d\u7684\u6d41\u5f0f\u6ce8\u5165&#xff1a;\u52a8\u6001\u5185\u5bb9\u4e0d\u662f\u5728\u5ba2\u6237\u7aef\u901a\u8fc7\u5f02\u6b65 Fetch \u83b7\u5f97\u7684&#xff0c;\u800c\u662f\u7531\u540c\u4e00\u4e2a HTTP \u8fde\u63a5\u6d41\u5f0f\u63a8\u9001\u3002\u8fd9\u79cd\u201c\u6570\u636e\u968f\u9875\u9762\u8d70\u201d\u7684\u6a21\u5f0f&#xff0c;\u6d88\u9664\u4e86\u4e0d\u5fc5\u8981\u7684\u5ba2\u6237\u7aef\u7f51\u7edc\u5f80\u8fd4&#xff08;Round-trips&#xff09;\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e09\u3001 \u96f6\u914d\u7f6e\u7684\u667a\u6167&#xff1a;\u57fa\u4e8e\u00a0Suspense\u00a0\u7684\u81ea\u52a8\u5bfc\u6d41<\/p>\n<p>\u4f5c\u4e3a\u9876\u7ea7\u7684\u5168\u6808\u6846\u67b6&#xff0c;Next.js \u5bf9 PPR \u7684\u8bbe\u8ba1\u4f53\u73b0\u4e86\u6781\u9ad8\u7684\u5de5\u7a0b\u7f8e\u5b66\u2014\u2014\u4f60\u51e0\u4e4e\u4e0d\u9700\u8981\u5b66\u4e60\u4efb\u4f55\u65b0\u7684 API\u3002<\/p>\n<p>PPR \u662f\u4e00\u9879\u7f16\u8bd1\u5668\u5c42\u9762\u7684\u589e\u5f3a\u3002\u5b83\u654f\u9510\u5730\u611f\u77e5\u4f60\u4ee3\u7801\u4e2d\u7684\u00a0Suspense\u00a0\u8fb9\u754c&#xff1a;<\/p>\n<p>\/\/ app\/page.tsx<br \/>\nexport default function Page() {<br \/>\n  return (<br \/>\n    &lt;main&gt;<br \/>\n      {\/* 1. \u9759\u6001\u90e8\u5206&#xff1a;\u6784\u5efa\u65f6\u751f\u6210&#xff0c;\u77ac\u65f6\u9001\u8fbe *\/}<br \/>\n      &lt;nav&gt;\u5168\u5c40\u5bfc\u822a&lt;\/nav&gt;<br \/>\n      &lt;header&gt;\u4eca\u65e5\u70ed\u9500\u5546\u54c1&lt;\/header&gt;<\/p>\n<p>      {\/* 2. \u52a8\u6001\u90e8\u5206&#xff1a;\u901a\u8fc7 Suspense \u6807\u8bb0\u201c\u52a8\u6001\u5b54\u5f84\u201d *\/}<br \/>\n      &lt;Suspense fallback&#061;{&lt;Skeleton \/&gt;}&gt;<br \/>\n        &lt;UserCartStatus \/&gt; {\/* \u5305\u542b cookies() \u6216\u52a8\u6001\u53d6\u6570 *\/}<br \/>\n      &lt;\/Suspense&gt;<\/p>\n<p>      &lt;Suspense fallback&#061;{&lt;RecommendationSkeleton \/&gt;}&gt;<br \/>\n        &lt;PersonalizedRecommendations \/&gt;<br \/>\n      &lt;\/Suspense&gt;<br \/>\n    &lt;\/main&gt;<br \/>\n  );<br \/>\n}<\/p>\n<p>\u5fc3\u6cd5\u8981\u70b9&#xff1a;\u00a0\u4f60\u53ea\u9700\u50cf\u5f80\u5e38\u4e00\u6837\u7f16\u5199 React \u4ee3\u7801\u3002Next.js \u7684\u7f16\u8bd1\u5668\u4f1a\u81ea\u52a8\u5206\u6790&#xff1a;\u54ea\u4e9b\u662f\u4e0d\u4f9d\u8d56\u52a8\u6001\u56e0\u5b50\u7684\u9759\u6001\u6811&#xff0c;\u54ea\u4e9b\u662f\u88ab\u00a0Suspense\u00a0\u5305\u88f9\u7684\u52a8\u6001\u5206\u652f\u3002\u8fd9\u79cd\u201c\u58f0\u660e\u5f0f\u67b6\u6784\u201d\u8ba9\u590d\u6742\u7684\u6e32\u67d3\u8c03\u4f18\u53d8\u5f97\u5982\u540c\u547c\u5438\u822c\u81ea\u7136\u3002<\/p>\n<p>\u56db\u3001 \u4e13\u5bb6\u89c6\u89d2&#xff1a;PPR \u5982\u4f55\u91cd\u5851\u7528\u6237\u4f53\u9a8c&#xff1f;<\/p>\n<p>\u4ece\u5168\u6808\u4e13\u5bb6\u7684\u89c6\u89d2\u5ba1\u89c6&#xff0c;PPR \u5e26\u6765\u7684\u6539\u53d8\u662f\u6df1\u8fdc\u7684&#xff1a;<\/p>\n<li>\n<p>\u6d88\u9664\u201c\u89c6\u89c9\u65ad\u5c42\u201d&#xff1a;\u7531\u4e8e\u9759\u6001\u5916\u58f3\u4e0e\u52a8\u6001\u5185\u5bb9\u7684\u6d41\u5f0f\u8854\u63a5\u662f\u65e0\u611f\u7684&#xff0c;\u7528\u6237\u4e0d\u518d\u4f1a\u770b\u5230\u9875\u9762\u5728\u52a0\u8f7d\u8fc7\u7a0b\u4e2d\u7a81\u7136\u201c\u8df3\u52a8\u201d\u6216\u201c\u91cd\u6392\u201d\u3002<\/p>\n<\/li>\n<li>\n<p>SEO \u7684\u6df1\u5ea6\u8986\u76d6&#xff1a;\u641c\u7d22\u5f15\u64ce\u722c\u866b\u80fd\u7acb\u5373\u6293\u53d6\u5230\u9759\u6001\u5916\u58f3\u4e2d\u7684\u5173\u952e\u5185\u5bb9&#xff0c;\u800c\u52a8\u6001\u90e8\u5206\u7684\u5ef6\u8fdf\u6ce8\u5165\u4e5f\u80fd\u5728\u722c\u866b\u7b49\u5f85\u5468\u671f\u5185\u88ab\u6355\u83b7&#xff08;\u53d6\u51b3\u4e8e\u722c\u866b\u6027\u80fd&#xff09;&#xff0c;\u5b9e\u73b0\u4e86\u6700\u5927\u5316\u7684\u7d22\u5f15\u6548\u7387\u3002<\/p>\n<\/li>\n<li>\n<p>\u8ba1\u7b97\u8d44\u6e90\u7684\u5e15\u7d2f\u6258\u4f18\u5316&#xff1a;\u670d\u52a1\u5668\u4e0d\u518d\u9700\u8981\u4e3a\u6bcf\u4e00\u4e2a\u8bf7\u6c42\u91cd\u6e32\u67d3\u6574\u68f5\u7ec4\u4ef6\u6811\u3002\u5b83\u53ea\u9700\u805a\u7126\u4e8e\u90a3\u51e0\u4e2a\u88ab\u6807\u8bb0\u4e3a\u52a8\u6001\u7684\u201c\u5b54\u5f84\u201d&#xff0c;\u6781\u5927\u5730\u63d0\u5347\u4e86\u5355\u673a\u7684\u5e76\u53d1\u5904\u7406\u80fd\u529b\u3002<\/p>\n<\/li>\n<p>\u4e94\u3001 \u7ed3\u8bed&#xff1a;\u8fc8\u5411\u201c\u65e0\u754c\u6e32\u67d3\u201d\u7684\u7ec8\u6781\u7406\u60f3<\/p>\n<p>PPR (\u90e8\u5206\u9884\u6e32\u67d3) \u4e0d\u4ec5\u4ec5\u662f Next.js \u7684\u4e00\u4e2a\u529f\u80fd&#xff0c;\u5b83\u662f Web \u6e32\u67d3\u6280\u672f\u7684\u4e00\u4e2a\u5206\u6c34\u5cad\u3002<\/p>\n<p>\u5b83\u7ec8\u7ed3\u4e86\u957f\u8fbe\u6570\u5e74\u7684\u5173\u4e8e SSG \u4e0e SSR \u4f18\u52a3\u7684\u4e89\u8bba\u3002\u5728 PPR \u7684\u4e16\u754c\u91cc&#xff0c;\u9759\u6001\u4e0e\u52a8\u6001\u4e0d\u518d\u662f\u76f8\u4e92\u6392\u65a5\u7684\u5bf9\u7acb\u9762&#xff0c;\u800c\u662f\u76f8\u4e92\u6210\u5c31\u7684\u5171\u751f\u4f53\u3002\u5b83\u50cf\u662f\u4e00\u573a\u7cbe\u5bc6\u7684\u6570\u5b57\u5316\u624b\u672f&#xff0c;\u5c06\u201c\u7a33\u5b9a\u201d\u4e0e\u201c\u7075\u52a8\u201d\u5b8c\u7f8e\u5730\u7f1d\u5408\u5728\u540c\u4e00\u5f20\u7f51\u9875\u4e4b\u4e2d\u3002<\/p>\n<p>\u201c\u90e8\u5206\u201d\u662f\u4e3a\u4e86\u66f4\u5b8c\u6574\u7684\u4f53\u9a8c&#xff0c;\u201c\u9884\u6e32\u67d3\u201d\u662f\u4e3a\u4e86\u66f4\u5373\u65f6\u7684\u611f\u77e5\u3002\u00a0\u5f53\u4f60\u638c\u63e1\u4e86 PPR \u7684\u5fc3\u6cd5&#xff0c;\u4f60\u7b14\u4e0b\u7684 Web \u5e94\u7528\u5c06\u62e5\u6709\u524d\u6240\u672a\u6709\u7684\u751f\u547d\u5f8b\u52a8&#xff1a;\u5b83\u6709\u7740\u78d0\u77f3\u822c\u7a33\u5b9a\u7684\u57fa\u7840\u7ed3\u6784&#xff0c;\u53c8\u6709\u7740\u5982\u540c\u795e\u7ecf\u7f51\u7edc\u822c\u7075\u654f\u7684\u5373\u65f6\u53cd\u9988\u3002\u8fd9&#xff0c;\u5c31\u662f\u73b0\u4ee3\u5168\u6808\u6e32\u67d3\u6a21\u578b\u7684\u6700\u9ad8\u5883\u754c\u3002<\/p>\n<p>\u81f3\u6b64&#xff0c;\u7b2c\u516d\u7ae0\u201c\u6e32\u67d3\u4e4b\u53d8\u201d\u5df2\u5168\u7bc7\u5b8c\u7ed3\u3002\u6211\u4eec\u4ece\u9759\u6001\u751f\u6210\u7684\u201c\u6781\u901f\u201d&#xff0c;\u8d70\u5230\u4e86\u670d\u52a1\u7aef\u6e32\u67d3\u7684\u201c\u5b9e\u65f6\u201d&#xff0c;\u8de8\u8d8a\u4e86\u589e\u91cf\u518d\u751f\u7684\u201c\u81ea\u9002\u5e94\u201d&#xff0c;\u6700\u7ec8\u62b5\u8fbe\u4e86\u90e8\u5206\u9884\u6e32\u67d3\u7684\u201c\u5927\u4e00\u7edf\u201d\u3002\u6e32\u67d3\u6a21\u578b\u662f\u6211\u4eec\u7684\u6b66\u5668&#xff0c;\u800c\u771f\u6b63\u7684\u6218\u573a\u5728\u4e8e\u5168\u7403\u5206\u53d1\u3002\u63a5\u4e0b\u6765&#xff0c;\u6211\u4eec\u5c06\u5f00\u542f\u7b2c\u4e03\u7ae0&#xff1a;\u89c6\u89c9\u7684\u4fee\u884c\u2014\u2014\u6837\u5f0f\u3001\u56fe\u50cf\u4e0e\u5b57\u4f53\u4f18\u5316\u3002<\/p>\n<h2>\u7b2c7\u7ae0&#xff1a;\u89c6\u89c9\u7684\u4fee\u884c\u2014\u2014\u6837\u5f0f\u3001\u56fe\u50cf\u4e0e\u5b57\u4f53\u4f18\u5316<\/h2>\n<ul>\n<li>\n<p>7.1 \u201c\u5feb\u5982\u95ea\u7535\u201d&#xff1a;\u00a0\u4f7f\u7528 Tailwind CSS \u6784\u5efa\u54cd\u5e94\u5f0f UI<\/p>\n<\/li>\n<li>\n<p>7.2 \u201c\u56fe\u50cf\u4e4b\u738b\u201d&#xff1a;\u00a0next\/image\u00a0\u7684\u81ea\u52a8\u88c1\u526a\u3001\u61d2\u52a0\u8f7d\u4e0e\u683c\u5f0f\u8f6c\u6362<\/p>\n<\/li>\n<li>\n<p>7.3 \u201c\u544a\u522b\u95ea\u70c1\u201d&#xff1a;\u00a0next\/font\u00a0\u5b9e\u73b0\u672c\u5730\u5b57\u4f53\u96f6\u504f\u79fb\u52a0\u8f7d<\/p>\n<\/li>\n<li>\n<p>7.4 \u201c\u5143\u6570\u636e\u7ba1\u7406\u201d&#xff1a;\u00a0SEO \u4f18\u5316\u7684\u5fc3\u6cd5\u4e0e Metadata API<\/p>\n<\/li>\n<\/ul>\n<h3>7.1 \u201c\u5feb\u5982\u95ea\u7535\u201d\u2014\u2014\u4f7f\u7528 Tailwind CSS \u6784\u5efa\u54cd\u5e94\u5f0f UI<\/h3>\n<p>\u5982\u679c\u8bf4\u67b6\u6784\u662f Web \u5e94\u7528\u7684\u201c\u9aa8\u9abc\u201d&#xff0c;\u6570\u636e\u662f\u5176\u201c\u8840\u6db2\u201d&#xff0c;\u90a3\u4e48\u6837\u5f0f&#xff08;Styling&#xff09;\u4fbf\u662f\u5b83\u7684\u201c\u76ae\u80a4\u201d\u4e0e\u201c\u6c14\u8d28\u201d\u3002\u5728\u5168\u6808\u5f00\u53d1\u7684\u4fee\u884c\u4e2d&#xff0c;\u524d\u7aef\u89c6\u89c9\u7684\u5448\u73b0\u5f80\u5f80\u51b3\u5b9a\u4e86\u7528\u6237\u5bf9\u4ea7\u54c1\u7684\u201c\u7b2c\u4e00\u773c\u751f\u6b7b\u5224\u51b3\u201d\u3002<\/p>\n<p>\u7136\u800c&#xff0c;\u4f20\u7edf\u7684 CSS \u5f00\u53d1\u6a21\u5f0f\u6b63\u65e5\u76ca\u6210\u4e3a\u5de5\u7a0b\u5316\u7684\u67b7\u9501&#xff1a;\u5197\u957f\u7684\u7c7b\u540d\u547d\u540d\u7ea0\u7ed3\u3001\u5c3e\u5927\u4e0d\u6389\u7684 CSS \u6587\u4ef6\u4f53\u79ef\u3001\u4ee5\u53ca\u5728\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8\u95f4\u75b2\u4e8e\u5954\u547d\u7684\u5a92\u4f53\u67e5\u8be2\u3002Tailwind CSS\u00a0\u7684\u51fa\u73b0&#xff0c;\u5e76\u975e\u4ec5\u4ec5\u591a\u4e86\u4e00\u79cd\u5de5\u5177&#xff0c;\u5b83\u662f\u4e00\u573a\u5173\u4e8e\u201c\u539f\u5b50\u5316\u54f2\u5b66\u201d\u7684\u6548\u7387\u9769\u547d\u3002\u5728 Next.js \u7684\u751f\u6001\u4e2d&#xff0c;Tailwind \u4e0e\u5176\u6df1\u5ea6\u8026\u5408&#xff0c;\u8d4b\u4e88\u4e86\u5f00\u53d1\u8005\u4e00\u79cd\u201c\u6307\u5c16\u5373\u4ee3\u7801&#xff0c;\u6240\u5199\u5373\u6240\u5f97\u201d\u7684\u6781\u901f\u521b\u4f5c\u4f53\u9a8c\u3002<\/p>\n<p>\u4e00\u3001 \u6548\u7387\u7684\u54f2\u5b66&#xff1a;\u4ece\u201c\u8bed\u4e49\u5316\u201d\u56de\u5f52\u201c\u5b9e\u7528\u4e3b\u4e49\u201d<\/p>\n<p>\u5728\u4f20\u7edf\u7684 CSS \u89c2\u5ff5\u91cc&#xff0c;\u6211\u4eec\u88ab\u6559\u5bfc\u8981\u7f16\u5199\u201c\u8bed\u4e49\u5316\u201d\u7684\u7c7b\u540d&#xff0c;\u5982\u00a0.product-card-container\u3002\u4f46\u5728\u5b9e\u9645\u5de5\u7a0b\u4e2d&#xff0c;\u8fd9\u5f80\u5f80\u6f14\u53d8\u6210\u4e86\u547d\u540d\u707e\u96be\u548c\u6837\u5f0f\u7684\u8fc7\u5ea6\u81a8\u80c0\u3002<\/p>\n<p>Tailwind \u4e3b\u5f20\u7684\u662f\u201c\u5b9e\u7528\u81f3\u4e0a&#xff08;Utility-First&#xff09;\u201d&#xff1a;\u00a0\u5b83\u63d0\u4f9b\u4e86\u4e00\u7cfb\u5217\u6781\u5176\u5fae\u5c0f\u3001\u529f\u80fd\u5355\u4e00\u7684\u539f\u5b50\u7c7b&#xff08;\u5982\u00a0flex,\u00a0pt-4,\u00a0text-center&#xff09;\u3002<\/p>\n<ul>\n<li>\n<p>\u6307\u5c16\u5fc3\u6d41&#xff1a;\u4f60\u4e0d\u518d\u9700\u8981\u5728\u00a0index.tsx\u00a0\u548c\u00a0style.css\u00a0\u4e24\u4e2a\u6587\u4ef6\u4e4b\u95f4\u53cd\u590d\u6a2a\u8df3\u3002\u6837\u5f0f\u5c31\u5728\u4f60\u7684 HTML \u7ed3\u6784\u91cc&#xff0c;\u968f\u5199\u968f\u770b\u3002<\/p>\n<\/li>\n<li>\n<p>\u6446\u8131\u547d\u540d\u6050\u60e7&#xff1a;\u4f60\u518d\u4e5f\u4e0d\u7528\u4e3a\u4e86\u7ed9\u4e00\u4e2a\u8fb9\u8ddd 10 \u50cf\u7d20\u7684\u00a0div\u00a0\u8d77\u540d\u5b57\u800c\u6293\u8033\u6320\u816e\u3002\u5728 Tailwind \u7684\u8bed\u5883\u4e0b&#xff0c;\u6837\u5f0f\u5c31\u662f\u4e00\u79cd\u900f\u660e\u7684\u8bed\u8a00\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e8c\u3001 \u6027\u80fd\u7684\u6781\u5883&#xff1a;JIT \u5f15\u64ce\u4e0e 0 \u5197\u4f59<\/p>\n<p>\u5f88\u591a\u521d\u5b66\u8005\u62c5\u5fc3&#xff1a;\u5982\u6b64\u5e9e\u5927\u7684\u7c7b\u5e93&#xff0c;\u662f\u5426\u4f1a\u8ba9\u6211\u7684 CSS \u6587\u4ef6\u53d8\u5f97\u81c3\u80bf\u4e0d\u582a&#xff1f;<\/p>\n<p>\u4f5c\u4e3a\u4e00\u4e2a\u5168\u6808\u4e13\u5bb6&#xff0c;\u4f60\u9700\u8981\u7406\u89e3\u5176\u80cc\u540e\u7684\u00a0JIT (Just-in-Time)\u00a0\u7f16\u8bd1\u6280\u672f\u3002<\/p>\n<li>\n<p>\u52a8\u6001\u751f\u6210&#xff1a;Tailwind \u4e0d\u4f1a\u628a\u51e0\u4e07\u4e2a\u7c7b\u540d\u5168\u90e8\u53d1\u7ed9\u7528\u6237\u3002\u5b83\u4f1a\u626b\u63cf\u4f60\u7684 Next.js \u6e90\u4ee3\u7801&#xff0c;\u8bc6\u522b\u4f60\u771f\u6b63\u7528\u5230\u7684\u7c7b\u3002<\/p>\n<\/li>\n<li>\n<p>\u6781\u81f4\u7626\u8eab&#xff1a;\u5982\u679c\u4f60\u53ea\u7528\u4e86 50 \u4e2a\u7c7b\u540d&#xff0c;\u751f\u6210\u7684 CSS \u6587\u4ef6\u5c31\u53ea\u6709\u8fd9 50 \u4e2a\u7c7b\u7684\u5927\u5c0f\u3002<\/p>\n<\/li>\n<li>\n<p>\u7ed3\u679c&#xff1a;\u5373\u4f7f\u662f\u4e00\u4e2a\u89c4\u6a21\u5b8f\u5927\u7684\u4f01\u4e1a\u7ea7\u5e94\u7528&#xff0c;\u5176\u6700\u7ec8\u751f\u6210\u7684 CSS \u4ea7\u7269\u5f80\u5f80\u4e5f\u53ea\u6709\u51e0\u5341 KB\u3002\u8fd9\u79cd\u201c\u6309\u9700\u5b9a\u5236\u201d\u7684\u7279\u6027&#xff0c;\u8ba9 Next.js \u7684\u9996\u5c4f\u52a0\u8f7d\u901f\u5ea6\u8fbe\u5230\u4e86\u7269\u7406\u6781\u9650\u3002<\/p>\n<\/li>\n<p>\u4e09\u3001 \u54cd\u5e94\u5f0f\u7684\u201c\u9b54\u6cd5\u201d&#xff1a;\u6beb\u79d2\u7ea7\u7684\u591a\u7aef\u9002\u914d<\/p>\n<p>\u5728\u79fb\u52a8\u4f18\u5148\u7684 2026 \u5e74&#xff0c;\u5982\u679c\u4e00\u4e2a\u6846\u67b6\u4e0d\u80fd\u4f18\u96c5\u5730\u5904\u7406\u54cd\u5e94\u5f0f&#xff0c;\u90a3\u5b83\u4fbf\u6beb\u65e0\u4ef7\u503c\u3002Tailwind \u901a\u8fc7\u4e00\u5957\u7b80\u6d01\u7684\u524d\u7f00\u8bed\u6cd5&#xff0c;\u5c06\u590d\u6742\u7684\u5a92\u4f53\u67e5\u8be2&#xff08;Media Queries&#xff09;\u7b80\u5316\u4e3a\u4e86\u76f4\u89c9\u3002<\/p>\n<ul>\n<li>\n<p>\u4fee\u9970\u7b26\u4f53\u7cfb&#xff1a;w-full md:w-1\/2 lg:w-1\/3\u3002\u8fd9\u4e00\u884c\u4ee3\u7801\u544a\u8bc9\u6d4f\u89c8\u5668&#xff1a;\u624b\u673a\u4e0a\u5168\u5c4f\u5c55\u793a&#xff0c;\u5e73\u677f\u4e0a\u5360\u4e00\u534a&#xff0c;\u684c\u9762\u4e0a\u5360\u4e09\u5206\u4e4b\u4e00\u3002<\/p>\n<\/li>\n<li>\n<p>\u6697\u9ed1\u6a21\u5f0f (Dark Mode)&#xff1a;\u53ea\u9700\u4e00\u4e2a\u00a0dark:\u00a0\u524d\u7f00&#xff0c;\u4f60\u5c31\u80fd\u5728\u540c\u4e00\u884c\u4ee3\u7801\u4e2d\u5b8c\u6210\u4e24\u5957\u89c6\u89c9\u98ce\u683c\u7684\u5207\u6362\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u8fd9\u79cd\u201c\u58f0\u660e\u5f0f\u54cd\u5e94\u5f0f\u201d&#xff0c;\u8ba9\u5f00\u53d1\u8005\u4ece\u7e41\u7410\u7684\u00a0&#064;media\u00a0\u8ba1\u7b97\u4e2d\u89e3\u8131\u51fa\u6765&#xff0c;\u5c06\u7cbe\u529b\u96c6\u4e2d\u5728 UI \u7684\u8282\u594f\u611f\u4e0e\u547c\u5438\u611f\u4e0a\u3002<\/p>\n<p>\u56db\u3001 \u4e13\u5bb6\u7ea7\u8fdb\u9636&#xff1a;\u8bbe\u8ba1\u7cfb\u7edf\u4e0e\u7ec4\u4ef6\u62bd\u8c61<\/p>\n<p>\u867d\u7136 Tailwind \u662f\u539f\u5b50\u5316\u7684&#xff0c;\u4f46\u8fd9\u5e76\u4e0d\u4ee3\u8868\u6211\u4eec\u8981\u9677\u5165\u201c\u7c7b\u540d\u5730\u72f1\u201d\u3002\u5728 Next.js \u9879\u76ee\u4e2d&#xff0c;\u9876\u7ea7\u7684\u4fee\u884c\u8005\u4f1a\u5229\u7528\u00a0\u201c\u7ec4\u4ef6\u5316\u601d\u7ef4\u201d\u00a0\u6765\u9a6f\u670d Tailwind\u3002<\/p>\n<p>1. \u903b\u8f91\u62bd\u8c61 vs \u6837\u5f0f\u590d\u7528<\/p>\n<p>\u4e0d\u8981\u5728\u6bcf\u4e2a\u6309\u94ae\u4e0a\u91cd\u590d\u5199\u4e8c\u5341\u4e2a\u7c7b\u540d\u3002\u5229\u7528 React \u7ec4\u4ef6&#xff0c;\u4f60\u53ef\u4ee5\u5c06\u6837\u5f0f\u5c01\u88c5\u5728\u903b\u8f91\u4e4b\u4e2d&#xff1a;<\/p>\n<p>const Button &#061; ({ variant, children }) &#061;&gt; {<br \/>\n  const baseStyles &#061; &#034;px-4 py-2 rounded-lg transition-colors&#034;;<br \/>\n  const variants &#061; {<br \/>\n    primary: &#034;bg-blue-600 text-white hover:bg-blue-700&#034;,<br \/>\n    secondary: &#034;bg-gray-200 text-gray-800 hover:bg-gray-300&#034;<br \/>\n  };<\/p>\n<p>  return (<br \/>\n    &lt;button className&#061;{&#096;${baseStyles} ${variants[variant]}&#096;}&gt;<br \/>\n      {children}<br \/>\n    &lt;\/button&gt;<br \/>\n  );<br \/>\n};<\/p>\n<p>2.\u00a0tailwind-merge\u00a0\u4e0e\u00a0clsx<\/p>\n<p>\u5728\u5904\u7406\u52a8\u6001\u6837\u5f0f\u5408\u5e76\u65f6&#xff0c;\u8fd9\u4e24\u4e2a\u5de5\u5177\u662f\u5168\u6808\u5f00\u53d1\u8005\u7684\u6807\u914d\u3002\u5b83\u4eec\u80fd\u667a\u80fd\u5730\u5904\u7406\u7c7b\u540d\u51b2\u7a81&#xff08;\u4f8b\u5982\u5f53\u00a0p-4\u00a0\u9047\u5230\u00a0p-2\u65f6&#xff09;&#xff0c;\u786e\u4fdd\u4f60\u7684 UI \u903b\u8f91\u6c38\u8fdc\u662f\u5065\u58ee\u4e14\u53ef\u9884\u6d4b\u7684\u3002<\/p>\n<p>\u4e94\u3001 \u89c6\u89c9\u7684\u201c\u5feb\u201d\u4e0e\u201c\u7f8e\u201d&#xff1a;\u8bbe\u8ba1\u7ea6\u675f\u7684\u529b\u91cf<\/p>\n<p>Tailwind \u5e26\u6765\u7684\u6700\u9690\u79d8\u7684\u597d\u5904\u662f\u201c\u4e13\u4e1a\u7684\u8bbe\u8ba1\u7ea6\u675f\u201d\u3002 \u5b83\u5e76\u6ca1\u6709\u7ed9\u4f60\u65e0\u9650\u7684\u989c\u8272\u548c\u50cf\u7d20\u9009\u62e9&#xff0c;\u800c\u662f\u63d0\u4f9b\u4e86\u4e00\u5957\u7ecf\u8fc7\u9876\u7ea7\u8bbe\u8ba1\u5e08\u6821\u51c6\u7684\u95f4\u8ddd\u7cfb\u7edf&#xff08;Spacing Scale&#xff09;\u548c\u8c03\u8272\u677f&#xff08;Color Palette&#xff09;\u3002<\/p>\n<p>\u544a\u522b\u8089\u773c\u8c03\u8272&#xff1a;\u4f60\u9009\u7684\u662f\u00a0blue-500\u00a0\u800c\u4e0d\u662f\u968f\u673a\u7684\u00a0#3b82f6\u3002\u8fd9\u79cd\u6807\u51c6\u5316\u7684\u7ea6\u675f&#xff0c;\u786e\u4fdd\u4e86\u6574\u4e2a\u5e94\u7528\u4ece\u9875\u5934\u5230\u9875\u811a&#xff0c;\u90fd\u4fdd\u6301\u7740\u4e00\u79cd\u201c\u5927\u5382\u51fa\u54c1\u201d\u7684\u89c6\u89c9\u4e00\u81f4\u6027\u3002<\/p>\n<p>\u516d\u3001 \u603b\u7ed3&#xff1a;\u6307\u5c16\u4e0a\u7684\u89c6\u89c9\u4fee\u884c<\/p>\n<p>\u4f7f\u7528 Tailwind CSS \u6784\u5efa UI&#xff0c;\u672c\u8d28\u4e0a\u662f\u5728\u8fdb\u884c\u4e00\u573a\u201c\u51cf\u6cd5\u4fee\u884c\u201d\u3002<\/p>\n<ul>\n<li>\n<p>\u51cf\u53bb\u4e86\u91cd\u590d\u7684\u547d\u540d\u5de5\u4f5c&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u51cf\u53bb\u4e86\u5197\u4f59\u7684\u6587\u4ef6\u4f53\u79ef&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u51cf\u53bb\u4e86\u591a\u7aef\u9002\u914d\u7684\u7126\u8651\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u5728 Next.js \u7684\u52a0\u6301\u4e0b&#xff0c;\u6837\u5f0f\u4e0d\u518d\u662f\u540e\u671f\u70b9\u7f00\u7684\u753b\u7a3f&#xff0c;\u800c\u662f\u4e0e\u903b\u8f91\u3001\u6570\u636e\u4ea4\u7ec7\u5728\u4e00\u8d77\u7684\u6709\u673a\u4f53\u3002\u5f53\u4f60\u719f\u7ec3\u638c\u63e1\u4e86\u8fd9\u5957\u539f\u5b50\u5316\u7684\u8bed\u8a00&#xff0c;\u4f60\u4f1a\u53d1\u73b0&#xff0c;\u4f60\u6784\u5efa\u754c\u9762\u7684\u901f\u5ea6\u5c06\u771f\u6b63\u8d76\u4e0a\u4f60\u601d\u8003\u7684\u901f\u5ea6\u3002\u201c\u5feb\u5982\u95ea\u7535\u201d&#xff0c;\u4e0d\u4ec5\u662f\u7528\u6237\u7684\u8bbf\u95ee\u4f53\u9a8c&#xff0c;\u66f4\u662f\u4f60\u4f5c\u4e3a\u4e00\u540d\u521b\u9020\u8005\u7684\u5f00\u53d1\u8282\u594f\u3002<\/p>\n<p>\u89c6\u89c9\u7684\u4fee\u884c\u4e0d\u4ec5\u5728\u4e8e\u8272\u5f69\u4e0e\u5e03\u5c40\u7684\u94fa\u9648&#xff0c;\u66f4\u5728\u4e8e\u8d44\u6e90\u7684\u6781\u81f4\u7ba1\u7406\u3002\u5f53\u4f60\u7684 UI \u67b6\u6784\u5df2\u7ecf\u7a33\u5982\u6cf0\u5c71&#xff0c;\u90a3\u4e9b\u627f\u8f7d\u89c6\u89c9\u91cd\u91cf\u7684\u56fe\u7247\u53c8\u8be5\u5982\u4f55\u4f18\u96c5\u5730\u767b\u573a&#xff1f;\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u653b\u514b\u7684\u96be\u5173\u2014\u2014\u201c\u56fe\u50cf\u4e4b\u738b\u201d&#xff1a;next\/image \u7684\u81ea\u52a8\u88c1\u526a\u3001\u61d2\u52a0\u8f7d\u4e0e\u683c\u5f0f\u8f6c\u6362\u3002\u60a8\u51c6\u5907\u597d\u8ba9\u4f60\u7684\u5e94\u7528\u5728\u89c6\u89c9\u4e0a\u66f4\u8fdb\u4e00\u6b65&#xff0c;\u5b9e\u73b0\u201c\u8f7b\u82e5\u9e3f\u6bdb\u201d\u7684\u52a0\u8f7d\u4f53\u9a8c\u4e86\u5417&#xff1f;<\/p>\n<h3>7.2 \u201c\u56fe\u50cf\u4e4b\u738b\u201d \u2014\u2014 next\/image \u7684\u81ea\u52a8\u88c1\u526a\u3001\u61d2\u52a0\u8f7d\u4e0e\u683c\u5f0f\u8f6c\u6362<\/h3>\n<p>\u5728 Web \u6027\u80fd\u7684\u6218\u573a\u4e0a&#xff0c;\u56fe\u50cf\u5f80\u5f80\u662f\u90a3\u4e2a\u201c\u6c89\u91cd\u201d\u7684\u7ec8\u6781\u5bf9\u624b\u3002\u636e\u7edf\u8ba1&#xff0c;\u56fe\u50cf\u901a\u5e38\u5360\u636e\u4e86\u7f51\u9875\u52a0\u8f7d\u4f53\u79ef\u7684\u00a060% \u4ee5\u4e0a\u3002\u4e00\u5f20\u672a\u7ecf\u8fc7\u4f18\u5316\u7684 5MB \u9ad8\u6e05\u539f\u56fe&#xff0c;\u8db3\u4ee5\u77ac\u95f4\u6467\u6bc1 SSG \u6216 SSR \u8f9b\u82e6\u79ef\u6512\u4e0b\u6765\u7684\u6240\u6709\u6027\u80fd\u7ea2\u5229\u3002<\/p>\n<p>\u4f20\u7edf\u7684\u5904\u7406\u65b9\u5f0f\u6781\u5176\u7e41\u7410&#xff1a;\u4f60\u9700\u8981\u624b\u52a8\u5207\u56fe\u3001\u9002\u914d WebP \u683c\u5f0f\u3001\u7f16\u5199\u590d\u6742\u7684\u00a0srcset\u00a0\u5a92\u4f53\u67e5\u8be2\u3001\u751a\u81f3\u8981\u4e3a\u6bcf\u4e00\u4e2a\u5360\u4f4d\u7b26\u8bbe\u8ba1\u6a21\u7cca\u80cc\u666f\u3002\u800c Next.js \u7684\u539f\u751f\u7ec4\u4ef6\u00a0next\/image&#xff0c;\u5219\u50cf\u662f\u4e00\u4f4d\u62e5\u6709\u9876\u7ea7\u5ba1\u7f8e\u4e0e\u7b97\u529b\u7684\u201c\u56fe\u50cf\u7ba1\u5bb6\u201d\u3002\u5b83\u5c06\u56fe\u50cf\u5904\u7406\u4ece\u624b\u5de5\u4f5c\u574a\u65f6\u4ee3\u5e26\u5165\u4e86\u81ea\u52a8\u5316\u7684\u5de5\u4e1a\u65f6\u4ee3&#xff0c;\u8ba9\u5f00\u53d1\u8005\u80fd\u591f\u4ee5\u6700\u7b80\u5355\u7684\u6807\u7b7e&#xff0c;\u9a7e\u9a6d\u6700\u590d\u6742\u7684\u6027\u80fd\u4f18\u5316\u903b\u8f91\u3002<\/p>\n<p>\u4e00\u3001 \u6838\u5fc3\u5965\u4e49&#xff1a;\u4ece\u201c\u9759\u6001\u8d44\u6e90\u201d\u5230\u201c\u52a8\u6001\u670d\u52a1\u201d<\/p>\n<p>next\/image\u00a0\u7684\u672c\u8d28\u5e76\u975e\u4e00\u4e2a\u7b80\u5355\u7684\u00a0&lt;img&gt;\u00a0\u6807\u7b7e\u66ff\u4ee3\u54c1&#xff0c;\u800c\u662f\u4e00\u5957\u56fe\u50cf\u5b9e\u65f6\u5904\u7406\u5f15\u64ce\u3002<\/p>\n<p>1. \u81ea\u52a8\u683c\u5f0f\u8f6c\u6362&#xff1a;\u62e5\u62b1 WebP \u4e0e AVIF<\/p>\n<p>\u4f60\u53ea\u9700\u8981\u4e0a\u4f20\u4e00\u5f20\u9ad8\u8d28\u91cf\u7684 JPEG \u6216 PNG\u3002\u5f53\u7528\u6237\u8bbf\u95ee\u65f6&#xff0c;Next.js \u4f1a\u6839\u636e\u6d4f\u89c8\u5668\u7684\u80fd\u529b&#xff0c;\u81ea\u52a8\u5c06\u5176\u8f6c\u6362\u4e3a\u00a0WebP\u6216\u00a0AVIF\u3002\u8fd9\u4e9b\u73b0\u4ee3\u683c\u5f0f\u80fd\u5728\u4e0d\u635f\u5931\u89c6\u89c9\u8d28\u91cf\u7684\u524d\u63d0\u4e0b&#xff0c;\u5c06\u4f53\u79ef\u538b\u7f29\u5230\u60ca\u4eba\u7684\u7a0b\u5ea6\u3002<\/p>\n<p>2. \u667a\u80fd\u88c1\u526a\u4e0e\u5c3a\u5bf8\u9002\u914d<\/p>\n<p>\u901a\u8fc7\u5185\u7f6e\u7684\u00a0loader\u00a0\u673a\u5236&#xff0c;Next.js \u4f1a\u6839\u636e\u5ba2\u6237\u7aef\u7684\u5c4f\u5e55\u5bc6\u5ea6&#xff08;1x, 2x, 3x&#xff09;\u548c\u5c55\u793a\u533a\u57df\u7684\u5bbd\u5ea6&#xff0c;\u52a8\u6001\u751f\u6210\u4e0d\u540c\u5c3a\u5bf8\u7684\u7f29\u7565\u56fe\u3002\u8fd9\u610f\u5473\u7740&#xff0c;\u624b\u673a\u7528\u6237\u6c38\u8fdc\u4e0d\u4f1a\u4e3a\u4e00\u4e2a 4K \u663e\u793a\u5668\u624d\u9700\u8981\u7684\u50cf\u7d20\u53bb\u4e70\u5355\u3002<\/p>\n<p>\u4e8c\u3001 \u6027\u80fd\u5b88\u536b&#xff1a;\u544a\u522b\u201c\u89c6\u89c9\u6296\u52a8\u201d\u4e0e\u201c\u65e0\u6548\u52a0\u8f7d\u201d<\/p>\n<p>\u56fe\u50cf\u4f18\u5316\u4e2d\u5b58\u5728\u4e24\u4e2a\u6781\u5177\u7834\u574f\u6027\u7684\u4f53\u9a8c\u6740\u624b&#xff1a;\u7d2f\u79ef\u5e03\u5c40\u504f\u79fb (CLS)\u00a0\u4e0e\u00a0\u5e26\u5bbd\u5e26\u5bbd\u6d6a\u8d39\u3002<\/p>\n<p>1. \u5f3a\u5236\u5c3a\u5bf8&#xff1a;\u6d88\u706d\u5e03\u5c40\u8df3\u52a8<\/p>\n<p>\u5728\u4f20\u7edf Web \u4e2d&#xff0c;\u56fe\u7247\u52a0\u8f7d\u524d\u7684\u5360\u4f4d\u9ad8\u5ea6\u4e3a 0&#xff0c;\u52a0\u8f7d\u5b8c\u6210\u540e\u7a81\u7136\u5f39\u5f00&#xff0c;\u5bfc\u81f4\u9875\u9762\u5185\u5bb9\u5267\u70c8\u8df3\u52a8\u3002next\/image\u00a0\u5f3a\u5236\u8981\u6c42\u5f00\u53d1\u8005\u5b9a\u4e49\u00a0width\u00a0\u548c\u00a0height&#xff08;\u6216\u4f7f\u7528\u00a0fill\u00a0\u6a21\u5f0f&#xff09;&#xff0c;\u5b83\u9884\u5148\u5728 DOM \u4e2d\u9501\u5b9a\u7a7a\u95f4\u3002<\/p>\n<p>\u8fd9\u79cd\u786e\u5b9a\u6027&#xff0c;\u662f\u83b7\u53d6 Google Core Web Vitals \u9ad8\u5206\u7684\u5165\u573a\u5238&#xff0c;\u66f4\u662f\u5bf9\u7528\u6237\u9605\u8bfb\u4f53\u9a8c\u7684\u57fa\u672c\u5c0a\u91cd\u3002<\/p>\n<p>2. \u9ed8\u8ba4\u61d2\u52a0\u8f7d (Lazy Loading)<\/p>\n<p>next\/image\u00a0\u9ed8\u8ba4\u5f00\u542f\u00a0loading&#061;&#034;lazy&#034;\u3002\u53ea\u6709\u5f53\u56fe\u7247\u5373\u5c06\u8fdb\u5165\u7528\u6237\u7684\u89c6\u53e3&#xff08;Viewport&#xff09;\u65f6&#xff0c;\u5b83\u624d\u4f1a\u542f\u52a8\u4e0b\u8f7d\u3002\u8fd9\u79cd\u201c\u6309\u9700\u5206\u914d\u201d\u7684\u7b56\u7565&#xff0c;\u8ba9\u9996\u5c4f\u6e32\u67d3\u53d8\u5f97\u8f7b\u5982\u9e3f\u6bdb\u3002<\/p>\n<p>\u4e09\u3001 \u89c6\u89c9\u7f8e\u5b66&#xff1a;\u6a21\u7cca\u5360\u4f4d\u4e0e\u5e73\u6ed1\u8fc7\u6e21<\/p>\n<p>\u4e3a\u4e86\u8ffd\u6c42\u6781\u81f4\u7684\u611f\u5b98\u4f53\u9a8c&#xff0c;Next.js \u5f15\u5165\u4e86\u00a0Placeholder\u00a0\u673a\u5236\u3002<\/p>\n<ul>\n<li>\n<p>Blur-up \u6548\u679c&#xff1a;\u5f53\u4f60\u8bbe\u7f6e\u00a0placeholder&#061;&#034;blur&#034;\u00a0\u65f6&#xff0c;Next.js \u4f1a\u751f\u6210\u4e00\u4e2a\u6781\u5176\u5fae\u5c0f\u7684\u56fe\u50cf\u6307\u7eb9\u3002\u5728\u9ad8\u6e05\u5927\u56fe\u62b5\u8fbe\u4e4b\u524d&#xff0c;\u7528\u6237\u4f1a\u770b\u5230\u4e00\u4e2a\u67d4\u548c\u3001\u5e26\u6709\u827a\u672f\u611f\u7684\u6a21\u7cca\u6e10\u53d8&#xff0c;\u800c\u4e0d\u662f\u7a81\u5140\u7684\u7a7a\u767d\u3002<\/p>\n<\/li>\n<li>\n<p>\u4f18\u5148\u7ea7\u8c03\u5ea6 (Priority)&#xff1a;\u5bf9\u4e8e Banner \u56fe\u7b49\u9996\u5c4f\u5173\u952e\u8d44\u4ea7&#xff0c;\u4f60\u53ef\u4ee5\u52a0\u4e0a\u00a0priority\u00a0\u5c5e\u6027\u3002Next.js \u4f1a\u901a\u8fc7\u00a0&lt;link rel&#061;&#034;preload&#034;&gt;\u00a0\u63d0\u5347\u5176\u52a0\u8f7d\u4f18\u5148\u7ea7&#xff0c;\u786e\u4fdd\u54c1\u724c\u89c6\u89c9\u7b2c\u4e00\u65f6\u95f4\u89e6\u8fbe\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u56db\u3001 \u67b6\u6784\u7684\u5fc3\u6cd5&#xff1a;\u8fdc\u7a0b\u56fe\u50cf\u7684\u5b89\u5168\u4e0e\u9632\u62a4<\/p>\n<p>\u5728\u5b9e\u9645\u5f00\u53d1\u4e2d&#xff0c;\u6211\u4eec\u7ecf\u5e38\u9700\u8981\u6e32\u67d3\u6765\u81ea\u5916\u90e8&#xff08;\u5982 AWS S3, Cloudinary&#xff09;\u7684\u56fe\u50cf\u3002\u8fd9\u65f6&#xff0c;next\/image\u00a0\u53d8\u8eab\u4e3a\u4e00\u9053\u5b89\u5168\u9632\u706b\u5899\u3002<\/p>\n<p>\u4e3a\u4e86\u9632\u6b62\u6076\u610f\u7684\u6076\u610f\u8bf7\u6c42\u8017\u5c3d\u4f60\u7684\u670d\u52a1\u5668\u8d44\u6e90&#xff0c;Next.js \u8981\u6c42\u4f60\u5728\u00a0next.config.js\u00a0\u4e2d\u663e\u5f0f\u914d\u7f6e\u00a0Remote Patterns\u3002<\/p>\n<p>\/\/ next.config.js<br \/>\nmodule.exports &#061; {<br \/>\n  images: {<br \/>\n    remotePatterns: [<br \/>\n      {<br \/>\n        protocol: &#039;https&#039;,<br \/>\n        hostname: &#039;assets.example.com&#039;,<br \/>\n        pathname: &#039;\/u\/**&#039;,<br \/>\n      },<br \/>\n    ],<br \/>\n  },<br \/>\n}<\/p>\n<p>\u8fd9\u79cd\u201c\u767d\u540d\u5355\u201d\u673a\u5236\u4e0d\u4ec5\u4fdd\u62a4\u4e86\u57df\u540d\u5b89\u5168&#xff0c;\u8fd8\u901a\u8fc7 Next.js \u7684\u5185\u7f6e\u670d\u52a1\u5668\u5b9e\u73b0\u4e86\u5bf9\u8fdc\u7a0b\u8d44\u4ea7\u7684\u81ea\u52a8\u7f13\u5b58\u4e0e\u4f18\u5316\u3002<\/p>\n<p>\u4e94\u3001 \u4e13\u5bb6\u7ea7\u8c03\u4f18&#xff1a;fill\u00a0\u4e0e\u00a0sizes\u00a0\u7684\u821e\u6b65<\/p>\n<p>\u5728\u54cd\u5e94\u5f0f\u5e03\u5c40\u4e2d&#xff0c;\u6211\u4eec\u5f80\u5f80\u65e0\u6cd5\u9884\u77e5\u786e\u5207\u7684\u50cf\u7d20\u5c3a\u5bf8\u3002\u6b64\u65f6&#xff0c;fill\u00a0\u6a21\u5f0f\u914d\u5408\u00a0sizes\u00a0\u5c5e\u6027\u5c55\u73b0\u4e86\u6781\u9ad8\u7684\u7075\u6d3b\u6027&#xff1a;<\/p>\n<p>&lt;div className&#061;&#034;relative w-full h-64&#034;&gt;<br \/>\n  &lt;Image<br \/>\n    src&#061;&#034;\/hero.jpg&#034;<br \/>\n    fill<br \/>\n    className&#061;&#034;object-cover&#034;<br \/>\n    sizes&#061;&#034;(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw&#034;<br \/>\n    alt&#061;&#034;Hero Image&#034;<br \/>\n  \/&gt;<br \/>\n&lt;\/div&gt;<\/p>\n<p>\u901a\u8fc7\u8fd9\u884c\u4ee3\u7801&#xff0c;\u4f60\u544a\u8bc9\u6d4f\u89c8\u5668&#xff1a;\u5728\u624b\u673a\u4e0a\u52a0\u8f7d\u5168\u5bbd\u56fe&#xff0c;\u5728\u5e73\u677f\u4e0a\u52a0\u8f7d\u534a\u5bbd\u56fe&#xff0c;\u5728\u684c\u9762\u4e0a\u52a0\u8f7d\u4e09\u5206\u4e4b\u4e00\u5bbd\u5ea6\u7684\u56fe\u3002Next.js \u4f1a\u6839\u636e\u4f60\u7684\u63cf\u8ff0&#xff0c;\u7cbe\u51c6\u5730\u5206\u53d1\u6700\u5408\u9002\u7684\u8d44\u6e90\u3002<\/p>\n<p>\u516d\u3001 \u603b\u7ed3&#xff1a;\u4ece\u201c\u770b\u89c1\u201d\u5230\u201c\u6d1e\u5bdf\u201d<\/p>\n<p>next\/image\u00a0\u662f Next.js \u5bf9\u89c6\u89c9\u4fee\u884c\u7684\u4e00\u6b21\u6df1\u523b\u603b\u7ed3\u3002<\/p>\n<p>\u5b83\u544a\u8bc9\u6211\u4eec&#xff1a;\u771f\u6b63\u7684\u56fe\u50cf\u4f18\u5316&#xff0c;\u4e0d\u5e94\u662f\u5f00\u53d1\u8005\u7684\u8d1f\u62c5&#xff0c;\u800c\u5e94\u662f\u67b6\u6784\u7684\u672c\u80fd\u3002\u00a0\u5b83\u5c06\u590d\u6742\u7684\u6570\u5b66\u8ba1\u7b97&#xff08;\u7f29\u653e\u6bd4\u4f8b&#xff09;\u3001\u7f51\u7edc\u5de5\u7a0b&#xff08;CDN \u7f13\u5b58&#xff09;\u4e0e\u611f\u5b98\u5fc3\u7406\u5b66&#xff08;\u6a21\u7cca\u5360\u4f4d&#xff09;\u5b8c\u7f8e\u5730\u5c01\u88c5\u5728\u4e00\u4e2a\u7b80\u5355\u7684\u7ec4\u4ef6\u91cc\u3002\u5f53\u4f60\u7684\u5e94\u7528\u80fd\u591f\u81ea\u52a8\u4e3a\u6bcf\u4e00\u53f0\u8bbe\u5907\u3001\u6bcf\u4e00\u79cd\u5e26\u5bbd\u73af\u5883\u91cf\u8eab\u5b9a\u5236\u6700\u8f7b\u76c8\u7684\u89c6\u89c9\u8d44\u4ea7\u65f6&#xff0c;\u4f60\u5c31\u771f\u6b63\u638c\u63e1\u4e86\u201c\u56fe\u50cf\u4e4b\u738b\u201d\u7684\u6743\u67c4\u3002\u5728\u8fd9\u4e2a\u50cf\u7d20\u5373\u4f53\u9a8c\u7684\u65f6\u4ee3&#xff0c;\u8fd9\u79cd\u5bf9\u7ec6\u8282\u7684\u6781\u81f4\u96d5\u7422&#xff0c;\u6b63\u662f\u5168\u6808\u5927\u5e08\u4e0e\u666e\u901a\u5f00\u53d1\u8005\u4e4b\u95f4\u7684\u5206\u6c34\u5cad\u3002<\/p>\n<p>\u89c6\u89c9\u7684\u539a\u91cd\u611f\u5df2\u88ab\u00a0next\/image\u00a0\u5de7\u5999\u5316\u89e3&#xff0c;\u4f46\u89c6\u89c9\u7684\u7ec6\u8282\u91cc\u8fd8\u85cf\u7740\u4e00\u4e2a\u9690\u79d8\u7684\u654c\u4eba\u2014\u2014\u5b57\u4f53\u7684\u52a0\u8f7d\u3002\u4f60\u662f\u5426\u7ecf\u5386\u8fc7\u9875\u9762\u5185\u5bb9\u5728\u5b57\u4f53\u52a0\u8f7d\u7684\u4e00\u77ac&#xff0c;\u56e0\u4e3a\u6837\u5f0f\u91cd\u7ed8\u800c\u4ea7\u751f\u7684\u5267\u70c8\u6643\u52a8&#xff1f;\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u653b\u514b\u7684\u8bfe\u9898&#xff1a;\u201c\u544a\u522b\u95ea\u70c1\u201d&#xff1a;next\/font \u5b9e\u73b0\u672c\u5730\u5b57\u4f53\u96f6\u504f\u79fb\u52a0\u8f7d\u3002<\/p>\n<h3>7.3 \u201c\u544a\u522b\u95ea\u70c1\u201d \u2014\u2014 next\/font \u5b9e\u73b0\u672c\u5730\u5b57\u4f53\u96f6\u504f\u79fb\u52a0\u8f7d<\/h3>\n<p>\u5982\u679c\u8bf4\u56fe\u50cf\u662f Web \u9875\u9762\u4e0a\u7684\u201c\u8840\u8089\u201d&#xff0c;\u90a3\u4e48\u5b57\u4f53\u5c31\u662f\u5176\u201c\u795e\u97f5\u201d\u3002\u7136\u800c&#xff0c;\u5728\u5b57\u4f53\u4f18\u5316\u7684\u4fee\u884c\u4e2d&#xff0c;\u5f00\u53d1\u8005\u5e38\u5e38\u9762\u4e34\u4e00\u4e2a\u6781\u5176\u5c34\u5c2c\u7684\u73b0\u8c61&#xff1a;\u5f53\u7528\u6237\u6253\u5f00\u9875\u9762&#xff0c;\u6587\u5b57\u5148\u662f\u4ee5\u4e00\u79cd\u6734\u7d20\u7684\u7cfb\u7edf\u5b57\u4f53&#xff08;\u5982 Arial&#xff09;\u5448\u73b0&#xff0c;\u51e0\u767e\u6beb\u79d2\u540e&#xff0c;\u968f\u7740\u81ea\u5b9a\u4e49\u5b57\u4f53\u7684\u4e0b\u8f7d\u5b8c\u6210&#xff0c;\u6587\u5b57\u7a81\u7136\u201c\u8df3\u52a8\u201d\u4e00\u4e0b&#xff0c;\u53d8\u6210\u4e86\u7cbe\u81f4\u7684\u8bbe\u8ba1\u5b57\u4f53\u3002<\/p>\n<p>\u8fd9\u79cd\u89c6\u89c9\u4e0a\u7684\u7a81\u5140\u8df3\u52a8&#xff0c;\u5728\u5de5\u7a0b\u9886\u57df\u88ab\u79f0\u4e3a\u00a0FOUT (Flash of Unstyled Text&#xff0c;\u672a\u6837\u5f0f\u5316\u6587\u672c\u95ea\u70c1)\u00a0\u6216\u00a0CLS (Cumulative Layout Shift&#xff0c;\u7d2f\u79ef\u5e03\u5c40\u504f\u79fb)\u3002\u8fd9\u4e0d\u4ec5\u8ba9\u7cbe\u5fc3\u8bbe\u8ba1\u7684 UI \u663e\u5f97\u5ec9\u4ef7&#xff0c;\u66f4\u4f1a\u76f4\u63a5\u62c9\u4f4e Google Core Web Vitals \u7684\u8bc4\u5206\u3002<\/p>\n<p>Next.js \u7684\u00a0next\/font\u00a0\u6a21\u5757&#xff0c;\u662f\u4e00\u5957\u4f18\u96c5\u7684\u6392\u7248\u5de5\u7a0b\u65b9\u6848\u3002\u5b83\u901a\u8fc7\u5b57\u4f53\u7684\u672c\u5730\u5316\u6258\u7ba1\u4e0e CSS \u5c5e\u6027\u7684\u667a\u80fd\u9884\u8ba1\u7b97&#xff0c;\u5f7b\u5e95\u7ec8\u7ed3\u4e86\u5b57\u4f53\u52a0\u8f7d\u65f6\u7684\u201c\u95ea\u70c1\u65f6\u4ee3\u201d&#xff0c;\u8ba9\u6587\u5b57\u7684\u5448\u73b0\u5982\u540c\u5370\u5237\u54c1\u822c\u7a33\u56fa\u3001\u6df1\u9083\u3002<\/p>\n<p>\u4e00\u3001 \u6838\u5fc3\u75db\u70b9&#xff1a;\u4e3a\u4ec0\u4e48\u5b57\u4f53\u4f1a\u201c\u8df3\u52a8\u201d&#xff1f;<\/p>\n<p>\u5b57\u4f53\u7684\u8df3\u52a8\u672c\u8d28\u4e0a\u662f\u7a7a\u95f4\u5360\u7528\u4e0d\u4e00\u81f4\u5bfc\u81f4\u7684\u3002<\/p>\n<p>\u6bcf\u79cd\u5b57\u4f53\u5bf9\u5b57\u6bcd\u7684\u5bbd\u5ea6\u3001\u884c\u9ad8\u548c\u95f4\u8ddd&#xff08;Metrics&#xff09;\u7684\u5b9a\u4e49\u90fd\u4e0d\u5c3d\u76f8\u540c\u3002<\/p>\n<li>\n<p>\u6d4f\u89c8\u5668\u5728\u7b49\u5f85\u81ea\u5b9a\u4e49\u5b57\u4f53\u52a0\u8f7d\u65f6&#xff0c;\u4f1a\u5148\u7528\u7cfb\u7edf\u540e\u5907\u5b57\u4f53\u6e32\u67d3\u3002<\/p>\n<\/li>\n<li>\n<p>\u540e\u5907\u5b57\u4f53\u53ef\u80fd\u6bd4\u81ea\u5b9a\u4e49\u5b57\u4f53\u66f4\u5bbd\u6216\u66f4\u9ad8\u3002<\/p>\n<\/li>\n<li>\n<p>\u5f53\u81ea\u5b9a\u4e49\u5b57\u4f53\u201c\u7a7a\u964d\u201d\u6210\u529f&#xff0c;\u539f\u672c\u6392\u597d\u7684\u6bb5\u843d\u4f1a\u56e0\u4e3a\u5b57\u7b26\u5bbd\u5ea6\u7684\u6539\u53d8\u800c\u91cd\u65b0\u6298\u884c&#xff0c;\u5bfc\u81f4\u6574\u4e2a\u9875\u9762\u4e0b\u65b9\u7684\u5143\u7d20\u88ab\u201c\u9876\u201d\u4e0b\u53bb\u6216\u201c\u62c9\u201d\u4e0a\u6765\u3002<\/p>\n<\/li>\n<p>\u4e8c\u3001\u00a0next\/font\u00a0\u7684\u9ed1\u79d1\u6280&#xff1a;\u81ea\u6258\u7ba1\u4e0e\u96f6\u5ef6\u8fdf<\/p>\n<p>next\/font\u00a0\u5e76\u4e0d\u53ea\u662f\u4e00\u4e2a\u5b57\u4f53\u4e0b\u8f7d\u5668&#xff0c;\u5b83\u5728\u6784\u5efa\u9636\u6bb5&#xff08;Build Time&#xff09;\u5b8c\u6210\u4e86\u4e00\u7cfb\u5217\u590d\u6742\u7684\u624b\u672f\u3002<\/p>\n<p>1. \u81ea\u52a8\u672c\u5730\u5316 (Self-Hosting)<\/p>\n<p>\u5f53\u4f60\u4ece\u00a0next\/font\/google\u00a0\u5f15\u5165\u5b57\u4f53\u65f6&#xff0c;Next.js \u5e76\u4e0d\u4f1a\u5728\u5ba2\u6237\u7aef\u8bf7\u6c42 Google \u7684\u670d\u52a1\u5668\u3002\u76f8\u53cd&#xff0c;\u5b83\u4f1a\u5728\u6784\u5efa\u65f6\u5c06\u5b57\u4f53\u6587\u4ef6\u4e0b\u8f7d\u5e76\u5b58\u653e\u5230\u4f60\u7684\u9759\u6001\u8d44\u6e90\u76ee\u5f55\u4e2d\u3002<\/p>\n<p>\u9690\u79c1\u4e0e\u901f\u5ea6\u53cc\u8d62&#xff1a;\u65e0\u9700\u989d\u5916\u7684 DNS \u67e5\u8be2&#xff0c;\u4e0d\u5411\u7b2c\u4e09\u65b9\u6cc4\u9732\u7528\u6237\u9690\u79c1&#xff0c;\u4e14\u5b57\u4f53\u6587\u4ef6\u4e0e\u4f60\u7684\u9875\u9762\u4ee3\u7801\u540c\u6e90\u5206\u53d1\u3002<\/p>\n<p>2. \u9884\u8ba1\u7b97\u5c3a\u5bf8\u5bf9\u9f50 (Size Adjust)<\/p>\n<p>\u8fd9\u662f\u6700\u795e\u5947\u7684\u9ed1\u79d1\u6280\u3002next\/font\u00a0\u4f1a\u81ea\u52a8\u4e3a\u4f60\u7684\u81ea\u5b9a\u4e49\u5b57\u4f53\u751f\u6210\u4e00\u5957\u00a0CSS \u8986\u76d6\u903b\u8f91\u3002\u5b83\u4f1a\u8ba1\u7b97\u81ea\u5b9a\u4e49\u5b57\u4f53\u4e0e\u7cfb\u7edf\u540e\u5907\u5b57\u4f53\u4e4b\u95f4\u7684\u6bd4\u4f8b\u5dee\u5f02&#xff0c;\u5e76\u901a\u8fc7\u00a0size-adjust\u00a0\u7b49 CSS \u5c5e\u6027&#xff0c;\u5f3a\u884c\u7f29\u653e\u540e\u5907\u5b57\u4f53\u7684\u6bd4\u4f8b&#xff0c;\u4f7f\u5176\u5360\u636e\u7684\u7a7a\u95f4\u4e0e\u81ea\u5b9a\u4e49\u5b57\u4f53\u5b8c\u5168\u4e00\u81f4\u3002<\/p>\n<p>\u8fd9\u79cd\u201c\u7a7a\u95f4\u9884\u7559\u201d\u6280\u672f&#xff0c;\u8ba9\u9875\u9762\u5728\u5b57\u4f53\u52a0\u8f7d\u524d\u540e&#xff0c;\u5e03\u5c40\u504f\u79fb\u91cf&#xff08;CLS&#xff09;\u964d\u5230\u4e86\u63a5\u8fd1 0 \u7684\u7edd\u5bf9\u9886\u57df\u3002<\/p>\n<p>\u4e09\u3001 \u5b9e\u6218\u6f14\u7ec3&#xff1a;\u58f0\u660e\u5f0f\u7684\u6392\u7248\u7f8e\u5b66<\/p>\n<p>\u5728 Next.js \u4e2d\u4f7f\u7528\u5b57\u4f53&#xff0c;\u5c31\u50cf\u5b9a\u4e49\u53d8\u91cf\u4e00\u6837\u7b80\u5355\u3001\u4e25\u8c28\u3002<\/p>\n<p>\/\/ app\/layout.tsx<br \/>\nimport { Inter, Roboto_Mono } from &#039;next\/font\/google&#039;;<\/p>\n<p>\/\/ \u5b9a\u4e49\u5b57\u4f53\u5bf9\u8c61&#xff0c;\u8bbe\u7f6e\u5b50\u96c6\u548c\u53d8\u91cf\u540d<br \/>\nconst inter &#061; Inter({<br \/>\n  subsets: [&#039;latin&#039;],<br \/>\n  display: &#039;swap&#039;, \/\/ \u786e\u4fdd\u6587\u672c\u5728\u52a0\u8f7d\u65f6\u53ef\u89c1<br \/>\n});<\/p>\n<p>const robotoMono &#061; Roboto_Mono({<br \/>\n  subsets: [&#039;latin&#039;],<br \/>\n  variable: &#039;&#8211;font-roboto-mono&#039;, \/\/ \u5b9a\u4e49 CSS \u53d8\u91cf<br \/>\n  display: &#039;swap&#039;,<br \/>\n});<\/p>\n<p>export default function RootLayout({ children }) {<br \/>\n  return (<br \/>\n    &lt;html lang&#061;&#034;en&#034; className&#061;{&#096;${inter.className} ${robotoMono.variable}&#096;}&gt;<br \/>\n      &lt;body&gt;{children}&lt;\/body&gt;<br \/>\n    &lt;\/html&gt;<br \/>\n  );<br \/>\n}<\/p>\n<p>\u5fc3\u6cd5\u8981\u70b9&#xff1a;<\/p>\n<ul>\n<li>\n<p>Variable Fonts (\u53ef\u53d8\u5b57\u4f53)&#xff1a;next\/font\u00a0\u5b8c\u7f8e\u652f\u6301\u53ef\u53d8\u5b57\u4f53&#xff0c;\u4f60\u65e0\u9700\u4e0b\u8f7d\u7c97\u3001\u4e2d\u3001\u7ec6\u591a\u4e2a\u6587\u4ef6&#xff0c;\u53ea\u9700\u4e00\u4e2a\u6587\u4ef6\u5373\u53ef\u901a\u8fc7 CSS \u8c03\u8282\u4efb\u610f\u5b57\u91cd&#xff0c;\u6781\u5927\u5730\u51cf\u5c11\u4e86\u5e26\u5bbd\u635f\u8017\u3002<\/p>\n<\/li>\n<li>\n<p>\u5b50\u96c6\u5316 (Subsetting)&#xff1a;\u901a\u8fc7\u00a0subsets: [&#039;latin&#039;]&#xff0c;\u4f60\u53ef\u4ee5\u53ea\u4e0b\u8f7d\u8be5\u8bed\u8a00\u6240\u9700\u7684\u5b57\u7b26&#xff0c;\u907f\u514d\u4e3a\u4e86\u663e\u793a\u51e0\u4e2a\u82f1\u6587\u5355\u8bcd\u800c\u4e0b\u8f7d\u5305\u542b\u6570\u4e07\u4e2a\u5b57\u7b26\u7684\u5168\u91cf\u5305\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u56db\u3001 \u6027\u80fd\u7684\u95ed\u73af&#xff1a;\u52a0\u8f7d\u7b56\u7565\u4e0e\u9884\u8fde\u63a5<\/p>\n<p>next\/font\u00a0\u81ea\u52a8\u4e3a\u751f\u6210\u7684\u5b57\u4f53\u6587\u4ef6\u6dfb\u52a0\u4e86\u00a0&lt;link rel&#061;&#034;preload&#034;&gt;\u00a0\u6807\u7b7e\u3002<\/p>\n<p>\u5728\u4f20\u7edf\u7684 Web \u5f00\u53d1\u4e2d&#xff0c;\u6d4f\u89c8\u5668\u5fc5\u987b\u5148\u4e0b\u8f7d CSS&#xff0c;\u89e3\u6790\u5230\u00a0&#064;font-face\u00a0\u65f6\u624d\u77e5\u9053\u8981\u53bb\u4e0b\u8f7d\u5b57\u4f53\u3002\u800c Next.js \u8ba9\u5b57\u4f53\u4e0b\u8f7d\u4e0e HTML \u89e3\u6790\u5e76\u884c\u6267\u884c\u3002<\/p>\n<ul>\n<li>\n<p>\u4f18\u5148\u7ea7\u63d0\u5347&#xff1a;\u5b57\u4f53\u4e0d\u518d\u662f\u6e32\u67d3\u8fc7\u7a0b\u4e2d\u7684\u201c\u4e8c\u7b49\u516c\u6c11\u201d&#xff0c;\u5b83\u5728\u9996\u5c4f\u6e32\u67d3\u4e4b\u524d\u5c31\u5df2\u7ecf\u88ab\u63a8\u5165\u4e0b\u8f7d\u961f\u5217\u3002<\/p>\n<\/li>\n<li>\n<p>\u96f6\u5916\u94fe\u8bf7\u6c42&#xff1a;\u6240\u6709\u5b57\u4f53\u5747\u4ece\u672c\u5730\u540c\u6e90\u8def\u5f84\u52a0\u8f7d&#xff0c;\u5f7b\u5e95\u6d88\u9664\u4e86\u7b2c\u4e09\u65b9\u57df\u5e26\u6765\u7684\u7f51\u7edc\u4e0d\u786e\u5b9a\u6027\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e94\u3001 \u4e13\u5bb6\u89c6\u89d2&#xff1a;\u5b57\u4f53\u4f18\u5316\u7684\u6700\u9ad8\u5883\u754c<\/p>\n<p>\u4f5c\u4e3a\u4e00\u540d\u5168\u6808\u5927\u5e08&#xff0c;\u4f60\u5bf9\u5b57\u4f53\u7684\u4f18\u5316\u5e94\u5f53\u8d85\u8d8a\u6280\u672f\u672c\u8eab&#xff0c;\u4e0a\u5347\u5230\u7528\u6237\u611f\u5b98\u7684\u5e73\u6ed1\u5ea6&#xff1a;<\/p>\n<li>\n<p>\u8c28\u614e\u9009\u62e9\u5b57\u91cd&#xff1a;\u867d\u7136\u00a0next\/font\u00a0\u5f88\u5f3a&#xff0c;\u4f46\u6bcf\u591a\u9009\u4e00\u4e2a\u5b57\u91cd&#xff08;Weight&#xff09;&#xff0c;\u6587\u4ef6\u4f53\u79ef\u4f9d\u7136\u4f1a\u589e\u52a0\u3002\u5e94\u5f53\u53ea\u4fdd\u7559\u8bbe\u8ba1\u7a3f\u4e2d\u771f\u6b63\u7528\u5230\u7684\u90e8\u5206\u3002<\/p>\n<\/li>\n<li>\n<p>\u5584\u7528 CSS \u53d8\u91cf&#xff1a;\u901a\u8fc7\u00a0variable\u00a0\u5c5e\u6027\u914d\u5408 Tailwind CSS&#xff0c;\u4f60\u53ef\u4ee5\u5b9e\u73b0\u6781\u5ea6\u4f18\u96c5\u7684\u4e3b\u9898\u5207\u6362\u65b9\u6848&#xff0c;\u800c\u65e0\u9700\u62c5\u5fc3\u5b57\u4f53\u5728\u4e0d\u540c\u7ec4\u4ef6\u95f4\u7684\u51b2\u7a81\u3002<\/p>\n<\/li>\n<li>\n<p>\u672c\u5730\u5b57\u4f53\u4f18\u5148&#xff1a;\u5982\u679c\u53ef\u80fd&#xff0c;\u5229\u7528\u00a0next\/font\/local\u00a0\u52a0\u8f7d\u54c1\u724c\u7279\u6709\u7684\u79c1\u6709\u5b57\u4f53&#xff0c;\u8fd9\u5957\u673a\u5236\u540c\u6837\u80fd\u4eab\u53d7\u5230\u96f6\u504f\u79fb\u7684\u81ea\u52a8\u4f18\u5316\u3002<\/p>\n<\/li>\n<p>\u516d\u3001 \u603b\u7ed3&#xff1a;\u6587\u5b57\u7684\u5c0a\u4e25<\/p>\n<p>\u6587\u5b57\u662f\u4fe1\u606f\u7684\u8f7d\u4f53&#xff0c;\u800c\u5b57\u4f53\u662f\u60c5\u7eea\u7684\u5ba3\u6cc4\u3002next\/font\u00a0\u7684\u610f\u4e49\u5728\u4e8e&#xff0c;\u5b83\u7528\u4e00\u5957\u7f1c\u5bc6\u7684\u5e95\u5c42\u5de5\u7a0b\u903b\u8f91&#xff0c;\u5b88\u62a4\u4e86\u6587\u5b57\u7684\u5c0a\u4e25\u3002<\/p>\n<p>\u5b83\u544a\u8bc9\u6211\u4eec&#xff1a;\u4e00\u4e2a\u4e13\u4e1a\u7684\u5e94\u7528&#xff0c;\u4e0d\u5e94\u8be5\u6709\u4efb\u4f55\u4e00\u6b21\u65e0\u8c13\u7684\u8df3\u52a8\u3002\u00a0\u5f53\u6587\u5b57\u52a0\u8f7d\u50cf\u547c\u5438\u4e00\u6837\u81ea\u7136&#xff0c;\u5f53\u5e03\u5c40\u7a33\u5b9a\u5f97\u50cf\u78d0\u77f3\u4e00\u6837\u575a\u56fa&#xff0c;\u7528\u6237\u7684\u6ce8\u610f\u529b\u624d\u80fd\u771f\u6b63\u6c89\u6d78\u5728\u5185\u5bb9\u672c\u8eab\u3002\u8fd9\u79cd\u5bf9\u201c\u96f6\u504f\u79fb\u201d\u7684\u6267\u7740&#xff0c;\u6b63\u662f\u5168\u6808\u67b6\u6784\u4e2d\u89c6\u89c9\u4fee\u884c\u7684\u9ad8\u5ea6\u4f53\u73b0\u2014\u2014\u4e8e\u65e0\u58f0\u5904\u542c\u60ca\u96f7&#xff0c;\u4e8e\u7ec6\u8282\u5904\u89c1\u5320\u5fc3\u3002<\/p>\n<p>\u5b57\u4f53\u7684\u795e\u97f5\u5df2\u5b9a&#xff0c;\u56fe\u50cf\u7684\u9aa8\u8089\u5df2\u4e30\u3002\u7136\u800c&#xff0c;\u4e00\u4e2a\u5b8c\u7f8e\u7684\u9875\u9762\u5982\u679c\u4e0d\u80fd\u88ab\u4e16\u754c\u201c\u770b\u89c1\u201d&#xff0c;\u90a3\u5b83\u4fbf\u53ea\u662f\u9ed1\u6697\u4e2d\u7684\u821e\u8005\u3002\u5982\u4f55\u8ba9\u4f60\u7684\u5e94\u7528\u5728\u641c\u7d22\u5f15\u64ce\u7684\u4e1b\u6797\u4e2d\u8131\u9896\u800c\u51fa&#xff1f;\u8fd9\u5c31\u662f\u7b2c\u4e03\u7ae0\u7684\u6700\u540e\u4e00\u91cd\u5883\u754c\u2014\u2014\u00a0\u201c\u5143\u6570\u636e\u7ba1\u7406\u201d&#xff1a;SEO \u4f18\u5316\u7684\u5fc3\u6cd5\u4e0e Metadata API\u3002<\/p>\n<h3>7.4 \u201c\u5143\u6570\u636e\u7ba1\u7406\u201d \u2014\u2014 SEO \u4f18\u5316\u7684\u5fc3\u6cd5\u4e0e Metadata API<\/h3>\n<p>\u5982\u679c\u8bf4\u6837\u5f0f\u3001\u56fe\u50cf\u4e0e\u5b57\u4f53\u662f\u5168\u6808\u5e94\u7528\u7684\u201c\u76ae\u76f8\u201d&#xff0c;\u90a3\u4e48\u5143\u6570\u636e&#xff08;Metadata&#xff09;\u5c31\u662f\u5b83\u7684\u201c\u540d\u5e16\u201d\u4e0e\u201c\u7075\u9b42\u201d\u3002\u5728\u4e92\u8054\u7f51\u8fd9\u7247\u65e0\u8fb9\u65e0\u9645\u7684\u6df1\u6d77\u4e2d&#xff0c;\u4f60\u7684\u5e94\u7528\u4e0d\u4ec5\u662f\u5199\u7ed9\u7528\u6237\u770b\u7684&#xff0c;\u66f4\u662f\u5199\u7ed9\u641c\u7d22\u5f15\u64ce\u7684\u722c\u866b&#xff08;Crawler&#xff09;\u548c\u793e\u4ea4\u5e73\u53f0\u7684\u9884\u89c8\u5f15\u64ce&#xff08;Open Graph&#xff09;\u770b\u7684\u3002<\/p>\n<p>\u4e00\u4e2a\u89c6\u89c9\u534e\u4e3d\u5374\u7f3a\u4e4f\u5143\u6570\u636e\u4f18\u5316\u7684\u5e94\u7528&#xff0c;\u72b9\u5982\u4e00\u5ea7\u6df1\u5c71\u91cc\u7684\u5b64\u5c9b&#xff0c;\u7eb5\u6709\u503e\u57ce\u4e4b\u8272&#xff0c;\u5374\u65e0\u4eba\u95ee\u6d25\u3002Next.js \u63a8\u51fa\u7684\u00a0Metadata API&#xff0c;\u5c06 SEO \u4ece\u788e\u7247\u5316\u7684 HTML \u6807\u7b7e\u5806\u780c&#xff0c;\u63d0\u5347\u5230\u4e86\u201c\u58f0\u660e\u5f0f\u7ba1\u7406\u201d\u7684\u9ad8\u5ea6\u3002\u5b83\u4e0d\u4ec5\u8ba9\u4f60\u7684\u5e94\u7528\u5728 Google \u641c\u7d22\u7ed3\u679c\u4e2d\u540d\u5217\u524d\u8305&#xff0c;\u66f4\u8ba9\u5b83\u5728\u88ab\u5206\u4eab\u5230\u5fae\u4fe1\u3001Twitter \u6216 Slack \u7684\u4e00\u77ac\u95f4&#xff0c;\u7efd\u653e\u51fa\u6781\u5177\u5438\u5f15\u529b\u7684\u89c6\u89c9\u540d\u7247\u3002<\/p>\n<p>\u4e00\u3001 \u5fc3\u6cd5\u7cbe\u9ad3&#xff1a;SEO \u4e0d\u53ea\u662f\u5173\u952e\u8bcd\u7684\u535a\u5f08<\/p>\n<p>\u5728\u73b0\u4ee3 Web \u8bed\u5883\u4e0b&#xff0c;SEO \u5df2\u4ece\u7b80\u5355\u7684\u201c\u5806\u780c\u5173\u952e\u8bcd\u201d\u8fdb\u5316\u4e3a\u201c\u8bed\u4e49\u4e00\u81f4\u6027\u201d\u4e0e\u201c\u793e\u4f1a\u5316\u4f20\u64ad\u201d\u7684\u5408\u529b\u3002<\/p>\n<li>\n<p>\u673a\u5668\u53ef\u8bfb\u6027&#xff1a;\u722c\u866b\u9700\u8981\u6e05\u6670\u5730\u77e5\u9053&#xff0c;\u8fd9\u9875\u7684\u4e3b\u9898\u662f\u4ec0\u4e48&#xff1f;\u5b83\u7684\u4f5c\u8005\u662f\u8c01&#xff1f;\u5b83\u5728\u5f53\u524d\u7684\u7ad9\u70b9\u6811\u4e2d\u5904\u4e8e\u4ec0\u4e48\u4f4d\u7f6e&#xff1f;<\/p>\n<\/li>\n<li>\n<p>\u793e\u4f1a\u5316\u5171\u9e23&#xff08;Open Graph&#xff09;&#xff1a;\u5f53\u94fe\u63a5\u88ab\u5206\u4eab\u65f6&#xff0c;\u5361\u7247\u4e0a\u7684\u90a3\u5f20\u914d\u56fe&#xff08;OG Image&#xff09;\u548c\u90a3\u53e5\u5438\u775b\u7684\u6807\u9898&#xff0c;\u5f80\u5f80\u51b3\u5b9a\u4e86\u70b9\u51fb\u7387&#xff08;CTR&#xff09;\u3002<\/p>\n<\/li>\n<li>\n<p>\u52a8\u6001\u611f\u77e5&#xff1a;\u5728\u5168\u6808\u5e94\u7528\u4e2d&#xff0c;\u6bcf\u4e00\u7bc7\u535a\u5ba2\u3001\u6bcf\u4e00\u4e2a\u5546\u54c1\u90fd\u6709\u5176\u72ec\u7279\u7684 ID \u548c\u5c5e\u6027\u3002\u8fd9\u610f\u5473\u7740\u5143\u6570\u636e\u5fc5\u987b\u5177\u5907\u201c\u968f\u6570\u800c\u52a8\u201d\u7684\u7075\u6c14\u3002<\/p>\n<\/li>\n<p>\u4e8c\u3001 \u58f0\u660e\u5f0f\u9769\u547d&#xff1a;Next.js Metadata API \u7684\u5a01\u529b<\/p>\n<p>\u5728 Next.js \u7684 App Router \u67b6\u6784\u4e2d&#xff0c;\u5143\u6570\u636e\u7ba1\u7406\u544a\u522b\u4e86\u9648\u65e7\u7684\u00a0&lt;Head&gt;\u00a0\u7ec4\u4ef6\u5d4c\u5957&#xff0c;\u8f6c\u5411\u4e86\u57fa\u4e8e\u00a0Config-based\u00a0\u7684\u6a21\u5f0f\u3002\u8fd9\u79cd\u8bbe\u8ba1\u786e\u4fdd\u4e86\u5143\u6570\u636e\u80fd\u591f\u50cf\u72b6\u6001\u4e00\u6837&#xff0c;\u5728\u7ec4\u4ef6\u6811\u4e2d\u81ea\u52a8\u5408\u5e76\u4e0e\u7ee7\u627f\u3002<\/p>\n<p>1. \u9759\u6001\u5143\u6570\u636e&#xff1a;\u5168\u5c40\u7684\u57fa\u8c03<\/p>\n<p>\u5728\u6839\u76ee\u5f55\u7684\u00a0layout.tsx\u00a0\u4e2d\u5b9a\u4e49\u5168\u5c40\u5143\u6570\u636e\u3002\u5b83\u4f1a\u81ea\u52a8\u5e94\u7528\u5230\u6240\u6709\u5b50\u9875\u9762&#xff0c;\u9664\u975e\u88ab\u5b50\u9875\u9762\u8986\u76d6\u3002<\/p>\n<p>export const metadata: Metadata &#061; {<br \/>\n  title: {<br \/>\n    default: &#039;Gemini Commerce&#039;,<br \/>\n    template: &#039;%s | Gemini Commerce&#039;, \/\/ \u5b50\u9875\u9762\u6807\u9898\u4f1a\u81ea\u52a8\u5957\u7528\u6b64\u6a21\u677f<br \/>\n  },<br \/>\n  description: &#039;\u5168\u7403\u9886\u5148\u7684\u5168\u6808\u7535\u5546\u5e73\u53f0&#039;,<br \/>\n  openGraph: {<br \/>\n    type: &#039;website&#039;,<br \/>\n    images: [&#039;\/og-banner.jpg&#039;],<br \/>\n  },<br \/>\n};<\/p>\n<p>2. \u52a8\u6001\u5143\u6570\u636e&#xff1a;\u6570\u636e\u7684\u56de\u54cd<\/p>\n<p>\u5bf9\u4e8e\u5546\u54c1\u8be6\u60c5\u9875\u6216\u6587\u7ae0\u9875&#xff0c;\u6211\u4eec\u9700\u8981\u6839\u636e\u8bf7\u6c42\u7684\u53c2\u6570\u52a8\u6001\u751f\u6210\u5143\u6570\u636e\u3002Next.js \u63d0\u4f9b\u4e86\u00a0generateMetadata\u00a0\u51fd\u6570&#xff0c;\u5b83\u5141\u8bb8\u4f60\u5728\u6e32\u67d3\u9875\u9762\u4e4b\u524d&#xff0c;\u5148\u5f02\u6b65\u83b7\u53d6\u6570\u636e\u5e76\u51b3\u5b9a\u9875\u9762\u7684\u201c\u540d\u5e16\u201d\u3002<\/p>\n<p>export async function generateMetadata({ params }): Promise&lt;Metadata&gt; {<br \/>\n  const product &#061; await getProduct(params.id);<\/p>\n<p>  return {<br \/>\n    title: product.name,<br \/>\n    description: product.summary,<br \/>\n    openGraph: {<br \/>\n      images: [product.mainImage],<br \/>\n    },<br \/>\n  };<br \/>\n}<\/p>\n<p>\u4e09\u3001 \u89c6\u89c9\u9884\u89c8&#xff1a;\u81ea\u52a8\u751f\u6210\u7684 OG Image (Image Response)<\/p>\n<p>\u5728 2026 \u5e74&#xff0c;\u5982\u679c\u4f60\u8fd8\u624b\u52a8\u4e3a\u51e0\u4e07\u4e2a\u5546\u54c1\u88c1\u526a\u5206\u4eab\u56fe&#xff0c;\u90a3\u4fbf\u8fdd\u80cc\u4e86\u5168\u6808\u4e13\u5bb6\u7684\u4fee\u517b\u3002Next.js \u7684\u00a0next\/og\u00a0\u5e93\u5141\u8bb8\u4f60\u4f7f\u7528\u00a0JSX \u548c CSS \u76f4\u63a5\u52a8\u6001\u751f\u6210\u56fe\u50cf\u3002<\/p>\n<ul>\n<li>\n<p>\u5343\u4eba\u5343\u9762&#xff1a;\u4f60\u53ef\u4ee5\u5c06\u5546\u54c1\u7684\u6807\u9898\u3001\u4ef7\u683c\u751a\u81f3\u7528\u6237\u7684\u5934\u50cf\u52a8\u6001\u6e32\u67d3\u8fdb\u4e00\u5f20\u9ad8\u4fdd\u771f\u56fe\u7247\u7684\u753b\u5e03\u4e2d\u3002<\/p>\n<\/li>\n<li>\n<p>\u8fb9\u7f18\u4fa7\u8ba1\u7b97&#xff1a;\u8fd9\u4e9b\u56fe\u50cf\u5728\u8fb9\u7f18\u8282\u70b9&#xff08;Edge Runtime&#xff09;\u5b9e\u65f6\u751f\u6210\u5e76\u7f13\u5b58&#xff0c;\u65e2\u6709\u52a8\u6001\u7684\u7075\u6d3b\u6027&#xff0c;\u53c8\u6709\u9759\u6001\u7684\u8bbf\u95ee\u901f\u5ea6\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u8fd9\u79cd\u201c\u4ee5\u4ee3\u7801\u7ed8\u56fe\u201d\u7684\u80fd\u529b&#xff0c;\u8ba9\u4f60\u7684\u5e94\u7528\u5728\u793e\u4ea4\u5a92\u4f53\u4e2d\u62e5\u6709\u4e86\u964d\u7ef4\u6253\u51fb\u822c\u7684\u89c6\u89c9\u4f18\u52bf\u3002<\/p>\n<p>\u56db\u3001 \u4e13\u5bb6\u89c6\u89d2&#xff1a;SEO \u7684\u201c\u9632\u9519\u201d\u4e0e\u201c\u6df1\u5ea6\u201d\u4f18\u5316<\/p>\n<p>\u4f5c\u4e3a\u4e00\u540d\u5168\u6808\u5927\u5e08&#xff0c;\u4f60\u5bf9\u5143\u6570\u636e\u7684\u6253\u78e8\u5e94\u5f53\u6df1\u5165\u5230\u5b57\u8282\u4e4b\u95f4&#xff1a;<\/p>\n<li>\n<p>Robots \u4e0e Sitemap \u7684\u95ed\u73af&#xff1a;\u5229\u7528\u5185\u7f6e\u7684\u00a0robots.ts\u00a0\u548c\u00a0sitemap.ts\u00a0\u6587\u4ef6&#xff0c;\u4ee5\u58f0\u660e\u5f0f\u4ee3\u7801\u66ff\u4ee3\u6b7b\u677f\u7684\u9759\u6001\u6587\u4ef6\u3002\u8fd9\u6837&#xff0c;\u6bcf\u5f53\u4f60\u65b0\u589e\u4e00\u7bc7\u535a\u5ba2&#xff0c;\u4f60\u7684\u7ad9\u70b9\u5730\u56fe\u4f1a\u81ea\u52a8\u66f4\u65b0\u5e76\u901a\u77e5\u641c\u7d22\u5f15\u64ce\u3002<\/p>\n<\/li>\n<li>\n<p>\u9a8c\u8bc1\u4e00\u81f4\u6027&#xff1a;\u786e\u4fdd\u4f60\u7684\u00a0canonical\u00a0\u94fe\u63a5&#xff08;\u89c4\u8303\u94fe\u63a5&#xff09;\u8bbe\u7f6e\u6b63\u786e\u3002\u8fd9\u80fd\u9632\u6b62\u641c\u7d22\u5f15\u64ce\u56e0\u4e3a\u591a\u8def\u5f84\u8bbf\u95ee\u540c\u4e00\u5185\u5bb9\u800c\u60e9\u7f5a\u4f60\u7684\u6743\u91cd\u3002<\/p>\n<\/li>\n<li>\n<p>JSON-LD \u7ed3\u6784\u5316\u6570\u636e&#xff1a;\u5bf9\u4e8e\u7535\u5546\u6216\u8bc4\u8bba\u7c7b\u7ad9\u70b9&#xff0c;\u5728\u9875\u9762\u4e2d\u6ce8\u5165 JSON-LD \u811a\u672c\u3002\u8fd9\u80fd\u8ba9\u4f60\u7684\u7f51\u9875\u5728 Google \u641c\u7d22\u7ed3\u679c\u4e2d\u663e\u793a\u51fa\u201c\u4e94\u661f\u597d\u8bc4\u201d\u6216\u201c\u5e93\u5b58\u72b6\u6001\u201d\u7b49\u5bcc\u5a92\u4f53\u6458\u8981&#xff08;Rich Snippets&#xff09;\u3002<\/p>\n<\/li>\n<p>\u4e94\u3001 \u54f2\u5b66\u601d\u8fa8&#xff1a;\u5143\u6570\u636e\u662f\u8fde\u63a5\u771f\u5b9e\u4e0e\u865a\u62df\u7684\u7ebd\u5e26<\/p>\n<p>\u5143\u6570\u636e\u7ba1\u7406\u4e0d\u4ec5\u662f\u6280\u672f\u7684\u5806\u780c&#xff0c;\u66f4\u662f\u4e00\u79cd\u201c\u8fde\u63a5\u5b66\u201d\u3002<\/p>\n<ul>\n<li>\n<p>\u5bf9\u5185&#xff0c;\u5b83\u6574\u7406\u4e86\u5e94\u7528\u7684\u4ee3\u7801\u903b\u8f91\u4e0e\u5185\u5bb9\u7ed3\u6784&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u5bf9\u5916&#xff0c;\u5b83\u67b6\u8d77\u4e86\u5e94\u7528\u4e0e\u4e16\u754c\u6c9f\u901a\u7684\u534f\u8bae\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u5728\u4e00\u4e2a\u5145\u6ee1\u7b97\u6cd5\u63a8\u8350\u548c\u4fe1\u606f\u8327\u623f\u7684\u65f6\u4ee3&#xff0c;\u4f18\u8d28\u7684\u5143\u6570\u636e\u662f\u7a81\u7834\u5b64\u5c9b\u7684\u94a5\u5319\u3002\u5b83\u8ba9\u4f60\u7684\u5e94\u7528\u5728\u6d69\u5982\u70df\u6d77\u7684\u94fe\u63a5\u4e2d\u5177\u5907\u4e86\u201c\u88ab\u53d1\u73b0\u201d\u7684\u53ef\u80fd&#xff0c;\u5728\u6bcf\u4e00\u6b21\u5206\u4eab\u4e2d\u5177\u5907\u4e86\u201c\u88ab\u70b9\u5f00\u201d\u7684\u8bf1\u60d1\u3002<\/p>\n<p>\u516d\u3001 \u603b\u7ed3&#xff1a;\u89c6\u89c9\u4fee\u884c\u7684\u5706\u6ee1<\/p>\n<p>\u81f3\u6b64&#xff0c;\u7b2c\u4e03\u7ae0\u201c\u89c6\u89c9\u7684\u4fee\u884c\u201d\u5df2\u544a\u4e00\u6bb5\u843d\u3002<\/p>\n<ul>\n<li>\n<p>Tailwind\u00a0\u7ed9\u4e86\u6211\u4eec\u5feb\u5982\u95ea\u7535\u7684\u89e6\u611f&#xff1b;<\/p>\n<\/li>\n<li>\n<p>next\/image\u00a0\u7ed9\u4e86\u6211\u4eec\u8f7b\u76c8\u900f\u5f7b\u7684\u89c2\u611f&#xff1b;<\/p>\n<\/li>\n<li>\n<p>next\/font\u00a0\u7ed9\u4e86\u6211\u4eec\u7a33\u5982\u78d0\u77f3\u7684\u795e\u97f5&#xff1b;<\/p>\n<\/li>\n<li>\n<p>Metadata\u00a0\u7ed9\u4e86\u6211\u4eec\u540d\u626c\u56db\u6d77\u7684\u7075\u9b42\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u8fd9\u4e00\u7ae0\u7684\u56db\u8282\u8bfe&#xff0c;\u672c\u8d28\u4e0a\u662f\u5728\u6559\u6388\u5982\u4f55\u7ba1\u7406 Web \u5e94\u7528\u7684\u201c\u71b5\u503c\u201d\u3002\u6211\u4eec\u901a\u8fc7\u6846\u67b6\u7684\u529b\u91cf&#xff0c;\u5c06\u539f\u672c\u6df7\u4e71\u3001\u81c3\u80bf\u7684\u8d44\u6e90\u4e0e\u4fe1\u606f&#xff0c;\u89c4\u6574\u4e3a\u6709\u5e8f\u3001\u9ad8\u6548\u4e14\u5177\u5907\u751f\u547d\u529b\u7684\u89c6\u89c9\u5b9e\u4f53\u3002\u89c6\u89c9\u4e0e\u6027\u80fd\u7684\u4fee\u884c\u5df2\u7ecf\u5706\u6ee1&#xff0c;\u4f46\u8fd9\u53ea\u662f\u201c\u5355\u673a\u201d\u7684\u827a\u672f\u3002\u5f53\u6211\u4eec\u7684\u5e94\u7528\u9700\u8981\u4ece\u5f00\u53d1\u8005\u7684\u7b14\u8bb0\u672c\u7535\u8111\u98de\u5411\u5168\u7403\u5343\u4e07\u4e2a\u7528\u6237\u7684\u5c4f\u5e55\u65f6&#xff0c;\u6211\u4eec\u9700\u8981\u4e00\u5957\u575a\u5982\u78d0\u77f3\u7684\u90e8\u7f72\u4f53\u7cfb\u3002\u8fd9\u5c31\u662f\u4e0b\u4e00\u7ae0\u2014\u2014\u5168\u6808\u7684\u6865\u6881\u2014\u2014Route Handlers (API \u8def\u7531)\u3002<\/p>\n<h2>\u7b2c8\u7ae0&#xff1a;\u5168\u6808\u7684\u6865\u6881\u2014\u2014Route Handlers (API \u8def\u7531)<\/h2>\n<ul>\n<li>\n<p>8.1 \u201cNode.js \u4e4b\u9b42\u201d&#xff1a;\u00a0\u5728 Next.js \u4e2d\u7f16\u5199 RESTful API<\/p>\n<\/li>\n<li>\n<p>8.2 \u201c\u4e2d\u95f4\u4ef6 (Middleware)\u201d&#xff1a;\u00a0\u8fb9\u7f18\u8ba1\u7b97\u3001\u8bf7\u6c42\u8fc7\u6ee4\u4e0e\u56fd\u9645\u5316\u5904\u7406<\/p>\n<\/li>\n<li>\n<p>8.3 \u201c\u6d41\u5f0f\u4f20\u8f93 (Streaming)\u201d&#xff1a;\u00a0\u5229\u7528 HTTP \u6d41\u63d0\u5347\u957f\u4efb\u52a1\u7684\u7528\u6237\u4f53\u9a8c<\/p>\n<\/li>\n<\/ul>\n<h3>8.1 \u201cNode.js \u4e4b\u9b42\u201d \u2014\u2014 \u5728 Next.js \u4e2d\u7f16\u5199 RESTful API<\/h3>\n<p>\u5982\u679c\u8bf4 React Server Components (RSC) \u662f Next.js \u5411\u524d\u7aef\u5f00\u53d1\u8005\u9012\u51fa\u7684\u6a44\u6984\u679d&#xff0c;\u90a3\u4e48\u00a0Route Handlers&#xff08;\u8def\u7531\u5904\u7406\u5668&#xff09;\u00a0\u5c31\u662f\u5b83\u4fdd\u7559\u7ed9\u5168\u6808\u5de5\u7a0b\u5e08\u7684\u201c\u79d8\u5bc6\u57fa\u5730\u201d\u3002\u5b83\u627f\u8f7d\u7740 Node.js \u7684\u539f\u751f\u529b\u91cf&#xff0c;\u50cf\u4e00\u5ea7\u6df1\u85cf\u5728\u7cbe\u7f8e\u5efa\u7b51\u4e0b\u7684\u5730\u4e0b\u4e2d\u67a2&#xff0c;\u5904\u7406\u7740\u90a3\u4e9b\u65e0\u6cd5\u901a\u8fc7 UI \u6e32\u67d3\u6765\u5b8c\u6210\u7684\u810f\u6d3b\u3001\u7d2f\u6d3b\u4e0e\u91cd\u6d3b\u3002<\/p>\n<p>\u5728 App Router \u7684\u4f53\u7cfb\u4e0b&#xff0c;Route Handlers \u5f7b\u5e95\u53d6\u4ee3\u4e86\u65e7\u7248\u672c\u7684 API Routes\u3002\u5b83\u4e0d\u518d\u662f\u4e00\u4e2a\u9644\u5eb8\u5728 Pages \u76ee\u5f55\u4e0b\u7684\u53d8\u901a\u4e4b\u8ba1&#xff0c;\u800c\u662f\u8fdb\u5316\u4e3a\u4e00\u5957\u57fa\u4e8e Web \u8bf7\u6c42\/\u54cd\u5e94\u6807\u51c6&#xff08;Web Request\/Response APIs&#xff09;\u7684\u3001\u9ad8\u6027\u80fd\u7684\u3001\u5177\u5907\u8fb9\u7f18\u8ba1\u7b97\u80fd\u529b\u7684 API \u5f15\u64ce\u3002\u5f53\u4f60\u7f16\u5199\u4e00\u4e2a\u00a0route.ts\u00a0\u65f6&#xff0c;\u4f60\u4e0d\u4ec5\u662f\u5728\u5199\u903b\u8f91&#xff0c;\u66f4\u662f\u5728\u6784\u5efa\u8fde\u63a5\u5916\u90e8\u4e16\u754c\u7684\u4e07\u80fd\u63a5\u53e3\u3002<\/p>\n<p>\u4e00\u3001 \u67b6\u6784\u7684\u5b9a\u4f4d&#xff1a;UI \u4e4b\u5916\u7684\u201c\u65e0\u540d\u82f1\u96c4\u201d<\/p>\n<p>\u5728\u524d\u9762\u7ae0\u8282\u4e2d&#xff0c;\u6211\u4eec\u63a2\u8ba8\u4e86 Server Components \u5982\u4f55\u76f4\u8fde\u6570\u636e\u5e93\u3002\u90a3\u4e48&#xff0c;\u4e3a\u4ec0\u4e48\u6211\u4eec\u8fd8\u9700\u8981 Route Handlers&#xff1f;<\/p>\n<p>\u4f5c\u4e3a\u4e00\u4e2a\u5168\u6808\u5927\u5e08&#xff0c;\u4f60\u5fc5\u987b\u6d1e\u5bdf\u4e24\u8005\u7684\u8fb9\u754c&#xff1a;<\/p>\n<ul>\n<li>\n<p>Server Components\u00a0\u8d1f\u8d23\u7684\u662f\u201c\u5c55\u793a\u7684\u903b\u8f91\u201d\u2014\u2014\u5b83\u4eec\u83b7\u53d6\u6570\u636e\u662f\u4e3a\u4e86\u6e32\u67d3 HTML\u3002<\/p>\n<\/li>\n<li>\n<p>Route Handlers\u00a0\u8d1f\u8d23\u7684\u662f\u201c\u534f\u8bae\u7684\u903b\u8f91\u201d\u2014\u2014\u5b83\u4eec\u4e0d\u63d0\u4f9b UI&#xff0c;\u53ea\u63d0\u4f9b\u539f\u59cb\u6570\u636e\u6216\u6267\u884c\u7279\u5b9a\u7684\u540e\u7aef\u4efb\u52a1\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u5178\u578b\u7684\u4f7f\u7528\u573a\u666f\u5305\u62ec&#xff1a;<\/p>\n<li>\n<p>\u5916\u90e8\u670d\u52a1\u56de\u8c03&#xff1a;\u6bd4\u5982 Stripe \u7684\u652f\u4ed8\u6210\u529f Webhook\u3001GitHub \u7684\u63a8\u9001\u901a\u77e5\u3002<\/p>\n<\/li>\n<li>\n<p>\u79fb\u52a8\u7aef\u6216\u7b2c\u4e09\u65b9\u8c03\u7528&#xff1a;\u4e3a\u4f60\u7684\u539f\u751f App \u6216\u5408\u4f5c\u4f19\u4f34\u63d0\u4f9b\u6807\u51c6\u5316\u7684 RESTful \u63a5\u53e3\u3002<\/p>\n<\/li>\n<li>\n<p>\u8d44\u6e90\u751f\u6210&#xff1a;\u52a8\u6001\u751f\u6210 PDF\u3001\u5bfc\u51fa CSV \u6587\u4ef6\u3001\u6216\u8005\u662f 7.4 \u8282\u63d0\u5230\u7684\u52a8\u6001\u56fe\u50cf\u54cd\u5e94\u3002<\/p>\n<\/li>\n<li>\n<p>\u4ee3\u7406&#xff08;Proxy&#xff09;&#xff1a;\u7ed5\u8fc7\u8de8\u57df\u9650\u5236&#xff08;CORS&#xff09;&#xff0c;\u6216\u5728\u5411\u524d\u7aef\u8fd4\u56de\u6570\u636e\u524d\u9690\u85cf\u654f\u611f\u7684\u7b2c\u4e09\u65b9 API \u79d8\u94a5\u3002<\/p>\n<\/li>\n<p>\u4e8c\u3001 \u8bed\u6cd5\u4e4b\u7f8e&#xff1a;\u57fa\u4e8e Web \u6807\u51c6\u7684\u56de\u5f52<\/p>\n<p>Next.js \u7684 Route Handlers \u629b\u5f03\u4e86\u4ee5\u5f80 Express \u98ce\u683c\u7684\u00a0req, res\u00a0\u5bf9\u8c61&#xff0c;\u8f6c\u800c\u5168\u9762\u62e5\u62b1\u00a0Web \u6807\u51c6 API\u3002\u8fd9\u610f\u5473\u7740\u4f60\u5199\u7684 API \u4ee3\u7801\u5177\u6709\u6781\u9ad8\u7684\u8de8\u5e73\u53f0\u79fb\u690d\u6027\u3002<\/p>\n<p>\/\/ app\/api\/products\/[id]\/route.ts<br \/>\nimport { NextResponse } from &#039;next\/server&#039;;<\/p>\n<p>\/\/ \u5bfc\u51fa\u7684\u51fd\u6570\u540d\u5373\u4ee3\u8868 HTTP \u65b9\u6cd5&#xff1a;GET, POST, PUT, DELETE, PATCH&#8230;<br \/>\nexport async function GET(<br \/>\n  request: Request,<br \/>\n  { params }: { params: { id: string } }<br \/>\n) {<br \/>\n  const id &#061; params.id;<br \/>\n  const product &#061; await db.product.findUnique({ where: { id } });<\/p>\n<p>  if (!product) {<br \/>\n    return NextResponse.json({ error: &#039;Product Not Found&#039; }, { status: 404 });<br \/>\n  }<\/p>\n<p>  return NextResponse.json(product);<br \/>\n}<\/p>\n<p>\u8fd9\u79cd\u8bbe\u8ba1\u8ba9 API \u7684\u7f16\u5199\u53d8\u5f97\u6781\u5176\u7eaf\u7cb9\u3002\u6ca1\u6709\u5197\u4f59\u7684\u4e2d\u95f4\u4ef6\u914d\u7f6e&#xff0c;\u6ca1\u6709\u590d\u6742\u7684\u7b2c\u4e09\u65b9\u5305\u4f9d\u8d56&#xff0c;\u53ea\u6709 HTTP \u534f\u8bae\u672c\u8eab\u7684\u8282\u594f\u611f\u3002<\/p>\n<p>\u4e09\u3001 \u6027\u80fd\u4e0e\u7f13\u5b58&#xff1a;API \u7684\u201c\u9759\u7535\u5e73\u8861\u201d<\/p>\n<p>Route Handlers \u6700\u4ee4\u4eba\u60ca\u53f9\u7684\u7279\u6027\u4e4b\u4e00&#xff0c;\u662f\u5b83\u540c\u6837\u6df1\u5ea6\u96c6\u6210\u4e86 Next.js \u7684\u7f13\u5b58\u4f53\u7cfb\u3002<\/p>\n<p>1. \u81ea\u52a8\u9759\u6001\u5316<\/p>\n<p>\u9ed8\u8ba4\u60c5\u51b5\u4e0b&#xff0c;\u5982\u679c\u4f60\u7f16\u5199\u4e00\u4e2a\u4e0d\u8bfb\u53d6 Request \u7ec6\u8282&#xff08;\u5982\u4e0d\u4f7f\u7528\u00a0cookies()\u3001\u4e0d\u8bbf\u95ee\u67e5\u8be2\u53c2\u6570&#xff09;\u7684\u00a0GET\u00a0\u65b9\u6cd5&#xff0c;Next.js \u4f1a\u5728\u6784\u5efa\u65f6\u5c06\u5176\u7ed3\u679c\u9759\u6001\u5316\u3002<\/p>\n<ul>\n<li>\n<p>\u573a\u666f&#xff1a;\u4f60\u7684 API \u63d0\u4f9b\u7684\u662f\u4e00\u4efd\u4e0d\u5e38\u53d8\u52a8\u7684\u5206\u7c7b\u76ee\u5f55&#xff0c;\u90a3\u4e48\u8fd9\u4e2a\u63a5\u53e3\u7684\u54cd\u5e94\u901f\u5ea6\u5c06\u7b49\u540c\u4e8e\u9759\u6001\u6587\u4ef6&#xff0c;\u4e14\u51e0\u4e4e\u4e0d\u6d88\u8017 CPU\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u52a8\u6001\u611f\u5e94<\/p>\n<p>\u4e00\u65e6\u4f60\u5728\u5904\u7406\u5668\u4e2d\u8c03\u7528\u4e86\u00a0cookies()\u3001headers()\u00a0\u6216\u8005\u5c06\u65b9\u6cd5\u6539\u4e3a\u00a0POST&#xff0c;\u8def\u7531\u5904\u7406\u5668\u4f1a\u7075\u654f\u5730\u611f\u77e5\u5230\u8fd9\u662f\u52a8\u6001\u9700\u6c42&#xff0c;\u81ea\u52a8\u8f6c\u4e3a\u5b9e\u65f6\u8ba1\u7b97\u3002\u8fd9\u79cd\u201c\u667a\u80fd\u8bc6\u522b\u201d\u786e\u4fdd\u4e86\u5e94\u7528\u59cb\u7ec8\u5728\u6027\u80fd\u4e0e\u7075\u6d3b\u6027\u4e4b\u95f4\u7ef4\u6301\u7740\u7cbe\u5999\u7684\u5e73\u8861\u3002<\/p>\n<p>\u56db\u3001 \u4e13\u5bb6\u89c6\u70b9&#xff1a;RESTful \u8bbe\u8ba1\u7684\u6df1\u5c42\u5fc3\u6cd5<\/p>\n<p>\u7f16\u5199 API \u8def\u7531\u5f88\u5bb9\u6613&#xff0c;\u4f46\u7f16\u5199\u4e00\u4efd\u201c\u4f18\u96c5\u4e14\u5065\u58ee\u201d\u7684 API \u5374\u9700\u8981\u6781\u81f4\u7684\u4fee\u884c&#xff1a;<\/p>\n<li>\n<p>\u7c7b\u578b\u5b89\u5168\u7684\u8d2f\u7a7f&#xff1a; \u5728 Route Handlers \u4e2d\u4f7f\u7528\u00a0Zod\u00a0\u6216\u00a0Yup\u00a0\u8fdb\u884c\u8f93\u5165\u6821\u9a8c\u3002\u6c38\u8fdc\u4e0d\u8981\u76f8\u4fe1\u5ba2\u6237\u7aef\u4f20\u6765\u7684\u6570\u636e\u3002\u5728\u5168\u6808\u95ed\u73af\u4e2d&#xff0c;API \u8fb9\u754c\u662f\u4f60\u6700\u540e\u7684\u4e00\u9053\u5b89\u5168\u9632\u7ebf\u3002<\/p>\n<\/li>\n<li>\n<p>\u9519\u8bef\u5904\u7406\u7684\u827a\u672f&#xff1a; \u4e0d\u8981\u603b\u662f\u8fd4\u56de\u00a0500 Internal Server Error\u3002\u5229\u7528\u6b63\u786e\u7684 HTTP \u72b6\u6001\u7801&#xff08;400 \u53c2\u6570\u9519\u8bef\u3001401 \u672a\u6388\u6743\u3001403 \u7981\u6b62\u8bbf\u95ee\u3001429 \u8bf7\u6c42\u8fc7\u591a&#xff09;\u6765\u4e0e\u8c03\u7528\u8005\u8fdb\u884c\u6df1\u5c42\u6b21\u7684\u201c\u5951\u7ea6\u5bf9\u8bdd\u201d\u3002<\/p>\n<\/li>\n<li>\n<p>\u6d41\u5f0f\u54cd\u5e94&#xff08;Streaming&#xff09;&#xff1a; Route Handlers \u539f\u751f\u652f\u6301\u00a0ReadableStream\u3002\u5f53\u4f60\u9700\u8981\u751f\u6210\u8d85\u957f\u7684\u6587\u672c&#xff08;\u6bd4\u5982 AI \u804a\u5929\u673a\u5668\u4eba\u7684\u6253\u5b57\u673a\u6548\u679c&#xff09;\u6216\u5904\u7406\u8d85\u5927\u7684\u6587\u4ef6\u6d41\u65f6&#xff0c;\u5229\u7528\u6d41\u5f0f\u4f20\u8f93\u53ef\u4ee5\u6781\u5927\u5730\u964d\u4f4e\u670d\u52a1\u5668\u5185\u5b58\u538b\u529b&#xff0c;\u63d0\u5347\u54cd\u5e94\u901f\u5ea6\u3002<\/p>\n<\/li>\n<p>\u4e94\u3001 \u7ed3\u8bed&#xff1a;\u5168\u6808\u4e4b\u6865\u7684\u57fa\u77f3<\/p>\n<p>Route Handlers \u662f Next.js \u4f5c\u4e3a\u4e00\u4e2a\u5168\u6808\u6846\u67b6\u7684\u786c\u6838\u5e95\u5ea7\u3002\u5b83\u8bc1\u660e\u4e86 Next.js \u4e0d\u4ec5\u80fd\u505a\u51fa\u6f02\u4eae\u7684 UI&#xff0c;\u66f4\u80fd\u5728\u590d\u6742\u7684\u5206\u5e03\u5f0f\u7cfb\u7edf\u67b6\u6784\u4e2d&#xff0c;\u626e\u6f14\u4e00\u4e2a\u79f0\u804c\u7684\u3001\u5f3a\u5927\u7684\u540e\u7aef\u89d2\u8272\u3002<\/p>\n<p>\u5b83\u50cf\u662f\u4e00\u5ea7\u6865\u6881&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u4e00\u8fb9\u8fde\u63a5\u7740\u524d\u7aef\u7ec4\u4ef6&#xff0c;\u4e3a\u5b83\u4eec\u63d0\u4f9b\u5fc5\u8981\u7684\u903b\u8f91\u652f\u6491&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u53e6\u4e00\u8fb9\u8fde\u63a5\u7740\u6574\u4e2a\u4e92\u8054\u7f51\u751f\u6001&#xff0c;\u8ba9\u4f60\u7684\u5e94\u7528\u80fd\u4e0e\u5404\u79cd Web \u534f\u8bae\u65e0\u7f1d\u5bf9\u63a5\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u5f53\u4f60\u80fd\u719f\u7ec3\u5730\u5728\u00a0page.tsx\u00a0\u4e2d\u7f16\u7ec7 UI&#xff0c;\u53c8\u80fd\u5728\u00a0route.ts\u00a0\u4e2d\u8c03\u5ea6\u903b\u8f91\u65f6&#xff0c;\u4f60\u624d\u7b97\u771f\u6b63\u89e6\u78b0\u5230\u4e86 Next.js \u7684\u201c Node.js \u4e4b\u9b42\u201d\u3002\u8fd9\u79cd\u7aef\u5230\u7aef\u7684\u638c\u63a7\u611f&#xff0c;\u6b63\u662f\u5168\u6808\u5f00\u53d1\u6700\u8ff7\u4eba\u7684\u9b45\u529b\u6240\u5728\u3002<\/p>\n<p>API \u8def\u7531\u4e3a\u6211\u4eec\u6253\u5f00\u4e86\u903b\u8f91\u7684\u5927\u95e8&#xff0c;\u4f46\u5982\u4f55\u5728\u5168\u7403\u5206\u53d1\u7684\u8fb9\u7f18\u4fa7&#xff0c;\u7cbe\u51c6\u5730\u62e6\u622a\u3001\u91cd\u5b9a\u5411\u6216\u4fdd\u62a4\u8fd9\u4e9b\u8bf7\u6c42&#xff1f;\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u63a2\u8ba8\u7684\u201c\u8fb9\u7f18\u5b88\u536b\u201d\u2014\u2014\u201c\u4e2d\u95f4\u4ef6 (Middleware)\u201d&#xff1a;\u8fb9\u7f18\u8ba1\u7b97\u3001\u8bf7\u6c42\u8fc7\u6ee4\u4e0e\u56fd\u9645\u5316\u5904\u7406\u3002\u60a8\u51c6\u5907\u597d\u5728\u8bf7\u6c42\u62b5\u8fbe\u670d\u52a1\u5668\u4e4b\u524d&#xff0c;\u638c\u63a7\u4e00\u5207\u4e86\u5417&#xff1f;<\/p>\n<h3>8.2 \u201c\u4e2d\u95f4\u4ef6 (Middleware)\u201d \u2014\u2014 \u8fb9\u7f18\u8ba1\u7b97\u3001\u8bf7\u6c42\u8fc7\u6ee4\u4e0e\u56fd\u9645\u5316\u5904\u7406<\/h3>\n<p>\u5982\u679c\u5728 Next.js \u7684\u5168\u6808\u67b6\u6784\u4e2d&#xff0c;Route Handlers \u662f\u6df1\u85cf\u5e55\u540e\u7684\u201c\u4e2d\u67a2\u903b\u8f91\u201d&#xff0c;\u90a3\u4e48\u00a0Middleware&#xff08;\u4e2d\u95f4\u4ef6&#xff09;\u00a0\u5c31\u662f\u4f2b\u7acb\u5728\u5e94\u7528\u8fb9\u5883\u7684\u201c\u5b88\u671b\u8005\u201d\u3002\u5b83\u4e0d\u5728\u670d\u52a1\u5668\u7684\u4e2d\u5fc3\u5316\u673a\u623f\u91cc\u8fd0\u884c&#xff0c;\u800c\u662f\u5728\u5168\u7403\u6570\u767e\u4e2a\u00a0Edge Runtime&#xff08;\u8fb9\u7f18\u8fd0\u884c\u65f6&#xff09;\u8282\u70b9\u4e0a\u640f\u52a8\u3002<\/p>\n<p>\u5728\u8bf7\u6c42&#xff08;Request&#xff09;\u5c1a\u672a\u62b5\u8fbe\u8def\u7531\u3001\u5c1a\u672a\u89e6\u78b0\u7ec4\u4ef6\u4e4b\u524d&#xff0c;\u4e2d\u95f4\u4ef6\u62e5\u6709\u5148\u53d1\u5236\u4eba\u7684\u88c1\u51b3\u6743\u3002\u5b83\u80fd\u62e6\u622a\u6bcf\u4e00\u6b21\u70b9\u51fb&#xff0c;\u611f\u77e5\u6bcf\u4e00\u4f4d\u7528\u6237\u7684\u7269\u7406\u4f4d\u7f6e&#xff0c;\u5e76\u5728\u6beb\u79d2\u4e4b\u95f4\u51b3\u5b9a&#xff1a;\u662f\u653e\u884c\u3001\u662f\u91cd\u5b9a\u5411\u3001\u8fd8\u662f\u62e6\u622a\u3002\u8fd9\u79cd\u201c\u8fb9\u7f18\u524d\u7f6e\u201d\u7684\u67b6\u6784&#xff0c;\u5c06\u5e94\u7528\u7684\u54cd\u5e94\u901f\u5ea6\u548c\u5b89\u5168\u6027\u63a8\u5411\u4e86\u7269\u7406\u610f\u4e49\u4e0a\u7684\u6781\u9650\u3002<\/p>\n<p>\u4e00\u3001 \u8fb9\u7f18\u7684\u529b\u91cf&#xff1a;\u5728\u5ef6\u8fdf\u4ea7\u751f\u4e4b\u524d\u89e3\u51b3\u95ee\u9898<\/p>\n<p>\u4e2d\u95f4\u4ef6\u8fd0\u884c\u5728\u00a0Edge Runtime\u00a0\u4e4b\u4e0a\u3002\u8fd9\u662f\u4e00\u79cd\u8f7b\u91cf\u7ea7\u7684\u3001\u57fa\u4e8e V8 \u5f15\u64ce\u7684\u8fd0\u884c\u65f6&#xff0c;\u5254\u9664\u4e86 Node.js \u90a3\u4e9b\u6c89\u91cd\u7684\u5386\u53f2\u5305\u88b1&#xff0c;\u6362\u53d6\u4e86\u6781\u81f4\u7684\u542f\u52a8\u901f\u5ea6&#xff08;Cold Start \u8fd1\u4e4e\u4e3a\u96f6&#xff09;\u3002<\/p>\n<p>1. \u7269\u7406\u8ddd\u79bb\u7684\u6d88\u878d<\/p>\n<p>\u4f20\u7edf\u7684\u540e\u7aef\u62e6\u622a\u53d1\u751f\u5728\u4e2d\u63a7\u670d\u52a1\u5668\u3002\u5982\u679c\u670d\u52a1\u5668\u5728\u65e7\u91d1\u5c71&#xff0c;\u800c\u7528\u6237\u5728\u963f\u59c6\u65af\u7279\u4e39&#xff0c;\u8bf7\u6c42\u5fc5\u987b\u6a2a\u8de8\u5927\u897f\u6d0b\u624d\u80fd\u88ab\u5224\u5b9a\u662f\u5426\u767b\u5f55\u3002\u800c\u4e2d\u95f4\u4ef6\u90e8\u7f72\u5728\u79bb\u7528\u6237\u6700\u8fd1\u7684 CDN \u8fb9\u7f18\u8282\u70b9\u3002<\/p>\n<p>\u4e2d\u95f4\u4ef6\u8ba9\u903b\u8f91\u201c\u4e0b\u6c89\u201d\u5230\u4e86\u7f51\u7edc\u7684\u6700\u672b\u7aef\u3002\u5728\u6570\u636e\u8fd8\u6ca1\u8de8\u8fc7\u534a\u4e2a\u5730\u7403\u4e4b\u524d&#xff0c;\u903b\u8f91\u5c31\u5df2\u7ecf\u6267\u884c\u5b8c\u6bd5\u3002<\/p>\n<p>2. \u201c\u7a84\u5e26\u201d\u6267\u884c\u5fc3\u6cd5<\/p>\n<p>\u7531\u4e8e\u8fb9\u7f18\u73af\u5883\u7684\u8d44\u6e90\u9650\u5236&#xff0c;\u4e2d\u95f4\u4ef6\u4e0d\u662f\u5904\u7406\u7e41\u91cd\u4e1a\u52a1\u903b\u8f91&#xff08;\u5982\u64cd\u4f5c\u5927\u578b\u6570\u636e\u5e93&#xff09;\u7684\u5730\u65b9\u3002\u5b83\u66f4\u50cf\u662f\u4e00\u4e2a\u654f\u9510\u7684\u8fc7\u6ee4\u5668&#xff1a;\u53ea\u8bfb\u53d6 Header\u3001Cookie \u548c URL&#xff0c;\u53ea\u505a\u6700\u5feb\u3001\u6700\u6709\u4ef7\u503c\u7684\u5224\u65ad\u3002<\/p>\n<p>\u4e8c\u3001 \u4e09\u5927\u6838\u5fc3\u6218\u5f79&#xff1a;\u4e2d\u95f4\u4ef6\u7684\u5b9e\u6218\u827a\u672f<\/p>\n<p>\u4e2d\u95f4\u4ef6\u7684\u5b58\u5728&#xff0c;\u4f18\u96c5\u5730\u89e3\u51b3\u4e86\u5168\u6808\u5f00\u53d1\u4e2d\u4e09\u4e2a\u6700\u5177\u6311\u6218\u6027\u7684\u5168\u5c40\u95ee\u9898&#xff1a;<\/p>\n<p>1. \u9274\u6743\u4e0e\u5b89\u5168&#xff1a;\u5168\u6808\u7684\u201c\u5b89\u68c0\u53e3\u201d<\/p>\n<p>\u4e0d\u8981\u5728\u6bcf\u4e00\u4e2a\u00a0page.tsx\u00a0\u91cc\u91cd\u590d\u5199\u767b\u5f55\u68c0\u67e5\u4ee3\u7801\u3002<\/p>\n<ul>\n<li>\n<p>\u7edf\u4e00\u5b88\u536b&#xff1a;\u5728\u4e2d\u95f4\u4ef6\u91cc&#xff0c;\u4f60\u53ef\u4ee5\u6839\u636e\u00a0session\u00a0cookie \u5feb\u901f\u5224\u65ad\u7528\u6237\u8eab\u4efd\u3002\u672a\u767b\u5f55&#xff1f;\u76f4\u63a5\u6267\u884c\u00a0NextResponse.redirect()\u00a0\u91cd\u5b9a\u5411\u5230\u767b\u5f55\u9875\u3002<\/p>\n<\/li>\n<li>\n<p>\u67b6\u6784\u7ea2\u5229&#xff1a;\u4f60\u7684\u8def\u7531\u548c\u7ec4\u4ef6\u4ee3\u7801\u4ece\u6b64\u53ef\u4ee5\u4fdd\u6301\u7eaf\u7cb9\u7684\u4e1a\u52a1\u903b\u8f91&#xff0c;\u4e0d\u518d\u88ab\u7e41\u6742\u7684\u6743\u9650\u5224\u65ad\u6240\u6c61\u67d3\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u56fd\u9645\u5316 (i18n)&#xff1a;\u5730\u7406\u4f4d\u7f6e\u7684\u611f\u77e5\u529b<\/p>\n<p>\u5982\u4f55\u8ba9\u7528\u6237\u6253\u5f00\u57df\u540d\u7684\u4e00\u77ac\u95f4&#xff0c;\u770b\u5230\u7684\u5c31\u7b26\u5408\u5176\u8bed\u8a00\u4e60\u60ef&#xff1f;<\/p>\n<ul>\n<li>\n<p>\u52a8\u6001\u91cd\u5b9a\u5411&#xff1a;\u4e2d\u95f4\u4ef6\u53ef\u4ee5\u8bfb\u53d6\u8bf7\u6c42\u5934\u4e2d\u7684\u00a0Accept-Language\u00a0\u6216\u6839\u636e IP \u5b9a\u4f4d\u5730\u7406\u4f4d\u7f6e\u3002<\/p>\n<\/li>\n<li>\n<p>\u8def\u5f84\u6539\u5199&#xff1a;\u5b83\u80fd\u6084\u65e0\u58f0\u606f\u5730\u5c06\u00a0\/about\u00a0\u6539\u5199&#xff08;Rewrite&#xff09;\u4e3a\u00a0\/zh-CN\/about&#xff0c;\u800c\u7528\u6237\u5728\u6d4f\u89c8\u5668\u5730\u5740\u680f\u6beb\u65e0\u5bdf\u89c9\u3002\u8fd9\u79cd\u201c\u900f\u660e\u201d\u7684\u8def\u7531\u63a7\u5236&#xff0c;\u662f\u9ad8\u7aef\u56fd\u9645\u5316\u4f53\u9a8c\u7684\u57fa\u77f3\u3002<\/p>\n<\/li>\n<\/ul>\n<p>3. A\/B \u6d4b\u8bd5\u4e0e\u7070\u5ea6\u53d1\u5e03&#xff1a;\u5b9e\u9a8c\u7684\u6e29\u5e8a<\/p>\n<p>\u60f3\u8981\u6d4b\u8bd5\u65b0\u7248\u7684\u9996\u9875\u6548\u679c&#xff1f;<\/p>\n<ul>\n<li>\n<p>\u5206\u6d41\u63a7\u5236&#xff1a;\u4e2d\u95f4\u4ef6\u53ef\u4ee5\u6839\u636e\u903b\u8f91&#xff08;\u5982\u968f\u673a\u6570\u6216\u7279\u5b9a Cookie&#xff09;\u5c06 5% \u7684\u6d41\u91cf\u5bfc\u5411\u00a0\/new-landing&#xff0c;\u5176\u4f59\u5bfc\u5411\u539f\u9875\u9762\u3002\u8fd9\u79cd\u57fa\u4e8e\u8fb9\u7f18\u4fa7\u7684\u8def\u7531\u6539\u5199&#xff0c;\u907f\u514d\u4e86\u5ba2\u6237\u7aef JS \u6267\u884c\u5206\u6d41\u5bfc\u81f4\u7684\u201c\u9875\u9762\u95ea\u70c1\u201d\u95ee\u9898\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e09\u3001 \u6027\u80fd\u7684\u514b\u5236&#xff1a;matcher\u00a0\u7684\u8fc7\u6ee4\u827a\u672f<\/p>\n<p>\u4e2d\u95f4\u4ef6\u867d\u7136\u5f3a\u5927&#xff0c;\u4f46\u5b83\u662f\u201c\u6602\u8d35\u201d\u7684\u3002\u56e0\u4e3a\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u5b83\u4f1a\u62e6\u622a\u6240\u6709\u8bf7\u6c42&#xff08;\u5305\u62ec\u56fe\u7247\u3001\u5b57\u4f53\u7b49\u9759\u6001\u8d44\u6e90&#xff09;\u3002<\/p>\n<p>\u4e3a\u4e86\u4e0d\u8ba9\u6bcf\u4e00\u5f20\u5c0f\u56fe\u6807\u7684\u52a0\u8f7d\u90fd\u8981\u8dd1\u4e00\u904d\u4e2d\u95f4\u4ef6\u903b\u8f91&#xff0c;Next.js \u5f15\u5165\u4e86\u00a0matcher&#xff08;\u5339\u914d\u5668&#xff09;\u3002<\/p>\n<p>\/\/ middleware.ts<br \/>\nexport const config &#061; {<br \/>\n  matcher: [<br \/>\n    \/*<br \/>\n     * \u5339\u914d\u6240\u6709\u8bf7\u6c42\u8def\u5f84&#xff0c;\u9664\u4e86&#xff1a;<br \/>\n     * 1. \/api \u5f00\u5934\u7684\u8def\u5f84 (API \u8def\u7531)<br \/>\n     * 2. \/_next \u5f00\u5934\u7684\u8def\u5f84 (Next.js \u5185\u90e8\u6587\u4ef6)<br \/>\n     * 3. \u6240\u6709\u9759\u6001\u6587\u4ef6 (png, jpg, gif, svg, etc.)<br \/>\n     *\/<br \/>\n    &#039;\/((?!api|_next\/static|_next\/image|favicon.ico).*)&#039;,<br \/>\n  ],<br \/>\n};<\/p>\n<p>\u4e13\u5bb6\u5efa\u8bae&#xff1a;\u4f18\u79c0\u7684\u4e2d\u95f4\u4ef6\u914d\u7f6e\u5e94\u8be5\u662f\u201c\u6781\u7b80\u201d\u7684\u3002\u53ea\u8ba9\u90a3\u4e9b\u771f\u6b63\u9700\u8981\u903b\u8f91\u5e72\u9884\u7684\u8def\u5f84\u7ecf\u8fc7\u4e2d\u95f4\u4ef6&#xff0c;\u8fd9\u662f\u4fdd\u6301\u5168\u6808\u5e94\u7528\u4e1d\u6ed1\u611f\u7684\u4e0d\u4e8c\u6cd5\u95e8\u3002<\/p>\n<p>\u56db\u3001 \u54cd\u5e94\u7684\u9b54\u672f&#xff1a;Redirect vs. Rewrite<\/p>\n<p>\u5728\u4e2d\u95f4\u4ef6\u4e2d&#xff0c;\u4f60\u6709\u4e24\u79cd\u64cd\u7eb5 URL \u7684\u65b9\u5f0f&#xff0c;\u5b83\u4eec\u4ee3\u8868\u4e86\u622a\u7136\u4e0d\u540c\u7684\u4ea4\u4e92\u54f2\u5b66&#xff1a;<\/p>\n<ul>\n<li>\n<p>Redirect (\u91cd\u5b9a\u5411)&#xff1a;\u544a\u8bc9\u6d4f\u89c8\u5668\u201c\u4f60\u8981\u53bb\u7684\u5730\u65b9\u642c\u5bb6\u4e86\u201d\u3002URL \u4f1a\u53d8&#xff0c;\u7528\u6237\u4f1a\u611f\u77e5\u5230\u8df3\u8f6c\u3002\u9002\u7528\u4e8e\u9274\u6743\u5931\u8d25\u3002<\/p>\n<\/li>\n<li>\n<p>Rewrite (\u91cd\u5199)&#xff1a;\u670d\u52a1\u5668\u5185\u90e8\u7684\u201c\u77ac\u95f4\u79fb\u52a8\u201d\u3002URL \u4e0d\u53d8&#xff0c;\u4f46\u5185\u5bb9\u6362\u6210\u4e86\u53e6\u4e00\u4e2a\u8def\u7531\u7684\u7ed3\u679c\u3002\u9002\u7528\u4e8e\u56fd\u9645\u5316\u548c A\/B \u6d4b\u8bd5\u3002<\/p>\n<\/li>\n<\/ul>\n<p>Rewrite \u662f\u4f18\u96c5\u7684\u4f2a\u88c5&#xff0c;Redirect \u662f\u679c\u65ad\u7684\u6307\u5f15\u3002<\/p>\n<p>\u4e94\u3001 \u603b\u7ed3&#xff1a;\u5b88\u671b\u8fb9\u7f18\u7684\u54f2\u5b66<\/p>\n<p>\u4e2d\u95f4\u4ef6\u662f Next.js \u5168\u6808\u7248\u56fe\u4e2d\u201c\u5168\u5c40\u89c2\u201d\u7684\u7ec8\u6781\u4f53\u73b0\u3002<\/p>\n<p>\u5b83\u544a\u8bc9\u6211\u4eec&#xff1a;\u4e00\u4e2a\u4f18\u79c0\u7684\u67b6\u6784&#xff0c;\u4e0d\u4ec5\u8981\u5904\u7406\u597d\u201c\u4e2d\u5fc3\u201d\u7684\u903b\u8f91&#xff0c;\u66f4\u8981\u5904\u7406\u597d\u201c\u8fb9\u7f18\u201d\u7684\u89e6\u611f\u3002\u00a0\u5b83\u5c06\u9274\u6743\u3001\u8def\u7531\u63a7\u5236\u3001\u56fd\u9645\u5316\u8fd9\u4e9b\u6c89\u91cd\u7684\u5168\u5c40\u903b\u8f91&#xff0c;\u4ece\u6838\u5fc3\u4e1a\u52a1\u4ee3\u7801\u4e2d\u5265\u79bb\u51fa\u6765&#xff0c;\u63d0\u5347\u5230\u7f51\u7edc\u7684\u57fa\u7840\u8bbe\u65bd\u5c42\u53bb\u6267\u884c\u3002<\/p>\n<p>\u5f53\u4f60\u5b66\u4f1a\u4e86\u5728\u8fb9\u7f18\u4fa7\u4e3e\u91cd\u82e5\u8f7b\u5730\u8c03\u5ea6\u6d41\u91cf&#xff0c;\u5f53\u4f60\u80fd\u7528\u77ed\u77ed\u51e0\u5341\u884c\u4ee3\u7801\u5b88\u62a4\u4f4f\u4e07\u5343\u8def\u7531\u7684\u5b89\u5168\u65f6&#xff0c;\u4f60\u4fbf\u4e0d\u518d\u53ea\u662f\u5728\u5199\u9875\u9762&#xff0c;\u800c\u662f\u5728\u6784\u5efa\u4e00\u4e2a\u5177\u5907\u5168\u7403\u611f\u77e5\u529b\u7684\u667a\u80fd\u6570\u5b57\u7f51\u7edc\u3002<\/p>\n<p>\u4e2d\u95f4\u4ef6\u5728\u8bf7\u6c42\u62b5\u8fbe\u524d\u5b88\u62a4\u4e86\u8fb9\u754c&#xff0c;\u4f46\u5f53\u8bf7\u6c42\u8fdb\u5165\u7cfb\u7edf&#xff0c;\u9762\u5bf9\u90a3\u4e9b\u8017\u65f6\u5de8\u5927\u7684\u4efb\u52a1&#xff08;\u5982 AI \u63a8\u7406\u3001\u590d\u6742\u62a5\u8868&#xff09;\u65f6&#xff0c;\u6211\u4eec\u53c8\u8be5\u5982\u4f55\u907f\u514d\u7528\u6237\u5728\u6f2b\u957f\u7684\u7b49\u5f85\u4e2d\u6d41\u5931&#xff1f;\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u63a2\u8ba8\u7684\u201c\u5168\u6808\u964d\u7ef4\u6253\u51fb\u201d\u2014\u2014\u201c\u6d41\u5f0f\u4f20\u8f93 (Streaming)\u201d&#xff1a;\u5229\u7528 HTTP \u6d41\u63d0\u5347\u957f\u4efb\u52a1\u7684\u7528\u6237\u4f53\u9a8c\u3002\u60a8\u51c6\u5907\u597d\u8ba9\u6570\u636e\u50cf\u6c34\u6d41\u4e00\u6837&#xff0c;\u6301\u7eed\u4e0d\u65ad\u5730\u6d8c\u5411\u7528\u6237\u5417&#xff1f;<\/p>\n<h3>8.3 \u201c\u6d41\u5f0f\u4f20\u8f93\u201d (Streaming) \u2014\u2014 \u5229\u7528 HTTP \u6d41\u63d0\u5347\u957f\u4efb\u52a1\u7684\u7528\u6237\u4f53\u9a8c<\/h3>\n<p>\u5982\u679c\u8bf4\u4f20\u7edf\u7684 Web \u54cd\u5e94\u662f\u4e00\u573a\u201c\u4e00\u624b\u4ea4\u94b1&#xff0c;\u4e00\u624b\u4ea4\u8d27\u201d\u7684\u5168\u91cf\u8d38\u6613&#xff0c;\u90a3\u4e48\u00a0Streaming&#xff08;\u6d41\u5f0f\u4f20\u8f93&#xff09;\u00a0\u5c31\u662f\u4e00\u573a\u201c\u968f\u4ea7\u968f\u9500\u3001\u8fb9\u4ea7\u8fb9\u9001\u201d\u7684\u4ea4\u4e92\u76db\u5bb4\u3002<\/p>\n<p>\u5728 Web \u5f00\u53d1\u7684\u65e7\u5178\u8303\u91cc&#xff0c;\u7528\u6237\u5fc5\u987b\u7ecf\u5386\u6f2b\u957f\u7684\u201c\u7a7a\u767d\u671f\u201d&#xff1a;\u670d\u52a1\u5668\u9700\u8981\u7b49\u5f85\u6570\u636e\u5e93\u5b8c\u6210\u6210\u5343\u4e0a\u4e07\u884c\u8bb0\u5f55\u7684\u626b\u63cf&#xff0c;\u7b49\u5f85 AI \u6a21\u578b\u5b8c\u6210\u6700\u540e\u4e00\u6bb5\u5b57\u7b26\u7684\u63a8\u7406&#xff0c;\u7b49\u5f85\u7b2c\u4e09\u65b9 API \u7f13\u6162\u7684\u56de\u4f20\u3002\u53ea\u6709\u5f53\u6700\u540e\u4e00\u5757\u6570\u636e\u62fc\u56fe\u5b8c\u6210&#xff0c;\u670d\u52a1\u5668\u624d\u4f1a\u6253\u5305\u53d1\u51fa\u90a3\u4e2a\u6c89\u91cd\u7684\u54cd\u5e94\u5305\u3002\u800c\u5728 Next.js \u7684 App Router \u65f6\u4ee3&#xff0c;\u6211\u4eec\u5229\u7528\u00a0HTTP \u5757\u4f20\u8f93\u7f16\u7801&#xff08;Chunked Transfer Encoding&#xff09;&#xff0c;\u6253\u7834\u4e86\u8fd9\u79cd\u201c\u5168\u6216\u65e0\u201d\u7684\u50f5\u5c40\u3002\u5b83\u662f\u5bf9\u6297\u52a0\u8f7d\u7126\u8651\u7684\u7ec8\u6781\u5229\u5668&#xff0c;\u66f4\u662f\u73b0\u4ee3 AI \u65f6\u4ee3\u4e0d\u53ef\u6216\u7f3a\u7684\u4ea4\u4e92\u57fa\u77f3\u3002<\/p>\n<p>\u4e00\u3001 \u7834\u788e\u7684\u5e73\u5eb8&#xff1a;\u4ece\u201c\u7b49\u5f85\u5168\u9910\u201d\u5230\u201c\u7387\u5148\u5c1d\u9c9c\u201d<\/p>\n<p>\u6d41\u5f0f\u4f20\u8f93\u7684\u6838\u5fc3\u5965\u4e49\u5728\u4e8e\u201c\u9897\u7c92\u5ea6\u62c6\u89e3\u201d\u3002<\/p>\n<p>\u5728\u4f20\u7edf\u7684\u54cd\u5e94\u6a21\u578b\u4e2d&#xff0c;\u65f6\u95f4\u8f74\u662f\u7ebf\u6027\u7684\u4e14\u5b58\u5728\u5de8\u5927\u7684\u7a7a\u6d1e&#xff1a;<\/p>\n<p>\u8bf7\u6c42 &gt; \u670d\u52a1\u5668\u5904\u7406 &gt; \u53d1\u9001\u5b8c\u6574\u6570\u636e &gt; \u6d4f\u89c8\u5668\u6e32\u67d3<\/p>\n<p>\u800c\u5728\u6d41\u5f0f\u4f20\u8f93\u7684\u8bed\u5883\u4e0b&#xff0c;\u65f6\u95f4\u8f74\u88ab\u5207\u5206\u6210\u4e86\u8fde\u7eed\u7684\u5fae\u5c0f\u7247\u6bb5&#xff1a;<\/p>\n<p>\u8bf7\u6c42 &gt; \u53d1\u9001\u5934\u90e8\u4e0e\u9996\u5c4f\u6570\u636e &gt; \u53d1\u9001\u4e2d\u95f4\u7ed3\u679c &gt; \u53d1\u9001\u6700\u7ec8\u5c3e\u90e8 &gt; \u7ed3\u675f<\/p>\n<ul>\n<li>\n<p>TTFB \u7684\u6d88\u4ea1&#xff1a;\u9996\u5b57\u8282\u5230\u8fbe\u65f6\u95f4&#xff08;TTFB&#xff09;\u88ab\u538b\u7f29\u5230\u4e86\u6781\u9650\u3002\u7528\u6237\u5728\u53d1\u51fa\u8bf7\u6c42\u7684\u77ac\u95f4&#xff0c;\u6d4f\u89c8\u5668\u5c31\u80fd\u63a5\u6536\u5230\u7b2c\u4e00\u4e2a\u6570\u636e\u5757&#xff0c;\u5f00\u59cb\u89e3\u6790\u5e76\u5c55\u793a\u9875\u9762\u7684\u6846\u67b6\u6216\u8fdb\u5ea6\u6761\u3002<\/p>\n<\/li>\n<li>\n<p>\u611f\u77e5\u7684\u98de\u8dc3&#xff1a;\u867d\u7136\u603b\u7684\u6570\u636e\u83b7\u53d6\u65f6\u95f4\u53ef\u80fd\u6ca1\u6709\u7f29\u77ed&#xff0c;\u4f46\u7528\u6237\u611f\u77e5\u7684\u54cd\u5e94\u901f\u5ea6\u5374\u63d0\u5347\u4e86\u51e0\u4e2a\u6570\u91cf\u7ea7\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e8c\u3001 \u67b6\u6784\u7684\u9b54\u6cd5&#xff1a;RSC Streaming \u4e0e API Streaming<\/p>\n<p>\u5728 Next.js \u4e2d&#xff0c;\u6d41\u5f0f\u4f20\u8f93\u5728\u4e24\u4e2a\u7ef4\u5ea6\u4e0a\u5e76\u884c\u6f14\u8fdb&#xff1a;<\/p>\n<p>1. \u7ec4\u4ef6\u7ea7\u7684\u201c\u5206\u6ce2\u5230\u8d27\u201d (RSC Streaming)<\/p>\n<p>\u5229\u7528 React \u7684\u00a0Suspense&#xff0c;Next.js \u5141\u8bb8\u4f60\u5c06\u9875\u9762\u62c6\u5206\u4e3a\u591a\u4e2a\u72ec\u7acb\u7684\u533a\u5757\u3002<\/p>\n<ul>\n<li>\n<p>\u9759\u6001\u5148\u884c&#xff1a;\u9875\u9762\u7684\u5e03\u5c40\u3001\u5bfc\u822a\u680f\u7b49\u4e0d\u9700\u8981\u5f02\u6b65\u6570\u636e\u7684\u90e8\u5206\u4f1a\u7acb\u5373\u6d41\u5411\u6d4f\u89c8\u5668\u3002<\/p>\n<\/li>\n<li>\n<p>\u5f02\u6b65\u8865\u5168&#xff1a;\u8017\u65f6\u7684\u5217\u8868\u3001\u590d\u6742\u7684\u7edf\u8ba1\u56fe\u8868\u88ab\u5305\u88f9\u5728\u00a0Suspense\u00a0\u4e2d&#xff0c;\u5f53\u5b83\u4eec\u5728\u670d\u52a1\u7aef\u51c6\u5907\u5c31\u7eea\u65f6&#xff0c;\u4f1a\u50cf\u4e00\u4e2a\u4e2a\u8865\u4e01\u4e00\u6837&#xff0c;\u987a\u7740\u5df2\u7ecf\u5efa\u7acb\u7684 HTTP \u6d41\u201c\u6d41\u201d\u5165\u9875\u9762&#xff0c;\u5e76\u7cbe\u51c6\u5730\u66ff\u6362\u6389 Loading \u5360\u4f4d\u7b26\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. API \u7ea7\u7684\u201c\u6253\u5b57\u673a\u6548\u5e94\u201d (Route Handler Streaming)<\/p>\n<p>\u5728\u5904\u7406 AI \u804a\u5929&#xff08;\u5982 OpenAI \u7684 SSE \u54cd\u5e94&#xff09;\u6216\u751f\u6210\u8d85\u5927\u578b\u6587\u4ef6\u65f6&#xff0c;Route Handlers \u53ef\u4ee5\u76f4\u63a5\u8fd4\u56de\u4e00\u4e2a\u00a0ReadableStream\u3002<\/p>\n<p>\/\/ app\/api\/chat\/route.ts<br \/>\nexport async function POST(req: Request) {<br \/>\n  const stream &#061; await OpenAIStream(req); \/\/ \u5047\u8bbe\u8fd9\u662f\u4e00\u4e2a\u8fd4\u56de ReadableStream \u7684\u51fd\u6570<\/p>\n<p>  \/\/ \u5229\u7528\u539f\u751f Response \u5bf9\u8c61\u76f4\u63a5\u900f\u4f20\u6d41<br \/>\n  return new Response(stream, {<br \/>\n    headers: { &#039;Content-Type&#039;: &#039;text\/event-stream&#039; },<br \/>\n  });<br \/>\n}<\/p>\n<p>\u8fd9\u79cd\u6a21\u5f0f\u8ba9\u7528\u6237\u80fd\u591f\u5b9e\u65f6\u770b\u5230\u6587\u5b57\u4e00\u4e2a\u4e2a\u8df3\u51fa&#xff0c;\u800c\u4e0d\u662f\u5728\u957f\u8fbe 10 \u79d2\u7684\u6c89\u9ed8\u540e\u7a81\u7136\u770b\u5230\u4e00\u5927\u6bb5\u8bdd\u3002\u8fd9\u79cd\u201c\u751f\u547d\u611f\u201d\u662f\u73b0\u4ee3\u5e94\u7528\u533a\u5206\u5e73\u5eb8\u4e0e\u5353\u8d8a\u7684\u5206\u6c34\u5cad\u3002<\/p>\n<p>\u4e09\u3001 \u6027\u80fd\u7684\u514b\u5236&#xff1a;\u6d41\u5f0f\u4f20\u8f93\u7684\u7269\u7406\u8fb9\u754c<\/p>\n<p>\u4f5c\u4e3a\u5168\u6808\u4e13\u5bb6&#xff0c;\u6211\u4eec\u9700\u8981\u610f\u8bc6\u5230&#xff0c;\u6d41\u5f0f\u4f20\u8f93\u5e76\u975e\u6beb\u65e0\u4ee3\u4ef7\u7684\u201c\u514d\u8d39\u5348\u9910\u201d\u3002<\/p>\n<li>\n<p>\u8fde\u63a5\u7684\u538b\u529b&#xff1a;\u6d41\u5f0f\u4f20\u8f93\u8981\u6c42 HTTP \u8fde\u63a5\u4fdd\u6301\u5f00\u542f\u72b6\u6001\u7684\u65f6\u95f4\u66f4\u957f\u3002\u5728\u9ad8\u5e76\u53d1\u573a\u666f\u4e0b&#xff0c;\u4f60\u9700\u8981\u786e\u4fdd\u670d\u52a1\u5668&#xff08;\u6216\u8fb9\u7f18\u8282\u70b9&#xff09;\u6709\u8db3\u591f\u7684\u5e76\u53d1\u8fde\u63a5\u6570\u5904\u7406\u80fd\u529b\u3002<\/p>\n<\/li>\n<li>\n<p>SEO \u7684\u8003\u91cf&#xff1a;\u867d\u7136 Google \u7b49\u73b0\u4ee3\u722c\u866b\u5df2\u7ecf\u80fd\u5f88\u597d\u5730\u5904\u7406\u6d41\u5f0f\u5185\u5bb9&#xff0c;\u4f46\u8fc7\u957f\u7684\u6d41\u5f0f\u52a0\u8f7d\u53ef\u80fd\u4f1a\u5bfc\u81f4\u722c\u866b\u5728\u6570\u636e\u8fd8\u6ca1\u6d41\u5b8c\u65f6\u5c31\u7ed3\u675f\u6293\u53d6\u3002<\/p>\n<\/li>\n<li>\n<p>\u6c34\u5408&#xff08;Hydration&#xff09;\u7684\u987a\u5e8f&#xff1a;\u5728\u6d4f\u89c8\u5668\u7aef&#xff0c;React \u9700\u8981\u6309\u7167\u6d41\u5230\u8fbe\u7684\u987a\u5e8f\u8fdb\u884c\u6c34\u5408\u3002\u8fd9\u610f\u5473\u7740\u5982\u679c\u524d\u9762\u7684\u6d41\u5361\u4f4f\u4e86&#xff0c;\u540e\u9762\u7684\u6d41\u5373\u4f7f\u5230\u4e86\u4e5f\u53ef\u80fd\u65e0\u6cd5\u7acb\u5373\u53d8\u5f97\u53ef\u4ea4\u4e92\u3002<\/p>\n<\/li>\n<p>\u56db\u3001 \u4e13\u5bb6\u7ea7\u5b9e\u8df5&#xff1a;\u5982\u4f55\u8bbe\u8ba1\u4e00\u4e2a\u201c\u6709\u547c\u5438\u611f\u201d\u7684\u6d41&#xff1f;<\/p>\n<li>\n<p>\u7cbe\u51c6\u7684 Loading \u7c92\u5ea6&#xff1a;<\/p>\n<p>\u4e0d\u8981\u5168\u9875\u5171\u7528\u4e00\u4e2a Loading\u3002\u4e3a\u4e0d\u540c\u7684\u4e1a\u52a1\u533a\u5757\u8bbe\u8ba1\u7cbe\u7ec6\u7684 Skeleton&#xff08;\u9aa8\u67b6\u5c4f&#xff09;&#xff0c;\u8ba9\u9875\u9762\u7684\u5404\u4e2a\u90e8\u5206\u50cf\u4ea4\u54cd\u4e50\u4e00\u6837&#xff0c;\u6309\u90e8\u5c31\u73ed\u5730\u6f14\u594f\u51fa\u6765\u3002<\/p>\n<\/li>\n<li>\n<p>\u5904\u7406\u6d41\u7684\u9519\u8bef\u4e2d\u65ad&#xff1a;<\/p>\n<p>\u6d41\u5f0f\u4f20\u8f93\u4e2d&#xff0c;\u5982\u679c\u6570\u636e\u6d41\u5230\u4e00\u534a\u670d\u52a1\u5668\u51fa\u9519\u4e86\u600e\u4e48\u529e&#xff1f;Next.js \u5141\u8bb8\u4f60\u5728\u6d41\u4e2d\u6ce8\u5165\u9519\u8bef\u4fe1\u606f\u3002\u4f60\u9700\u8981\u8bbe\u8ba1\u4f18\u96c5\u7684\u5ba2\u6237\u7aef\u964d\u7ea7\u903b\u8f91&#xff0c;\u786e\u4fdd\u5373\u4fbf\u67d0\u4e2a\u5c40\u90e8\u7ec4\u4ef6\u201c\u6d41\u201d\u5931\u8d25\u4e86&#xff0c;\u6574\u4e2a\u5e94\u7528\u4e5f\u4e0d\u4f1a\u5d29\u6e83\u3002<\/p>\n<\/li>\n<li>\n<p>\u8fb9\u7f18\u4fa7\u6d41\u538b\u7f29&#xff1a;<\/p>\n<p>\u7ed3\u5408\u524d\u9762\u7ae0\u8282\u63d0\u5230\u7684\u4e2d\u95f4\u4ef6\u4e0e\u8fb9\u7f18\u73af\u5883\u3002\u5728\u8fb9\u7f18\u8282\u70b9\u5f00\u542f\u6d41&#xff0c;\u53ef\u4ee5\u5229\u7528\u8fb9\u7f18\u8282\u70b9\u5f3a\u5927\u7684\u5206\u53d1\u80fd\u529b&#xff0c;\u51cf\u5c11\u4e3b\u670d\u52a1\u5668\u7684\u7ef4\u6301\u538b\u529b\u3002<\/p>\n<\/li>\n<p>\u4e94\u3001 \u603b\u7ed3&#xff1a;\u6d41\u52a8\u7684\u6570\u5b57\u827a\u672f<\/p>\n<p>\u6d41\u5f0f\u4f20\u8f93\u662f Next.js \u5168\u6808\u6865\u6881\u4e2d\u6700\u5177\u751f\u547d\u529b\u7684\u4e00\u73af\u3002<\/p>\n<p>\u5b83\u544a\u8bc9\u6211\u4eec&#xff1a;\u65f6\u95f4\u4e0d\u662f\u654c\u4eba&#xff0c;\u7b49\u5f85\u4e5f\u53ef\u4ee5\u662f\u4ea4\u4e92\u7684\u4e00\u90e8\u5206\u3002\u00a0\u901a\u8fc7\u5c06\u539a\u91cd\u7684\u6570\u636e\u5316\u6574\u4e3a\u96f6&#xff0c;\u6211\u4eec\u4e0d\u4ec5\u6d88\u9664\u4e86\u767d\u5c4f\u7684\u6050\u60e7&#xff0c;\u66f4\u5728\u670d\u52a1\u5668\u4e0e\u6d4f\u89c8\u5668\u4e4b\u95f4\u5efa\u7acb\u4e86\u4e00\u6761\u5145\u6ee1\u5f8b\u52a8\u7684\u201c\u8f93\u9001\u5e26\u201d\u3002<\/p>\n<p>\u5f53\u6570\u636e\u4e0d\u518d\u662f\u9759\u6b62\u7684\u5305&#xff0c;\u800c\u662f\u6d41\u52a8\u7684\u6ce2&#xff1b;\u5f53\u4f60\u7684\u7528\u6237\u4e0d\u518d\u9762\u5bf9\u51b0\u51b7\u7684\u8f6c\u5708\u5708&#xff0c;\u800c\u662f\u76ee\u7779\u5185\u5bb9\u5982\u6f6e\u6c34\u822c\u6d8c\u73b0\u3002\u4f60\u4fbf\u8d85\u8d8a\u4e86\u4f20\u7edf\u7684\u8bf7\u6c42\/\u54cd\u5e94\u8303\u5f0f&#xff0c;\u8fdb\u5165\u4e86\u201c\u5b9e\u65f6\u6e32\u67d3\u3001\u5373\u65f6\u4ea4\u4e92\u201d\u7684\u6700\u9ad8\u5883\u754c\u3002<\/p>\n<h3>8.4 \u201c\u5b89\u5168\u4e0e\u7b56\u7565\u201d \u2014\u2014 CORS\u3001Rate Limiting \u4e0e Webhook \u7684\u6df1\u5ea6\u5b9e\u8df5<\/h3>\n<p>\u5982\u679c\u8bf4 API \u8def\u7531\u662f\u901a\u5f80\u6570\u636e\u6838\u5fc3\u7684\u6865\u6881&#xff0c;\u4e2d\u95f4\u4ef6\u662f\u8fb9\u5883\u7684\u5b88\u536b&#xff0c;\u6d41\u5f0f\u4f20\u8f93\u662f\u5954\u6d41\u7684\u8840\u6db2&#xff0c;\u90a3\u4e48\u00a08.4 \u8282\u6240\u8ba8\u8bba\u7684\u5b89\u5168\u4e0e\u7b56\u7565&#xff0c;\u5c31\u662f\u6574\u5ea7\u5168\u6808\u5927\u53a6\u7684\u201c\u514d\u75ab\u7cfb\u7edf\u201d\u3002<\/p>\n<p>\u5728\u4e00\u4e2a\u4e92\u8054\u4e92\u901a\u7684 Web \u751f\u6001\u4e2d&#xff0c;\u4f60\u7684 API \u7edd\u975e\u5b64\u5c9b\u3002\u5b83\u5fc5\u987b\u9762\u5bf9\u8de8\u57df\u8bbf\u95ee\u7684\u7ea0\u845b\u3001\u6076\u610f\u722c\u866b\u7684\u4fb5\u6270\u3001\u4ee5\u53ca\u7b2c\u4e09\u65b9\u56de\u8c03&#xff08;Webhook&#xff09;\u7684\u4e25\u82db\u6821\u9a8c\u3002\u5982\u679c\u8bf4\u524d\u4e09\u8282\u662f\u5728\u6559\u4f60\u5982\u4f55\u201c\u5efa\u8bbe\u201d&#xff0c;\u90a3\u4e48\u8fd9\u4e00\u8282\u5219\u662f\u5728\u6559\u4f60\u5982\u4f55\u201c\u5b88\u62a4\u201d\u3002\u5728 Next.js \u7684\u5de5\u7a0b\u5b9e\u8df5\u4e2d&#xff0c;\u5b89\u5168\u4e0d\u5e94\u662f\u4e8b\u540e\u7684\u8865\u4e01&#xff0c;\u800c\u5e94\u662f\u4ee3\u7801\u57fa\u56e0\u91cc\u81ea\u5e26\u7684\u9632\u5fa1\u903b\u8f91\u3002<\/p>\n<p>\u4e00\u3001 \u8de8\u57df\u7684\u793c\u4eea&#xff1a;CORS \u7684\u7cbe\u7ec6\u5316\u63a7\u5236<\/p>\n<p>\u5728\u5168\u6808\u5f00\u53d1\u7684\u535a\u5f08\u4e2d&#xff0c;CORS (Cross-Origin Resource Sharing)\u00a0\u662f\u6bcf\u4e00\u4f4d\u5f00\u53d1\u8005\u90fd\u5fc5\u987b\u9762\u5bf9\u7684\u201c\u7b2c\u4e00\u9053\u574e\u201d\u3002\u5f53\u4f60\u5e0c\u671b\u4f60\u7684 Route Handlers \u80fd\u88ab\u53e6\u4e00\u4e2a\u57df\u540d\u7684\u524d\u7aef&#xff08;\u6216\u8005\u662f\u79fb\u52a8\u7aef Webview&#xff09;\u5b89\u5168\u8c03\u7528\u65f6&#xff0c;\u4f60\u9700\u8981\u4e00\u5957\u4f18\u96c5\u7684\u63e1\u624b\u534f\u8bae\u3002<\/p>\n<p>1. \u58f0\u660e\u5f0f\u7684\u5b89\u5168\u8fb9\u754c<\/p>\n<p>\u5728 Next.js \u7684 Route Handlers \u4e2d&#xff0c;CORS \u4e0d\u518d\u9700\u8981\u4f9d\u8d56\u590d\u6742\u7684\u4e2d\u95f4\u4ef6\u5e93&#xff0c;\u4f60\u53ef\u4ee5\u76f4\u63a5\u901a\u8fc7\u54cd\u5e94\u5934\u8fdb\u884c\u7cbe\u5bc6\u7684\u63a7\u5236\u3002<\/p>\n<ul>\n<li>\n<p>\u6309\u9700\u6388\u6743&#xff1a;\u4e0d\u8981\u76f2\u76ee\u4f7f\u7528\u00a0Access-Control-Allow-Origin: *\u3002\u771f\u6b63\u7684\u4e13\u5bb6\u4f1a\u6839\u636e\u8bf7\u6c42\u6765\u6e90&#xff08;Origin&#xff09;\u8fdb\u884c\u52a8\u6001\u5339\u914d&#xff0c;\u53ea\u5141\u8bb8\u53d7\u4fe1\u4efb\u7684\u57df\u540d\u8fdb\u5165\u3002<\/p>\n<\/li>\n<li>\n<p>\u9884\u68c0\u8bf7\u6c42 (Options)&#xff1a;\u7406\u89e3\u6d4f\u89c8\u5668\u5728\u53d1\u8d77 POST \u6216 PUT \u4e4b\u524d\u7684\u201c\u8bd5\u63a2\u201d&#xff0c;\u5e76\u7ed9\u4e88\u5f97\u4f53\u7684\u56de\u5e94\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\/\/ app\/api\/protected-data\/route.ts<br \/>\nexport async function OPTIONS() {<br \/>\n  return new Response(null, {<br \/>\n    status: 204,<br \/>\n    headers: {<br \/>\n      &#039;Access-Control-Allow-Origin&#039;: &#039;https:\/\/trusted-app.com&#039;,<br \/>\n      &#039;Access-Control-Allow-Methods&#039;: &#039;GET, POST, OPTIONS&#039;,<br \/>\n      &#039;Access-Control-Allow-Headers&#039;: &#039;Content-Type, Authorization&#039;,<br \/>\n    },<br \/>\n  });<br \/>\n}<\/p>\n<p>\u4e8c\u3001 \u6d41\u91cf\u7684\u8282\u5236&#xff1a;\u901f\u7387\u9650\u5236 (Rate Limiting) \u7684\u827a\u672f<\/p>\n<p>\u5728\u5f00\u653e\u7684\u7f51\u7edc\u4e2d&#xff0c;\u8d44\u6e90\u603b\u662f\u6709\u9650\u7684\u3002\u4e00\u4e2a\u65e0\u8282\u5236\u7684 API \u4f1a\u6210\u4e3a\u62d2\u7edd\u670d\u52a1\u653b\u51fb&#xff08;DoS&#xff09;\u7684\u6e29\u5e8a&#xff0c;\u6216\u8005\u88ab\u6602\u8d35\u7684\u6570\u636e\u5e93\u67e5\u8be2\u8017\u5c3d\u6210\u672c\u3002Rate Limiting\u00a0\u662f\u4fdd\u62a4\u540e\u7aef\u4e0d\u88ab\u201c\u51fb\u7a7f\u201d\u7684\u5173\u952e\u3002<\/p>\n<p>1. \u8fb9\u7f18\u4fa7\u7684\u95f8\u95e8<\/p>\n<p>\u5229\u7528\u524d\u9762\u7ae0\u8282\u63d0\u5230\u7684\u00a0Middleware\u00a0\u4e0e\u00a0Redis (\u5982 Upstash)&#xff0c;\u6211\u4eec\u53ef\u4ee5\u5728\u8bf7\u6c42\u89e6\u8fbe\u670d\u52a1\u5668\u4e4b\u524d&#xff0c;\u5c31\u5728\u8fb9\u7f18\u4fa7\u62e6\u622a\u6389\u8fc7\u5feb\u7684\u9891\u7387\u3002<\/p>\n<ul>\n<li>\n<p>\u4ee4\u724c\u6876\u7b97\u6cd5 (Token Bucket)&#xff1a;\u4e3a\u6bcf\u4e2a IP \u5206\u914d\u4e00\u4e2a\u6d41\u91cf\u989d\u5ea6\u3002\u8fd9\u79cd\u7b97\u6cd5\u65e2\u5141\u8bb8\u4e86\u6b63\u5e38\u7684\u77ed\u65f6\u7206\u53d1\u8bf7\u6c42&#xff0c;\u53c8\u9632\u6b62\u4e86\u6301\u7eed\u7684\u9ad8\u9891\u8f70\u70b8\u3002<\/p>\n<\/li>\n<li>\n<p>\u7528\u6237\u4f53\u9a8c\u7684\u5e73\u8861&#xff1a;\u5f53\u89e6\u53d1\u9650\u5236\u65f6&#xff0c;\u8fd4\u56de\u00a0429 Too Many Requests\u3002\u8fd9\u4e0d\u4ec5\u662f\u544a\u8bc9\u722c\u866b\u201c\u8bf7\u6162\u4e00\u70b9\u201d&#xff0c;\u66f4\u662f\u5411\u5408\u89c4\u5f00\u53d1\u8005\u4f20\u9012\u660e\u786e\u7684\u6cbb\u7406\u8fb9\u754c\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e09\u3001 \u4fe1\u4efb\u7684\u5951\u7ea6&#xff1a;Webhook \u7684\u7b7e\u540d\u6821\u9a8c<\/p>\n<p>\u5728\u5168\u6808\u95ed\u73af\u4e2d&#xff0c;\u6211\u4eec\u7ecf\u5e38\u9700\u8981\u63a5\u6536\u6765\u81ea Stripe\u3001GitHub \u6216\u5fae\u4fe1\u7684\u00a0Webhook\u00a0\u56de\u8c03\u3002\u8fd9\u662f\u5f02\u6b65\u4efb\u52a1&#xff08;\u5982\u652f\u4ed8\u6210\u529f\u540e\u66f4\u65b0\u8ba2\u5355\u72b6\u6001&#xff09;\u7684\u5173\u952e\u3002\u7136\u800c&#xff0c;Webhook \u662f\u516c\u5f00\u7684 URL&#xff0c;\u4efb\u4f55\u4eba\u90fd\u53ef\u4ee5\u5411\u5176\u53d1\u9001\u4f2a\u9020\u7684\u6570\u636e\u3002<\/p>\n<p>1. \u539f\u59cb\u62a5\u6587\u7684\u7eaf\u7cb9\u6027<\/p>\n<p>\u6821\u9a8c Webhook \u7b7e\u540d\u7684\u6838\u5fc3\u5728\u4e8e\u539f\u59cb\u5b57\u8282\u6d41&#xff08;Raw Body&#xff09;\u3002<\/p>\n<p>\u5728 Next.js \u4e2d&#xff0c;\u4f60\u9700\u8981\u8df3\u8fc7\u5e38\u89c4\u7684 JSON \u89e3\u6790&#xff0c;\u76f4\u63a5\u8bfb\u53d6\u8bf7\u6c42\u7684 Buffer&#xff1a;<\/p>\n<p>export async function POST(req: Request) {<br \/>\n  const payload &#061; await req.text(); \/\/ \u83b7\u53d6\u539f\u59cb\u5b57\u7b26\u4e32<br \/>\n  const signature &#061; req.headers.get(&#039;stripe-signature&#039;);<\/p>\n<p>  \/\/ \u5229\u7528\u5b98\u65b9 SDK \u7ed3\u5408\u79c1\u94a5\u9a8c\u8bc1\u7b7e\u540d<br \/>\n  const event &#061; stripe.webhooks.constructEvent(payload, signature, secret);<\/p>\n<p>  \/\/ \u53ea\u6709\u9a8c\u8bc1\u901a\u8fc7&#xff0c;\u624d\u6267\u884c\u540e\u7eed\u4e1a\u52a1\u903b\u8f91<br \/>\n}<\/p>\n<p>2. \u5b89\u5168\u7684\u5f02\u6b65\u5316<\/p>\n<p>\u63a5\u6536 Webhook \u7684 API \u5fc5\u987b\u6781\u5feb\u3002\u63a8\u8350\u7684\u6a21\u5f0f\u662f&#xff1a;\u9a8c\u8bc1\u7b7e\u540d &gt; \u5c06\u4efb\u52a1\u4e22\u5165\u6d88\u606f\u961f\u5217 &gt;\u00a0\u7acb\u5373\u8fd4\u56de 200\u3002\u4e0d\u8981\u5728 Webhook \u5904\u7406\u51fd\u6570\u4e2d\u6267\u884c\u8017\u65f6\u957f\u8fbe\u6570\u79d2\u7684\u903b\u8f91&#xff0c;\u5426\u5219\u4f1a\u5bfc\u81f4\u7b2c\u4e09\u65b9\u5e73\u53f0\u56e0\u8d85\u65f6\u800c\u53cd\u590d\u91cd\u8bd5&#xff0c;\u9020\u6210\u6570\u636e\u7684\u91cd\u590d\u6d88\u8d39\u3002<\/p>\n<p>\u56db\u3001 \u67b6\u6784\u7684\u5fc3\u6cd5&#xff1a;\u6700\u5c0f\u7279\u6743\u539f\u5219<\/p>\n<p>\u4f5c\u4e3a\u9876\u7ea7\u7684\u5168\u6808\u5de5\u7a0b\u5e08&#xff0c;\u5728\u8bbe\u8ba1 API \u8def\u7531\u5b89\u5168\u7b56\u7565\u65f6&#xff0c;\u5e94\u5f53\u79c9\u6301\u4ee5\u4e0b\u5fc3\u6cd5&#xff1a;<\/p>\n<li>\n<p>\u8f93\u5165\u9a8c\u8bc1\u7684\u201c\u5f3a\u7c7b\u578b\u5316\u201d&#xff1a;<\/p>\n<p>\u5229\u7528 Zod \u7b49\u5de5\u5177\u5bf9 API \u7684\u5165\u53c2\u8fdb\u884c\u5f3a\u6821\u9a8c\u3002\u5982\u679c\u9884\u671f\u7684 ID \u662f\u6570\u5b57&#xff0c;\u7edd\u4e0d\u5141\u8bb8\u4efb\u4f55\u5b57\u7b26\u4e32\u6df7\u5165\u3002\u8fc7\u6ee4\u8f93\u5165\u662f\u9632\u8303\u6ce8\u5165\u653b\u51fb\u7684\u6700\u6709\u6548\u624b\u6bb5\u3002<\/p>\n<\/li>\n<li>\n<p>\u73af\u5883\u53d8\u91cf\u7684\u9636\u7ea7\u6027&#xff1a;<\/p>\n<p>\u6c38\u8fdc\u4e0d\u8981\u5c06\u79c1\u94a5&#xff08;SECRET_KEY&#xff09;\u786c\u7f16\u7801\u5728\u4ee3\u7801\u4e2d\u3002\u5229\u7528 .env.local \u5e76\u5728\u751f\u4ea7\u73af\u5883\u914d\u7f6e\u4e2d\u52a0\u5bc6\u5b58\u50a8\u3002\u5728 Next.js \u4e2d&#xff0c;\u53ea\u6709\u4ee5 NEXT_PUBLIC_ \u5f00\u5934\u7684\u53d8\u91cf\u624d\u4f1a\u66b4\u9732\u7ed9\u524d\u7aef&#xff0c;\u5176\u4ed6\u7684\u6c38\u8fdc\u7559\u5728\u670d\u52a1\u5668&#xff0c;\u8fd9\u662f\u5929\u7136\u7684\u201c\u7269\u7406\u9694\u79bb\u201d\u3002<\/p>\n<\/li>\n<li>\n<p>\u65e0\u72b6\u6001\u7684\u9274\u6743&#xff1a;<\/p>\n<p>\u4f18\u5148\u4f7f\u7528 JWT \u6216\u52a0\u5bc6\u7684 Cookie \u8fdb\u884c\u9274\u6743\u3002\u8fd9\u8ba9\u4f60\u7684 API \u80fd\u591f\u968f\u7740 Serverless \u67b6\u6784\u65e0\u7f1d\u6a2a\u5411\u6269\u5c55&#xff0c;\u800c\u4e0d\u9700\u8981\u5728\u670d\u52a1\u5668\u95f4\u540c\u6b65\u590d\u6742\u7684 Session \u72b6\u6001\u3002<\/p>\n<\/li>\n<p>\u4e94\u3001 \u603b\u7ed3&#xff1a;\u4ece\u201c\u80fd\u7528\u201d\u5230\u201c\u575a\u56fa\u201d<\/p>\n<p>\u5168\u6808\u5f00\u53d1\u7684\u6865\u6881\u4e0d\u5e94\u53ea\u8ffd\u6c42\u5bbd\u9614\u4e0e\u534e\u4e3d&#xff0c;\u66f4\u5e94\u8ffd\u6c42\u98ce\u96e8\u4e0d\u52a8\u7684\u7a33\u5065\u3002\u4e00\u4e2a\u7f3a\u4e4f\u5b89\u5168\u7b56\u7565\u7684 API \u662f\u67b6\u6784\u5e08\u7684\u5931\u804c\u3002\u901a\u8fc7\u5bf9 CORS \u7684\u7cbe\u7ec6\u63a7\u5236\u3001\u5bf9\u901f\u7387\u7684\u7406\u6027\u7ea6\u675f\u3001\u4ee5\u53ca\u5bf9\u4fe1\u4efb\u534f\u8bae\u7684\u4e25\u82db\u6267\u884c&#xff0c;\u6211\u4eec\u5c06 Next.js \u7684 Route Handlers \u8f6c\u5316\u4e3a\u4e86\u771f\u6b63\u5177\u5907\u5de5\u4e1a\u5f3a\u5ea6\u7684\u5168\u6808\u57fa\u77f3\u3002<\/p>\n<p>\u81f3\u6b64&#xff0c;\u7b2c\u516b\u7ae0\u201c\u5168\u6808\u7684\u6865\u6881\u201d\u5df2\u5706\u6ee1\u843d\u5e55\u3002\u6211\u4eec\u5df2\u7ecf\u6253\u901a\u4e86\u4ece UI \u5230\u540e\u53f0\u903b\u8f91\u3001\u4ece\u8fb9\u7f18\u5230\u6838\u5fc3\u3001\u4ece\u6027\u80fd\u5230\u5b89\u5168\u7684\u6240\u6709\u5173\u8282\u3002\u6211\u4eec\u7684\u5e94\u7528\u73b0\u5728\u5df2\u7ecf\u662f\u4e00\u4e2a\u80fd\u591f\u5728\u5168\u7403\u8303\u56f4\u5185\u6d41\u7545\u3001\u5b89\u5168\u8fd0\u884c\u7684\u5065\u58ee\u5b9e\u4f53\u3002<\/p>\n<p>\u4f46\u8fd9\u8fd8\u4e0d\u662f\u7ec8\u70b9\u3002\u4e00\u4e2a\u771f\u6b63\u7684\u5168\u6808\u5e94\u7528&#xff0c;\u5fc5\u987b\u7ecf\u5386\u751f\u4ea7\u73af\u5883\u7684\u6d17\u793c\u3002\u63a5\u4e0b\u6765&#xff0c;\u6211\u4eec\u5c06\u5f00\u542f\u7b2c\u4e5d\u7ae0\u2014\u2014\u8eab\u4efd\u4e0e\u5b88\u62a4\u2014\u2014\u8eab\u4efd\u9a8c\u8bc1\u4e0e\u5b89\u5168&#xff0c;\u51c6\u5907\u597d\u4e86\u561b&#xff1f;<\/p>\n<h2>\u7b2c9\u7ae0&#xff1a;\u8eab\u4efd\u4e0e\u5b88\u62a4\u2014\u2014\u8eab\u4efd\u9a8c\u8bc1\u4e0e\u5b89\u5168<\/h2>\n<ul>\n<li>\n<p>9.1 \u8ba4\u8bc1\u9635\u5730&#xff1a;\u00a0NextAuth.js (Auth.js) \u7684\u5168\u6d41\u7a0b\u914d\u7f6e<\/p>\n<\/li>\n<li>\n<p>9.2 \u6743\u9650\u63a7\u5236&#xff1a;\u00a0\u57fa\u4e8e\u89d2\u8272 (RBAC) \u7684\u670d\u52a1\u7aef\u4e0e\u5ba2\u6237\u7aef\u6821\u9a8c<\/p>\n<\/li>\n<li>\n<p>9.3 \u5b89\u5168\u9632\u7ebf&#xff1a;\u00a0CSRF \u9632\u62a4\u3001\u73af\u5883\u53d8\u91cf\u7ba1\u7406\u4e0e\u6570\u636e\u8131\u654f<\/p>\n<\/li>\n<\/ul>\n<h3>9.1 \u201c\u8ba4\u8bc1\u9635\u5730\u201d \u2014\u2014 NextAuth.js (Auth.js) \u7684\u5168\u6d41\u7a0b\u914d\u7f6e<\/h3>\n<p>\u5982\u679c\u8bf4 Web \u5f00\u53d1\u662f\u4e00\u573a\u5728\u6570\u5b57\u8352\u91ce\u4e0a\u7684\u7b51\u57ce\u8fd0\u52a8&#xff0c;\u90a3\u4e48\u8eab\u4efd\u8ba4\u8bc1&#xff08;Authentication&#xff09;\u5c31\u662f\u8fd9\u5ea7\u57ce\u5821\u552f\u4e00\u7684\u57ce\u95e8\u3002\u5728\u5168\u6808\u5e94\u7528\u7684\u7248\u56fe\u4e2d&#xff0c;\u8ba4\u77e5\u7684\u903b\u8f91\u8fdc\u6bd4\u7b80\u5355\u7684\u201c\u767b\u5f55\u201d\u8981\u6df1\u9083&#xff1a;\u5b83\u6d89\u53ca\u72b6\u6001\u7684\u6301\u4e45\u5316\u3001\u8de8\u57df\u7684\u4fe1\u4efb\u5efa\u7acb\u3001\u4ee4\u724c&#xff08;Token&#xff09;\u7684\u52a0\u89e3\u5bc6&#xff0c;\u4ee5\u53ca\u5728 Serverless \u73af\u5883\u4e0b\u5982\u4f55\u4f18\u96c5\u5730\u4fdd\u6301\u7528\u6237\u7684\u4f1a\u8bdd&#xff08;Session&#xff09;\u3002<\/p>\n<p>NextAuth.js&#xff08;\u73b0\u5df2\u6f14\u8fdb\u4e3a Auth.js&#xff09;&#xff0c;\u4f5c\u4e3a Next.js \u751f\u6001\u4e2d\u8fd1\u4e4e\u4e8b\u5b9e\u6807\u51c6\u7684\u8eab\u4efd\u65b9\u6848&#xff0c;\u5176\u4ef7\u503c\u4e0d\u4ec5\u5728\u4e8e\u63d0\u4f9b\u4e86\u4e00\u4e2a\u767b\u5f55\u6846&#xff0c;\u66f4\u5728\u4e8e\u5b83\u4e3a\u5f00\u53d1\u8005\u62bd\u8c61\u51fa\u4e86\u4e00\u5957\u201c\u4e0e\u6846\u67b6\u5171\u751f\u201d\u7684\u5b89\u5168\u54f2\u5b66\u3002\u5b83\u5c06\u590d\u6742\u7684 OAuth \u63e1\u624b\u3001\u6570\u636e\u5e93\u9002\u914d\u548c\u52a0\u5bc6 Session \u5c01\u88c5\u5728\u7b80\u5355\u7684 API \u4e4b\u4e0b\u3002\u672c\u8282\u6211\u4eec\u5c06\u6df1\u5165\u8fd9\u4e00\u9635\u5730&#xff0c;\u5256\u6790\u5982\u4f55\u6784\u5efa\u4e00\u5957\u575a\u4e0d\u53ef\u6467\u7684\u8eab\u4efd\u5821\u5792\u3002<\/p>\n<p>\u4e00\u3001 \u67b6\u6784\u7684\u57fa\u77f3&#xff1a;\u4e3a\u4ec0\u4e48\u662f Auth.js&#xff1f;<\/p>\n<p>\u5728 App Router \u67b6\u6784\u4e2d&#xff0c;\u8ba4\u8bc1\u9762\u4e34\u7740\u524d\u6240\u672a\u6709\u7684\u6311\u6218&#xff1a;\u6211\u4eec\u9700\u8981\u5728\u670d\u52a1\u7aef\u7ec4\u4ef6&#xff08;RSC&#xff09;\u4e2d\u611f\u77e5\u7528\u6237&#xff0c;\u5728\u4e2d\u95f4\u4ef6&#xff08;Middleware&#xff09;\u4e2d\u62e6\u622a\u8bf7\u6c42&#xff0c;\u540c\u65f6\u8fd8\u8981\u5728\u5ba2\u6237\u7aef\u7ec4\u4ef6\u4e2d\u4fdd\u6301\u54cd\u5e94\u5f0f\u3002<\/p>\n<p>Auth.js \u7684\u8bbe\u8ba1\u54f2\u5b66\u5b8c\u7f8e\u5951\u5408\u4e86\u8fd9\u79cd\u5206\u5c42\u9700\u6c42&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u8f7b\u91cf\u7ea7\u7684\u8fb9\u7f18\u652f\u6301&#xff1a;\u5b83\u80fd\u5728 Edge Runtime \u8fd0\u884c&#xff0c;\u8fd9\u610f\u5473\u7740\u9274\u6743\u903b\u8f91\u53ef\u4ee5\u5728\u79bb\u7528\u6237\u6700\u8fd1\u7684\u5730\u65b9\u6267\u884c\u3002<\/p>\n<\/li>\n<li>\n<p>\u4e07\u7269\u7686\u53ef Provider&#xff1a;\u65e0\u8bba\u662f\u7ecf\u5178\u7684\u8d26\u53f7\u5bc6\u7801\u3001\u793e\u4ea4\u5de8\u5934&#xff08;Google, GitHub&#xff09;&#xff0c;\u8fd8\u662f\u4f01\u4e1a\u7ea7\u7684 SAML \u534f\u8bae&#xff0c;\u5b83\u90fd\u63d0\u4f9b\u4e86\u5f00\u7bb1\u5373\u7528\u7684\u652f\u6301\u3002<\/p>\n<\/li>\n<li>\n<p>\u6570\u636e\u5e93\u65e0\u5173\u6027&#xff1a;\u901a\u8fc7 Adapter&#xff08;\u9002\u914d\u5668&#xff09;&#xff0c;\u4f60\u53ef\u4ee5\u81ea\u7531\u9009\u62e9 Prisma\u3001Drizzle \u6216\u662f Redis \u6765\u5b58\u50a8\u4f60\u7684 Session \u548c User \u6570\u636e\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e8c\u3001 \u9635\u5730\u6784\u7b51&#xff1a;\u6838\u5fc3\u914d\u7f6e\u7684\u5168\u6d41\u7a0b\u6f14\u8fdb<\/p>\n<p>\u6784\u5efa\u8ba4\u8bc1\u9635\u5730&#xff0c;\u672c\u8d28\u4e0a\u662f\u5728\u5b9a\u4e49\u4e00\u5957\u201c\u4fe1\u4efb\u89c4\u5219\u201d\u3002\u5728 Next.js \u4e2d&#xff0c;\u8fd9\u901a\u5e38\u51dd\u7ed3\u5728\u00a0auth.ts&#xff08;\u6216\u00a0api\/auth\/[&#8230;nextauth]\/route.ts&#xff09;\u8fd9\u4e2a\u6838\u5fc3\u6587\u4ef6\u4e2d\u3002<\/p>\n<p>1. \u7b56\u7565\u7684\u9009\u62e9&#xff1a;JWT vs. Database Session<\/p>\n<p>\u8fd9\u662f\u5168\u6808\u4e13\u5bb6\u5fc5\u987b\u505a\u51fa\u7684\u7b2c\u4e00\u4e2a\u6218\u7565\u6289\u62e9&#xff1a;<\/p>\n<ul>\n<li>\n<p>JWT (JSON Web Token)&#xff1a;\u65e0\u72b6\u6001&#xff0c;\u6027\u80fd\u6781\u9ad8&#xff0c;\u9002\u5408 Serverless \u67b6\u6784&#xff0c;\u56e0\u4e3a\u4e0d\u9700\u8981\u6bcf\u6b21\u90fd\u67e5\u8be2\u6570\u636e\u5e93\u3002<\/p>\n<\/li>\n<li>\n<p>Database Session&#xff1a;\u6709\u72b6\u6001&#xff0c;\u652f\u6301\u670d\u52a1\u7aef\u5f3a\u5236\u4e0b\u7ebf&#xff08;Revoke&#xff09;&#xff0c;\u5b89\u5168\u6027\u66f4\u53ef\u63a7&#xff0c;\u4f46\u4f1a\u5e26\u6765\u6570\u636e\u5e93\u7684\u8bfb\u5199\u5f00\u9500\u3002<\/p>\n<\/li>\n<\/ul>\n<p>Auth.js \u9ed8\u8ba4\u91c7\u7528\u52a0\u5bc6\u7684 JWT \u7b56\u7565&#xff0c;\u8fd9\u4e0d\u4ec5\u662f\u5bf9\u6027\u80fd\u7684\u59a5\u534f&#xff0c;\u66f4\u662f\u5bf9\u5927\u89c4\u6a21\u5206\u5e03\u5f0f\u7cfb\u7edf\u7684\u8fdc\u89c1\u3002<\/p>\n<p>2. \u914d\u7f6e\u7684\u827a\u672f<\/p>\n<p>\u4e00\u4e2a\u4f18\u96c5\u7684\u914d\u7f6e\u4e0d\u4ec5\u4ec5\u662f\u586b\u5165 ClientID\u3002\u5b83\u6d89\u53ca\u56de\u8c03&#xff08;Callbacks&#xff09;\u7684\u7cbe\u5bc6\u7f16\u6392\u3002<\/p>\n<p>\/\/ auth.ts<br \/>\nexport const { handlers, auth, signIn, signOut } &#061; NextAuth({<br \/>\n  providers: [GitHub, Google],<br \/>\n  callbacks: {<br \/>\n    \/\/ \u51b3\u5b9a JWT \u5982\u4f55\u88ab\u7b7e\u53d1&#xff1a;\u5728\u8fd9\u91cc\u53ef\u4ee5\u5c06\u7528\u6237 ID \u6ce8\u5165 Token<br \/>\n    async jwt({ token, user }) {<br \/>\n      if (user) token.id &#061; user.id;<br \/>\n      return token;<br \/>\n    },<br \/>\n    \/\/ \u51b3\u5b9a Session \u5982\u4f55\u66b4\u9732\u7ed9\u524d\u7aef&#xff1a;\u5728\u8fd9\u91cc\u6311\u9009\u975e\u654f\u611f\u5b57\u6bb5<br \/>\n    async session({ session, token }) {<br \/>\n      if (session.user) session.user.id &#061; token.id as string;<br \/>\n      return session;<br \/>\n    },<br \/>\n  },<br \/>\n});<\/p>\n<p>\u4e09\u3001 \u653b\u5b88\u517c\u5907&#xff1a;\u591a\u7aef\u7684 Session \u611f\u77e5<\/p>\n<p>\u8ba4\u8bc1\u7684\u76ee\u7684\u5728\u4e8e\u4f7f\u7528\u3002Auth.js \u5728 App Router \u4e0b\u63d0\u4f9b\u4e86\u4e09\u7ef4\u5ea6\u7684\u611f\u77e5\u80fd\u529b&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u670d\u52a1\u7aef\u7ec4\u4ef6&#xff08;RSC&#xff09;\u7684\u9759\u9ed8\u611f\u77e5&#xff1a;\u901a\u8fc7\u8c03\u7528\u00a0auth()\u00a0\u51fd\u6570&#xff0c;\u4f60\u53ef\u4ee5\u5728\u670d\u52a1\u7aef\u76f4\u63a5\u83b7\u53d6\u5f53\u524d\u7528\u6237&#xff0c;\u65e0\u9700\u4efb\u4f55\u7f51\u7edc\u8bf7\u6c42&#xff0c;\u4e14\u675c\u7edd\u4e86\u5ba2\u6237\u7aef\u4f2a\u9020\u3002<\/p>\n<\/li>\n<li>\n<p>\u4e2d\u95f4\u4ef6&#xff08;Middleware&#xff09;\u7684\u5168\u5c40\u5c01\u9501&#xff1a;\u5728\u8bf7\u6c42\u62b5\u8fbe\u4e4b\u524d&#xff0c;\u4e2d\u95f4\u4ef6\u6839\u636e Session \u72b6\u6001\u51b3\u5b9a\u662f\u5426\u91cd\u5b9a\u5411\u3002\u8fd9\u662f\u8ba4\u8bc1\u9635\u5730\u7684\u201c\u7b2c\u4e00\u9053\u5916\u58d5\u201d\u3002<\/p>\n<\/li>\n<li>\n<p>\u5ba2\u6237\u7aef\u7ec4\u4ef6\u7684\u54cd\u5e94\u5f0f\u4ea4\u4e92&#xff1a;\u5229\u7528\u00a0SessionProvider\u00a0\u548c\u00a0useSession\u00a0\u94a9\u5b50&#xff0c;\u8ba9 UI \u5b9e\u65f6\u54cd\u5e94\u7528\u6237\u7684\u767b\u5165\u4e0e\u767b\u51fa\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u56db\u3001 \u4e13\u5bb6\u7ea7\u8fdb\u9636&#xff1a;OAuth \u4e4b\u5916\u7684\u81ea\u5b9a\u4e49\u9635\u5730<\/p>\n<p>\u771f\u6b63\u7684\u201c\u8ba4\u8bc1\u9635\u5730\u201d\u5f80\u5f80\u9762\u4e34\u590d\u6742\u7684\u4e1a\u52a1\u5b9a\u5236\u3002<\/p>\n<p>1. \u51ed\u636e\u6a21\u5f0f (Credentials Provider)<\/p>\n<p>\u867d\u7136 OAuth \u662f\u9996\u9009&#xff0c;\u4f46\u5f88\u591a\u573a\u666f\u9700\u8981\u8d26\u53f7\u5bc6\u7801\u767b\u5f55\u3002Auth.js \u5141\u8bb8\u4f60\u81ea\u5b9a\u4e49\u9a8c\u8bc1\u903b\u8f91&#xff0c;\u5728\u8fd9\u91cc&#xff0c;\u4f60\u53ef\u4ee5\u8c03\u7528\u81ea\u5df1\u7684 Legacy API \u6216\u662f\u4f7f\u7528 Argon2 \u8fd9\u79cd\u9ad8\u5f3a\u5ea6\u7684\u7b97\u6cd5\u8fdb\u884c\u54c8\u5e0c\u6bd4\u5bf9\u3002<\/p>\n<p>2. \u4e8b\u4ef6\u7cfb\u7edf (Events)<\/p>\n<p>\u5f53\u7528\u6237\u6210\u529f\u767b\u5f55\u3001\u6ce8\u518c\u6216\u662f Session \u9500\u6bc1\u65f6&#xff0c;\u5229\u7528 Auth.js \u7684\u00a0events\u00a0\u7cfb\u7edf\u53ef\u4ee5\u89e6\u53d1\u65c1\u8def\u903b\u8f91\u3002<\/p>\n<ul>\n<li>\n<p>\u573a\u666f&#xff1a;\u7528\u6237\u9996\u6b21\u767b\u5f55\u65f6&#xff0c;\u5728\u6570\u636e\u5e93\u4e2d\u81ea\u52a8\u521b\u5efa\u4e00\u4efd\u9ed8\u8ba4\u7684\u4e2a\u4eba\u504f\u597d\u8bbe\u7f6e&#xff1b;\u6216\u662f\u8bb0\u5f55\u4e00\u6b21\u767b\u5f55\u65e5\u5fd7\u4ee5\u8fdb\u884c\u5b89\u5168\u5ba1\u8ba1\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e94\u3001 \u7ed3\u8bed&#xff1a;\u4fe1\u4efb\u7684\u95ed\u73af<\/p>\n<p>\u8eab\u4efd\u8ba4\u8bc1\u4e0d\u662f\u4e00\u6bb5\u5b64\u7acb\u7684\u4ee3\u7801&#xff0c;\u5b83\u662f\u5f00\u53d1\u8005\u4e0e\u7528\u6237\u4e4b\u95f4\u5efa\u7acb\u7684\u7b2c\u4e00\u4efd\u5951\u7ea6\u3002<\/p>\n<p>NextAuth.js (Auth.js) \u7684\u914d\u7f6e\u8fc7\u7a0b&#xff0c;\u672c\u8d28\u4e0a\u662f\u5c06\u590d\u6742\u7684\u5de5\u4e1a\u7ea7\u5b89\u5168\u6807\u51c6\u8f6c\u6362\u4e3a\u4e00\u79cd\u53ef\u9884\u6d4b\u3001\u53ef\u7ef4\u62a4\u7684\u5f00\u53d1\u6a21\u5f0f\u3002\u5b83\u8ba9\u6211\u4eec\u4ece\u7e41\u7410\u7684 Cookie \u7ba1\u7406\u548c Token \u5237\u65b0\u903b\u8f91\u4e2d\u89e3\u653e\u51fa\u6765&#xff0c;\u5c06\u7cbe\u529b\u96c6\u4e2d\u5728\u4e1a\u52a1\u672c\u8eab\u7684\u903b\u8f91\u4e4b\u4e0a\u3002<\/p>\n<p>\u201c\u8ba4\u8bc1\u201d\u662f\u786e\u8ba4\u201c\u4f60\u662f\u8c01\u201d\u7684\u8fc7\u7a0b\u3002\u00a0\u5f53\u8fd9\u9053\u57ce\u95e8\u53d8\u5f97\u575a\u56fa\u800c\u4e1d\u6ed1&#xff0c;\u7528\u6237\u624d\u80fd\u653e\u5fc3\u5730\u5c06\u4ed6\u4eec\u6700\u5b9d\u8d35\u7684\u6570\u636e\u6258\u4ed8\u7ed9\u4f60\u7684\u5e94\u7528\u3002\u5728\u8fd9\u573a\u5173\u4e8e\u8eab\u4efd\u4e0e\u5b88\u62a4\u7684\u4fee\u884c\u4e2d&#xff0c;Auth.js \u662f\u6211\u4eec\u624b\u4e2d\u6700\u950b\u5229\u7684\u76fe&#xff0c;\u4e5f\u662f\u6700\u539a\u5b9e\u7684\u5899\u3002<\/p>\n<p>\u8eab\u4efd\u5df2\u7ecf\u786e\u8ba4&#xff0c;\u57ce\u95e8\u5df2\u7ecf\u5f00\u542f\u3002\u4f46\u5e76\u4e0d\u662f\u6bcf\u4e2a\u8fdb\u5165\u57ce\u95e8\u7684\u4eba\u90fd\u62e5\u6709\u8fdb\u5165\u85cf\u5b9d\u5ba4\u7684\u6743\u5229\u3002\u5982\u4f55\u6839\u636e\u4e0d\u540c\u7684\u8eab\u4efd&#xff08;\u7ba1\u7406\u5458\u3001\u7f16\u8f91\u3001\u666e\u901a\u7528\u6237&#xff09;\u5212\u5206\u7cbe\u7ec6\u7684\u6d3b\u52a8\u8303\u56f4&#xff1f;\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u63a2\u8ba8\u7684\u201c\u6743\u529b\u7684\u6e38\u620f\u201d\u2014\u2014\u6743\u9650\u63a7\u5236&#xff1a;\u57fa\u4e8e\u89d2\u8272 (RBAC) \u7684\u670d\u52a1\u7aef\u4e0e\u5ba2\u6237\u7aef\u6821\u9a8c\u3002\u60a8\u51c6\u5907\u597d\u4e3a\u4f60\u7684\u4ee3\u7801\u88c5\u4e0a\u7cbe\u5bc6\u7684\u201c\u7b49\u7ea7\u5236\u5ea6\u201d\u4e86\u5417&#xff1f;<\/p>\n<h3>9.2 \u201c\u6743\u529b\u7684\u6e38\u620f\u201d \u2014\u2014 \u57fa\u4e8e\u89d2\u8272 (RBAC) \u7684\u670d\u52a1\u7aef\u4e0e\u5ba2\u6237\u7aef\u6821\u9a8c<\/h3>\n<p>\u5982\u679c\u8bf4\u8eab\u4efd\u8ba4\u8bc1&#xff08;Authentication&#xff09;\u662f\u786e\u8ba4\u201c\u4f60\u662f\u8c01\u201d\u7684\u51c6\u5165\u8bc1&#xff0c;\u90a3\u4e48\u6743\u9650\u63a7\u5236&#xff08;Authorization&#xff09;\u5c31\u662f\u754c\u5b9a\u201c\u4f60\u80fd\u505a\u4ec0\u4e48\u201d\u7684\u519b\u5f8b\u3002\u5728\u590d\u6742\u7684\u5168\u6808\u5e94\u7528\u4e2d&#xff0c;\u4ec5\u4ec5\u8ba9\u7528\u6237\u767b\u5165\u662f\u4e0d\u591f\u7684&#xff0c;\u4f60\u5fc5\u987b\u6784\u5efa\u4e00\u5957\u7cbe\u5bc6\u7684\u7b49\u7ea7\u5236\u5ea6&#xff0c;\u786e\u4fdd\u7ba1\u7406\u5458\u80fd\u6267\u638c\u4e7e\u5764&#xff0c;\u7f16\u8f91\u80fd\u6325\u6beb\u6cfc\u58a8&#xff0c;\u800c\u666e\u901a\u7528\u6237\u5219\u5728\u88ab\u5141\u8bb8\u7684\u7586\u57df\u5185\u884c\u8d70\u3002<\/p>\n<p>\u8fd9\u79cd\u6a21\u5f0f\u88ab\u79f0\u4e3a\u00a0RBAC (Role-Based Access Control&#xff0c;\u57fa\u4e8e\u89d2\u8272\u7684\u8bbf\u95ee\u63a7\u5236)\u3002\u5728 Next.js \u7684 App Router \u67b6\u6784\u4e0b&#xff0c;\u6743\u9650\u63a7\u5236\u4e0d\u518d\u662f\u96f6\u6563\u7684\u00a0if\u00a0\u8bed\u53e5&#xff0c;\u800c\u662f\u4e00\u5957\u8d2f\u7a7f\u4e8e\u4e2d\u95f4\u4ef6\u3001\u670d\u52a1\u7aef\u7ec4\u4ef6\u3001API \u8def\u7531\u4ee5\u53ca\u5ba2\u6237\u7aef UI \u7684\u5168\u94fe\u8def\u9632\u5fa1\u4f53\u7cfb\u3002<\/p>\n<p>\u4e00\u3001 \u89d2\u8272\u5efa\u6a21&#xff1a;\u8eab\u4efd\u7684\u201c\u7b2c\u4e8c\u5c42\u76ae\u80a4\u201d<\/p>\n<p>RBAC \u7684\u6838\u5fc3\u5728\u4e8e\u5c06\u201c\u6743\u9650\u201d\u4e0e\u201c\u7528\u6237\u201d\u89e3\u8026\u3002\u6211\u4eec\u4e0d\u76f4\u63a5\u7ed9\u5f20\u4e09\u6743\u9650&#xff0c;\u800c\u662f\u7ed9\u201c\u7ba1\u7406\u5458\u201d\u89d2\u8272\u6743\u9650&#xff0c;\u518d\u5c06\u5f20\u4e09\u5b9a\u4e49\u4e3a\u201c\u7ba1\u7406\u5458\u201d\u3002<\/p>\n<p>\u5728 Auth.js (NextAuth.js) \u7684\u8bed\u5883\u4e0b&#xff0c;\u89d2\u8272\u7684\u6ce8\u5165\u901a\u5e38\u53d1\u751f\u5728\u00a0JWT \u56de\u8c03\u4e0e\u00a0Session \u56de\u8c03\u4e2d\u3002<\/p>\n<ul>\n<li>\n<p>\u6570\u636e\u6e90\u5934&#xff1a;\u89d2\u8272\u4fe1\u606f\u5b58\u50a8\u5728\u6570\u636e\u5e93\u7684\u7528\u6237\u8868\u4e2d\u3002<\/p>\n<\/li>\n<li>\n<p>\u4ee4\u724c\u643a\u5e26&#xff1a;\u5f53\u7528\u6237\u767b\u5f55\u65f6&#xff0c;\u6211\u4eec\u5c06\u00a0role\u00a0\u5b57\u6bb5\u4ece\u6570\u636e\u5e93\u63d0\u53d6\u5e76\u7f16\u7801\u8fdb\u52a0\u5bc6\u7684 JWT\u3002<\/p>\n<\/li>\n<li>\n<p>\u4f1a\u8bdd\u66b4\u9732&#xff1a;\u901a\u8fc7 Session \u56de\u8c03&#xff0c;\u5c06\u89d2\u8272\u4fe1\u606f\u66b4\u9732\u7ed9\u670d\u52a1\u7aef\u4e0e\u5ba2\u6237\u7aef&#xff0c;\u4f7f\u5176\u6210\u4e3a\u6bcf\u4e00\u4e2a\u8bf7\u6c42\u643a\u5e26\u7684\u201c\u6743\u6756\u201d\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e8c\u3001 \u7b2c\u4e00\u9053\u9632\u7ebf&#xff1a;\u4e2d\u95f4\u4ef6\u7684\u201c\u884c\u653f\u5272\u636e\u201d<\/p>\n<p>\u5728 Next.js \u4e2d&#xff0c;\u6700\u4f18\u96c5\u7684\u6743\u9650\u63a7\u5236\u59cb\u4e8e\u00a0Middleware (\u4e2d\u95f4\u4ef6)\u3002\u5b83\u50cf\u662f\u4e00\u4e2a\u8fb9\u5883\u54e8\u6240&#xff0c;\u5728\u8bf7\u6c42\u5c1a\u672a\u89e6\u78b0\u6602\u8d35\u7684\u670d\u52a1\u5668\u8d44\u6e90\u524d&#xff0c;\u5c31\u6839\u636e\u8def\u5f84\u524d\u7f00\u8fdb\u884c\u9884\u5224\u3002<\/p>\n<p>\/\/ middleware.ts<br \/>\nimport { withAuth } from &#034;next-auth\/middleware&#034;;<\/p>\n<p>export default withAuth({<br \/>\n  callbacks: {<br \/>\n    authorized: ({ token, req }) &#061;&gt; {<br \/>\n      \/\/ \u5982\u679c\u8bbf\u95ee \/admin \u5f00\u5934\u7684\u8def\u5f84&#xff0c;\u5fc5\u987b\u5177\u5907 admin \u89d2\u8272<br \/>\n      if (req.nextUrl.pathname.startsWith(&#034;\/admin&#034;)) {<br \/>\n        return token?.role &#061;&#061;&#061; &#034;admin&#034;;<br \/>\n      }<br \/>\n      \/\/ \u5176\u4ed6\u53d7\u4fdd\u62a4\u8def\u5f84&#xff0c;\u53ea\u8981\u767b\u5f55\u5373\u53ef<br \/>\n      return !!token;<br \/>\n    },<br \/>\n  },<br \/>\n});<\/p>\n<p>\u4e2d\u95f4\u4ef6\u5b9e\u73b0\u4e86\u201c\u8def\u5f84\u7ea7\u7684\u7269\u7406\u9694\u79bb\u201d\u3002\u5b83\u4ee5\u6781\u4f4e\u7684\u6210\u672c&#xff0c;\u786e\u4fdd\u4e86\u975e\u7ba1\u7406\u4eba\u5458\u751a\u81f3\u65e0\u6cd5\u770b\u5230\u540e\u53f0\u7ba1\u7406\u7cfb\u7edf\u7684\u52a0\u8f7d\u52a8\u753b\u3002<\/p>\n<p>\u4e09\u3001 \u670d\u52a1\u7aef\u5b88\u536b&#xff1a;RSC \u4e0e API \u7684\u201c\u6df1\u5ea6\u67e5\u9a8c\u201d<\/p>\n<p>\u4e2d\u95f4\u4ef6\u867d\u7136\u9ad8\u6548&#xff0c;\u4f46\u5b83\u53ea\u80fd\u57fa\u4e8e URL \u8fdb\u884c\u7c97\u7c92\u5ea6\u63a7\u5236\u3002\u5bf9\u4e8e\u66f4\u7ec6\u7c92\u5ea6\u7684\u64cd\u4f5c&#xff08;\u5982&#xff1a;\u53ea\u6709\u6587\u7ae0\u4f5c\u8005\u624d\u80fd\u5220\u9664\u6587\u7ae0&#xff09;&#xff0c;\u6211\u4eec\u9700\u8981\u5728\u00a0\u670d\u52a1\u7aef\u7ec4\u4ef6 (RSC)\u00a0\u548c\u00a0Route Handlers\u00a0\u4e2d\u8fdb\u884c\u6df1\u5ea6\u6821\u9a8c\u3002<\/p>\n<p>1. \u7ec4\u4ef6\u7ea7\u7684\u201c\u964d\u7ea7\u6e32\u67d3\u201d<\/p>\n<p>\u5728\u670d\u52a1\u7aef\u7ec4\u4ef6\u4e2d&#xff0c;\u7531\u4e8e\u6211\u4eec\u53ef\u4ee5\u76f4\u63a5\u8c03\u7528\u00a0auth()&#xff0c;\u6743\u9650\u6821\u9a8c\u53d8\u5f97\u6781\u5176\u81ea\u7136&#xff1a;<\/p>\n<p>export default async function AdminPanel() {<br \/>\n  const session &#061; await auth();<\/p>\n<p>  if (session?.user.role !&#061;&#061; &#039;admin&#039;) {<br \/>\n    return &lt;AccessDenied \/&gt;; \/\/ \u4f18\u96c5\u7684\u964d\u7ea7\u5904\u7406<br \/>\n  }<\/p>\n<p>  return &lt;section&gt;\u6838\u5fc3\u673a\u5bc6\u6570\u636e&#8230;&lt;\/section&gt;;<br \/>\n}<\/p>\n<p>2. \u6570\u636e\u4fee\u6539\u7684\u201c\u751f\u6b7b\u9501\u201d<\/p>\n<p>\u5728\u5904\u7406\u00a0Server Actions\u00a0\u6216\u00a0API \u8def\u7531\u65f6&#xff0c;\u6743\u9650\u6821\u9a8c\u662f\u7edd\u5bf9\u7684\u5b89\u5168\u7ea2\u7ebf\u3002\u6c38\u8fdc\u4e0d\u8981\u4fe1\u4efb\u6765\u81ea\u5ba2\u6237\u7aef\u7684\u4efb\u4f55\u89d2\u8272\u58f0\u660e&#xff0c;\u5fc5\u987b\u5728\u670d\u52a1\u7aef\u91cd\u65b0\u4ece Session \u4e2d\u8bfb\u53d6\u89d2\u8272\u3002<\/p>\n<p>\u5728\u6267\u884c\u4efb\u4f55\u00a0db.delete()\u00a0\u64cd\u4f5c\u524d&#xff0c;\u5fc5\u987b\u8fdb\u884c\u201c\u8eab\u4efd &#043; \u89d2\u8272 &#043; \u5f52\u5c5e\u6743\u201d\u7684\u4e09\u91cd\u5224\u5b9a\u3002\u8fd9\u662f\u9632\u6b62\u201c\u8d8a\u6743\u6f0f\u6d1e\u201d\u7684\u552f\u4e00\u6cd5\u95e8\u3002<\/p>\n<p>\u56db\u3001 \u5ba2\u6237\u7aef\u4f53\u9a8c&#xff1a;\u57fa\u4e8e\u89d2\u8272\u7684\u201c\u89c6\u89c9\u88c1\u526a\u201d<\/p>\n<p>\u5ba2\u6237\u7aef\u7684\u6743\u9650\u63a7\u5236\u672c\u8d28\u4e0a\u662f\u7528\u6237\u4f53\u9a8c&#xff08;UX&#xff09;\u7684\u8303\u7574&#xff0c;\u800c\u975e\u5b89\u5168\u6027\u8303\u7574\u3002\u5b83\u7684\u76ee\u7684\u662f\u9690\u85cf\u90a3\u4e9b\u7528\u6237\u65e0\u6cd5\u4f7f\u7528\u7684\u6309\u94ae&#xff0c;\u907f\u514d\u4ea7\u751f\u70b9\u51fb\u540e\u7684\u632b\u8d25\u611f\u3002<\/p>\n<ul>\n<li>\n<p>UI \u88c1\u526a&#xff1a;\u5229\u7528\u00a0useSession\u00a0\u94a9\u5b50&#xff0c;\u6211\u4eec\u53ef\u4ee5\u6839\u636e\u7528\u6237\u7684\u89d2\u8272&#xff0c;\u52a8\u6001\u663e\u793a\u6216\u9690\u85cf\u529f\u80fd\u6a21\u5757\u3002<\/p>\n<\/li>\n<li>\n<p>\u4ea4\u4e92\u5f15\u5bfc&#xff1a;\u5bf9\u4e8e\u672a\u6388\u6743\u7684\u64cd\u4f5c&#xff0c;\u4e0d\u5e94\u53ea\u662f\u7b80\u5355\u6d88\u5931&#xff0c;\u6709\u65f6\u53ef\u4ee5\u663e\u793a\u4e3a\u201c\u7070\u8272\u7981\u7528\u201d\u5e76\u9644\u5e26\u201c\u5347\u7ea7\u4f1a\u5458\u201d\u7684\u5f15\u5bfc&#xff0c;\u5c06\u9650\u5236\u8f6c\u5316\u4e3a\u8f6c\u5316\u7684\u673a\u4f1a\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e94\u3001 \u67b6\u6784\u7684\u8fdb\u9636&#xff1a;\u4ece RBAC \u8fc8\u5411 ABAC<\/p>\n<p>\u5f53\u5e94\u7528\u590d\u6742\u5ea6\u8fdb\u4e00\u6b65\u6500\u5347&#xff0c;\u7b80\u5355\u7684\u89d2\u8272&#xff08;Admin, User&#xff09;\u53ef\u80fd\u96be\u4ee5\u5e94\u5bf9\u3002\u4f8b\u5982&#xff1a;\u201c\u53ea\u6709\u5728\u5468\u4e00\u5230\u5468\u4e94\u3001\u4e14 IP \u5730\u5740\u5728\u56fd\u5185\u7684\u90e8\u95e8\u7ecf\u7406&#xff0c;\u624d\u80fd\u67e5\u770b\u8d22\u52a1\u62a5\u8868\u3002\u201d<\/p>\n<p>\u8fd9\u65f6&#xff0c;\u6211\u4eec\u9700\u8981\u5c06\u00a0RBAC\u00a0\u5347\u7ea7\u4e3a\u00a0ABAC (Attribute-Based Access Control&#xff0c;\u57fa\u4e8e\u5c5e\u6027\u7684\u8bbf\u95ee\u63a7\u5236)\u3002<\/p>\n<ul>\n<li>\n<p>\u52a8\u6001\u51b3\u7b56&#xff1a;\u5728\u6821\u9a8c\u51fd\u6570\u4e2d&#xff0c;\u4e0d\u4ec5\u4f20\u5165\u7528\u6237\u7684\u00a0role&#xff0c;\u8fd8\u4f20\u5165\u00a0request\u00a0\u7684\u73af\u5883\u5c5e\u6027\u3001\u76ee\u6807\u8d44\u6e90\u7684\u00a0ownerId\u00a0\u7b49\u3002<\/p>\n<\/li>\n<li>\n<p>\u7b56\u7565\u5f15\u64ce&#xff1a;\u5728\u5927\u578b\u5de5\u7a0b\u4e2d&#xff0c;\u5efa\u8bae\u5c01\u88c5\u4e00\u5957\u7edf\u4e00\u7684\u00a0can(user, action, resource)\u00a0\u51fd\u6570\u3002\u8fd9\u79cd\u58f0\u660e\u5f0f\u7684\u6743\u9650\u5224\u5b9a&#xff0c;\u80fd\u6781\u5927\u5730\u63d0\u5347\u4ee3\u7801\u7684\u53ef\u7ef4\u62a4\u6027\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u516d\u3001 \u603b\u7ed3&#xff1a;\u6743\u529b\u7684\u514b\u5236\u4e0e\u4f18\u96c5<\/p>\n<p>\u6743\u9650\u63a7\u5236\u662f\u4e00\u573a\u5173\u4e8e\u201c\u514b\u5236\u201d\u7684\u4fee\u884c\u3002<\/p>\n<p>\u5b83\u8981\u6c42\u5f00\u53d1\u8005\u5728\u6784\u5efa\u529f\u80fd\u65f6&#xff0c;\u59cb\u7ec8\u6000\u6709\u4e00\u9897\u201c\u4e0d\u4fe1\u4efb\u201d\u7684\u5fc3\u3002\u5728 Next.js \u7684\u5168\u6808\u95ed\u73af\u4e2d&#xff0c;\u6211\u4eec\u8981\u505a\u5230&#xff1a;<\/p>\n<li>\n<p>\u4e2d\u95f4\u4ef6\u622a\u6d41&#xff1a;\u5904\u7406\u8def\u5f84\u7ea7\u7684\u51c6\u5165\u3002<\/p>\n<\/li>\n<li>\n<p>\u670d\u52a1\u7aef\u9a8c\u6743&#xff1a;\u5b88\u62a4\u6570\u636e\u64cd\u4f5c\u7684\u7ec8\u6781\u5e95\u7ebf\u3002<\/p>\n<\/li>\n<li>\n<p>\u5ba2\u6237\u7aef\u88c1\u526a&#xff1a;\u63d0\u4f9b\u4e1d\u6ed1\u4e14\u7b26\u5408\u8eab\u4efd\u7684\u89c6\u89c9\u53cd\u9988\u3002<\/p>\n<\/li>\n<p>\u201c\u6743\u529b\u201d\u5e94\u5f53\u88ab\u5173\u5728\u4ee3\u7801\u7684\u7b3c\u5b50\u91cc\u3002\u00a0\u5f53\u4f60\u7684\u5e94\u7528\u80fd\u591f\u6839\u636e\u7528\u6237\u7684\u8eab\u4efd&#xff0c;\u4e1d\u4e1d\u5165\u6263\u5730\u5c55\u73b0\u51fa\u5b8c\u5168\u4e0d\u540c\u7684\u5f62\u6001&#xff0c;\u65e2\u80fd\u6d77\u7eb3\u767e\u5ddd&#xff0c;\u53c8\u80fd\u6ef4\u6c34\u4e0d\u6f0f&#xff0c;\u4f60\u4fbf\u771f\u6b63\u638c\u63e1\u4e86 RBAC \u7684\u7cbe\u9ad3\u2014\u2014\u5728\u6570\u5b57\u4e16\u754c\u4e2d&#xff0c;\u6784\u5efa\u8d77\u4e00\u5957\u65e2\u6709\u79e9\u5e8f\u3001\u53c8\u4e0d\u5931\u6e29\u60c5\u7684\u5168\u6808\u793c\u6cd5\u3002<\/p>\n<p>\u6743\u9650\u7684\u67b7\u9501\u5df2\u7ecf\u94f8\u5c31&#xff0c;\u6743\u529b\u7684\u8fb9\u754c\u5df2\u7ecf\u6e05\u6670\u3002\u7136\u800c&#xff0c;\u5728\u4e00\u4e2a\u5f00\u653e\u7684\u4e92\u8054\u7f51\u4e2d&#xff0c;\u653b\u51fb\u8005\u4e0d\u4ec5\u4f1a\u5c1d\u8bd5\u8d8a\u6743&#xff0c;\u8fd8\u4f1a\u901a\u8fc7\u4f2a\u9020\u8bf7\u6c42\u3001\u7a83\u53d6\u53d8\u91cf\u6216\u626b\u63cf\u6f0f\u6d1e\u6765\u6467\u6bc1\u4f60\u7684\u5821\u5792\u3002\u5982\u4f55\u6784\u5efa\u6700\u540e\u4e00\u9053\u56fa\u82e5\u91d1\u6c64\u7684\u7269\u7406\u9632\u7ebf&#xff1f;\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u653b\u514b\u7684\u8bfe\u9898\u2014\u2014\u5b89\u5168\u9632\u7ebf&#xff1a;CSRF \u9632\u62a4\u3001\u73af\u5883\u53d8\u91cf\u7ba1\u7406\u4e0e\u6570\u636e\u8131\u654f\u3002\u60a8\u51c6\u5907\u597d\u8fce\u63a5\u6700\u540e\u4e00\u573a\u5168\u6808\u5b89\u5168\u7684\u6218\u5f79\u4e86\u5417&#xff1f;<\/p>\n<h3>9.3 \u201c\u5b89\u5168\u9632\u7ebf\u201d \u2014\u2014 CSRF \u9632\u62a4\u3001\u73af\u5883\u53d8\u91cf\u7ba1\u7406\u4e0e\u6570\u636e\u8131\u654f<\/h3>\n<p>\u5982\u679c\u8bf4\u8eab\u4efd\u8ba4\u8bc1\u662f\u57ce\u95e8&#xff0c;\u6743\u9650\u63a7\u5236\u662f\u5f8b\u6cd5&#xff0c;\u90a3\u4e48\u672c\u8282\u6240\u8ba8\u8bba\u7684\u5b89\u5168\u9632\u7ebf&#xff08;Secure Defenses&#xff09;\u5c31\u662f\u57cb\u85cf\u5728\u57ce\u5821\u5730\u57fa\u4e0b\u7684\u6697\u5f29\u4e0e\u62a4\u57ce\u6cb3\u3002<\/p>\n<p>\u5728\u5168\u6808\u5f00\u53d1\u7684\u55a7\u56a3\u4e2d&#xff0c;\u5f00\u53d1\u8005\u5f80\u5f80\u5bb9\u6613\u6c89\u6eba\u4e8e\u7eda\u4e3d\u7684 UI \u4e0e\u7cbe\u5de7\u7684\u903b\u8f91&#xff0c;\u5374\u5ffd\u7565\u4e86\u90a3\u4e9b\u81f4\u547d\u7684\u6697\u6d8c&#xff1a;\u4e00\u4e2a\u88ab\u6076\u610f\u7f51\u7ad9\u4f2a\u9020\u7684\u8bf7\u6c42&#xff08;CSRF&#xff09;\u3001\u4e00\u4e2a\u4e0d\u5c0f\u5fc3\u63d0\u4ea4\u5230 GitHub \u7684\u79d8\u94a5\u3001\u6216\u662f API \u54cd\u5e94\u4e2d\u591a\u51fa\u7684\u51e0\u884c\u654f\u611f\u5b57\u6bb5\u3002\u5728 Next.js \u7684\u5de5\u7a0b\u8bed\u5883\u4e0b&#xff0c;\u5b89\u5168\u9632\u7ebf\u4e0d\u662f\u4e00\u4e2a\u5355\u4e00\u7684\u5f00\u5173&#xff0c;\u800c\u662f\u4e00\u573a\u8de8\u8d8a\u4f20\u8f93\u5c42\u3001\u903b\u8f91\u5c42\u4e0e\u6301\u4e45\u5c42\u7684\u201c\u6df1\u5ea6\u9632\u5fa1\u201d\u3002<\/p>\n<p>\u4e00\u3001 \u9690\u5f62\u7684\u62a4\u57ce\u6cb3&#xff1a;CSRF \u9632\u62a4\u7684\u539f\u7406\u4e0e\u5b9e\u8df5<\/p>\n<p>CSRF (Cross-Site Request Forgery&#xff0c;\u8de8\u7ad9\u8bf7\u6c42\u4f2a\u9020)\u00a0\u662f\u4e00\u79cd\u53e4\u8001\u800c\u72e1\u733e\u7684\u653b\u51fb&#xff1a;\u653b\u51fb\u8005\u8bf1\u5bfc\u5df2\u767b\u5f55\u7528\u6237\u70b9\u51fb\u6076\u610f\u94fe\u63a5&#xff0c;\u5229\u7528\u7528\u6237\u6d4f\u89c8\u5668\u4e2d\u5c1a\u5b58\u7684 Session Cookie&#xff0c;\u5411\u4f60\u7684\u670d\u52a1\u5668\u53d1\u8d77\u201c\u501f\u5200\u6740\u4eba\u201d\u7684\u8bf7\u6c42\u3002<\/p>\n<p>1. Next.js \u7684\u539f\u751f\u514d\u75ab\u529b<\/p>\n<p>\u5e78\u800c&#xff0c;\u5728 App Router \u65f6\u4ee3&#xff0c;Next.js \u4e0e Auth.js \u4e3a\u6211\u4eec\u7b51\u8d77\u4e86\u5929\u7136\u7684\u5c4f\u969c&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u53cc\u91cd Cookie \u6821\u9a8c&#xff1a;Auth.js \u9ed8\u8ba4\u914d\u7f6e\u4e86\u4e25\u82db\u7684 CSRF \u7b56\u7565\u3002\u5b83\u5728\u975e\u5e42\u7b49\u8bf7\u6c42&#xff08;\u5982 POST&#xff09;\u4e2d\u8981\u6c42\u643a\u5e26\u4e00\u4e2a\u52a0\u5bc6\u7684\u00a0csrfToken\u3002<\/p>\n<\/li>\n<li>\n<p>Server Actions \u7684\u5b89\u5168\u7ea2\u5229&#xff1a;\u5f53\u4f60\u4f7f\u7528 Next.js \u7684 Server Actions \u65f6&#xff0c;\u6846\u67b6\u4f1a\u81ea\u52a8\u5904\u7406\u884c\u52a8\u4ee4\u724c\u7684\u6821\u9a8c\u3002\u8fd9\u610f\u5473\u7740&#xff0c;\u4f60\u4e0d\u518d\u9700\u8981\u624b\u52a8\u5728\u8868\u5355\u4e2d\u57cb\u5165\u9690\u85cf\u7684 Token&#xff0c;\u201c\u5b89\u5168\u201d\u5df2\u6210\u4e3a\u67b6\u6784\u7684\u526f\u4ea7\u54c1\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. SameSite \u7684\u5fc3\u7406\u9632\u7ebf<\/p>\n<p>\u901a\u8fc7\u5c06 Session Cookie \u7684\u00a0SameSite\u00a0\u5c5e\u6027\u8bbe\u7f6e\u4e3a\u00a0Lax\u00a0\u6216\u00a0Strict&#xff0c;\u6211\u4eec\u544a\u8bc9\u6d4f\u89c8\u5668&#xff1a;\u9664\u975e\u8bf7\u6c42\u6e90\u81ea\u672c\u7ad9&#xff0c;\u5426\u5219\u4e0d\u8981\u53d1\u9001\u8fd9\u4e9b\u654f\u611f\u7684\u51ed\u8bc1\u3002\u8fd9\u662f\u4ece\u534f\u8bae\u5c42\u5207\u65ad\u653b\u51fb\u94fe\u8def\u7684\u201c\u7269\u7406\u624b\u6bb5\u201d\u3002<\/p>\n<p>\u4e8c\u3001 \u79d8\u94a5\u7684\u9501\u67dc&#xff1a;\u73af\u5883\u53d8\u91cf\u7684\u201c\u9636\u7ea7\u5236\u5ea6\u201d<\/p>\n<p>\u5728\u5168\u6808\u5f00\u53d1\u4e2d&#xff0c;\u73af\u5883\u53d8\u91cf&#xff08;Environment Variables&#xff09;\u662f\u8fde\u63a5\u4ee3\u7801\u4e0e\u57fa\u7840\u8bbe\u65bd\u7684\u201c\u901a\u5173\u5bc6\u4ee4\u201d\u3002\u7136\u800c&#xff0c;\u6cc4\u9732\u79d8\u94a5\u662f\u5168\u6808\u5f00\u53d1\u8005\u6700\u5e38\u72af\u7684\u201c\u4f4e\u7ea7\u539f\u7f6a\u201d\u3002<\/p>\n<p>1. NEXT_PUBLIC_ \u7684\u751f\u6b7b\u7ebf<\/p>\n<p>Next.js \u8bbe\u8ba1\u4e86\u4e00\u5957\u6781\u5176\u4e25\u5bc6\u7684\u547d\u540d\u89c4\u7ea6\u3002\u53ea\u6709\u4ee5\u00a0NEXT_PUBLIC_\u00a0\u4e3a\u524d\u7f00\u7684\u73af\u5883\u53d8\u91cf&#xff0c;\u624d\u4f1a\u88ab\u6ce8\u5165\u5230\u6d4f\u89c8\u5668\u7aef\u7684 JS \u5305\u4e2d\u3002<\/p>\n<ul>\n<li>\n<p>\u7269\u7406\u9694\u79bb&#xff1a;\u6240\u6709\u7684\u6570\u636e\u5e93\u5bc6\u7801\u3001\u652f\u4ed8\u79d8\u94a5&#xff08;Stripe Secret&#xff09;\u3001\u52a0\u5bc6\u76d0\u503c&#xff0c;\u90fd\u5fc5\u987b\u4fdd\u6301\u4e0d\u5e26\u524d\u7f00\u7684\u201c\u7eaf\u51c0\u72b6\u6001\u201d\u3002<\/p>\n<\/li>\n<li>\n<p>\u4e13\u5bb6\u7684\u76f4\u89c9&#xff1a;\u5728\u7f16\u5199\u7ec4\u4ef6\u65f6&#xff0c;\u65f6\u523b\u5ba1\u89c6\u4f60\u7684\u53d8\u91cf\u73af\u5883\u3002\u5982\u679c\u4e00\u4e2a\u4e0d\u5e26\u524d\u7f00\u7684\u53d8\u91cf\u51fa\u73b0\u5728\u4e86\u5ba2\u6237\u7aef\u7ec4\u4ef6\u91cc&#xff0c;\u5b83\u5c06\u56e0\u65e0\u6cd5\u8bfb\u53d6\u800c\u8fd4\u56de\u00a0undefined\u3002\u8fd9\u4e0d\u4ec5\u662f\u62a5\u9519&#xff0c;\u66f4\u662f\u6846\u67b6\u5bf9\u4f60\u7684\u6700\u540e\u544a\u8beb\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u751f\u4ea7\u73af\u5883\u7684\u201c\u5f71\u5b50\u7ba1\u7406\u201d<\/p>\n<p>\u6c38\u8fdc\u4e0d\u8981\u5c06\u00a0.env.local\u00a0\u63d0\u4ea4\u5230 Git \u4ed3\u5e93\u3002\u5728\u751f\u4ea7\u73af\u5883\u4e2d&#xff0c;\u65e0\u8bba\u662f Vercel \u8fd8\u662f Docker \u90e8\u7f72&#xff0c;\u90fd\u5e94\u5f53\u4f7f\u7528\u52a0\u5bc6\u7684\u79d8\u5bc6\u7ba1\u7406\u7cfb\u7edf&#xff08;Secret Manager&#xff09;\u3002<\/p>\n<p>\u4ee3\u7801\u662f\u6d41\u52a8\u7684&#xff0c;\u800c\u73af\u5883\u662f\u56fa\u5316\u7684\u3002\u5c06\u903b\u8f91\u4e0e\u914d\u7f6e\u5f7b\u5e95\u5206\u79bb&#xff0c;\u662f\u6784\u5efa\u5065\u58ee\u7cfb\u7edf\u7684\u7b2c\u4e00\u51c6\u5219\u3002<\/p>\n<p>\u4e09\u3001 \u6570\u636e\u7684\u6ee4\u955c&#xff1a;\u6570\u636e\u8131\u654f&#xff08;Data Masking&#xff09;\u7684\u827a\u672f<\/p>\n<p>\u5728 API \u54cd\u5e94\u6216 Server Components \u7684\u8fd4\u56de\u503c\u4e2d&#xff0c;\u6211\u4eec\u7ecf\u5e38\u4f1a\u906d\u9047\u201c\u4fe1\u606f\u6ea2\u51fa\u201d\u3002\u5982\u679c\u76f4\u63a5\u5c06\u6574\u4e2a\u6570\u636e\u5e93\u5bf9\u8c61\u00a0user\u00a0\u8fd4\u56de\u7ed9\u524d\u7aef&#xff0c;\u9690\u85cf\u5728\u5176\u4e2d\u7684\u00a0password_hash\u00a0\u6216\u00a0secret_answer\u00a0\u53ef\u80fd\u4f1a\u6210\u4e3a\u6cc4\u5bc6\u7684\u6e90\u5934\u3002<\/p>\n<p>1. \u54cd\u5e94\u5f0f\u7684\u201c\u7a84\u53e3\u201d\u8bbe\u8ba1<\/p>\n<p>\u5168\u6808\u4e13\u5bb6\u4ece\u4e0d\u5728 API \u5c42\u505a\u7b80\u5355\u7684\u642c\u8fd0\u5de5\u3002\u6211\u4eec\u5e94\u5f53\u901a\u8fc7\u6570\u636e\u4f20\u8f93\u5bf9\u8c61&#xff08;DTO&#xff09;\u6216\u663e\u5f0f\u7684\u6620\u5c04\u903b\u8f91&#xff0c;\u5bf9\u6570\u636e\u8fdb\u884c\u201c\u6d17\u767d\u201d&#xff1a;<\/p>\n<p>\/\/ \u5371\u9669&#xff1a;\u76f4\u63a5\u66b4\u9732\u6570\u636e\u5e93\u5b57\u6bb5<br \/>\nconst user &#061; await db.user.findUnique({ &#8230; });<br \/>\nreturn NextResponse.json(user);<\/p>\n<p>\/\/ \u5b89\u5168&#xff1a;\u663e\u5f0f\u7684\u6570\u636e\u63d0\u53d6<br \/>\nreturn NextResponse.json({<br \/>\n  id: user.id,<br \/>\n  name: user.name,<br \/>\n  avatar: user.avatar,<br \/>\n  \/\/ \u5bc6\u7801\u54c8\u5e0c\u3001\u624b\u673a\u53f7\u3001\u6ce8\u518c IP \u7b49\u5728\u6b64\u88ab\u6ee4\u9664<br \/>\n});<\/p>\n<p>2. \u6570\u636e\u5e93\u67e5\u8be2\u7684\u201c\u6309\u9700\u7d22\u53d6\u201d<\/p>\n<p>\u5229\u7528 Prisma \u6216 Drizzle \u7684\u00a0select\u00a0\u529f\u80fd&#xff0c;\u5728\u67e5\u8be2\u9636\u6bb5\u5c31\u5c01\u6b7b\u6cc4\u5bc6\u8def\u5f84\u3002<\/p>\n<p>const profile &#061; await db.user.findUnique({<br \/>\n  where: { id },<br \/>\n  select: { name: true, email: true } \/\/ \u53ea\u6709\u5217\u51fa\u7684\u5b57\u6bb5\u4f1a\u79bb\u5f00\u6570\u636e\u5e93<br \/>\n});<\/p>\n<p>\u8fd9\u79cd\u4ece\u201c\u53d6\u6570\u9636\u6bb5\u201d\u5c31\u5f00\u59cb\u7684\u514b\u5236&#xff0c;\u6bd4\u5728\u6700\u540e\u4e00\u6b65\u624b\u52a8\u5220\u9664\u5c5e\u6027\u8981\u53ef\u9760\u5f97\u591a\u3002<\/p>\n<p>\u56db\u3001 \u67b6\u6784\u7684\u5fc3\u6cd5&#xff1a;\u6700\u5c0f\u7279\u6743\u4e0e\u6df1\u5ea6\u626b\u63cf<\/p>\n<li>\n<p>\u6700\u5c0f\u7279\u6743\u539f\u5219&#xff1a; \u4e0d\u4ec5\u662f\u7528\u6237\u6743\u9650&#xff0c;\u8fde\u4f60\u7684\u6570\u636e\u5e93\u8d26\u53f7\u4e5f\u5e94\u5982\u6b64\u3002\u7ed9 Web \u5e94\u7528\u4e00\u4e2a\u53ea\u6709\u00a0SELECT,\u00a0INSERT,\u00a0UPDATE\u00a0\u6743\u9650\u7684\u8d26\u53f7&#xff0c;\u800c\u4e0d\u662f\u6570\u636e\u5e93\u7684\u00a0Root\u3002<\/p>\n<\/li>\n<li>\n<p>\u4f9b\u5e94\u94fe\u5b89\u5168&#xff1a; \u5b9a\u671f\u8fd0\u884c\u00a0npm audit\u3002\u5b89\u5168\u9632\u7ebf\u4e0d\u4ec5\u53d6\u51b3\u4e8e\u4f60\u7684\u4ee3\u7801&#xff0c;\u66f4\u53d6\u51b3\u4e8e\u4f60\u5f15\u7528\u7684\u90a3\u51e0\u767e\u4e2a\u7b2c\u4e09\u65b9\u4f9d\u8d56\u3002<\/p>\n<\/li>\n<li>\n<p>\u9632\u8303 XSS \u7684\u5929\u7136\u5c4f\u969c&#xff1a; React \u9ed8\u8ba4\u4f1a\u5bf9\u6240\u6709\u5b57\u7b26\u4e32\u8fdb\u884c\u8f6c\u4e49&#xff0c;\u8fd9\u6781\u5927\u964d\u4f4e\u4e86 XSS \u653b\u51fb\u7684\u6982\u7387\u3002\u4f46\u5f53\u4f60\u4e0d\u5f97\u4e0d\u4f7f\u7528\u00a0dangerouslySetInnerHTML\u00a0\u65f6&#xff0c;\u8bf7\u52a1\u5fc5\u914d\u5408\u00a0DOMPurify\u00a0\u8fdb\u884c\u5f7b\u5e95\u7684\u6d88\u6bd2\u3002<\/p>\n<\/li>\n<p>\u4e94\u3001 \u7ed3\u8bed&#xff1a;\u5b89\u5168\u7684\u5e95\u8272<\/p>\n<p>\u81f3\u6b64&#xff0c;\u7b2c\u4e5d\u7ae0\u201c\u8eab\u4efd\u4e0e\u5b88\u62a4\u201d\u5df2\u5168\u9762\u6536\u5b98\u3002\u5b89\u5168\u4e0d\u662f\u4e00\u7ec4\u53ef\u4ee5\u88ab\u52fe\u9009\u7684\u4efb\u52a1\u6e05\u5355&#xff0c;\u5b83\u662f\u4e00\u79cd\u6f5c\u610f\u8bc6\u91cc\u7684\u9632\u5907\u3002\u5728 Next.js \u7684\u5168\u6808\u4fee\u884c\u4e2d&#xff0c;\u6211\u4eec\u8981\u4e60\u60ef\u4e8e\u5728\u9ed1\u6697\u4e2d\u5ba1\u89c6\u81ea\u5df1\u7684\u6bcf\u4e00\u884c\u4ee3\u7801\u2014\u2014\u5047\u8bbe\u6bcf\u4e00\u4e2a\u8bf7\u6c42\u90fd\u662f\u6076\u610f\u7684&#xff0c;\u5047\u8bbe\u6bcf\u4e00\u4e2a\u73af\u5883\u53d8\u91cf\u90fd\u6709\u88ab\u55c5\u63a2\u7684\u98ce\u9669&#xff0c;\u5047\u8bbe\u6bcf\u4e00\u6b21\u6570\u636e\u8fd4\u56de\u90fd\u53ef\u80fd\u6210\u4e3a\u6cc4\u5bc6\u7684\u7a97\u53e3\u3002\u201c\u9632\u7ebf\u201d\u7684\u610f\u4e49&#xff0c;\u4e0d\u5728\u4e8e\u6d88\u706d\u6240\u6709\u8fdb\u653b&#xff0c;\u800c\u5728\u4e8e\u8ba9\u653b\u51fb\u7684\u6210\u672c\u53d8\u5f97\u9ad8\u4e0d\u53ef\u6500\u3002\u00a0\u5f53\u4f60\u7684\u5e94\u7528\u5177\u5907\u4e86\u575a\u97e7\u7684 CSRF \u9632\u62a4\u3001\u4e25\u5bc6\u7684\u53d8\u91cf\u7ba1\u7406\u4ee5\u53ca\u7eaf\u51c0\u7684\u6570\u636e\u8f93\u51fa&#xff0c;\u4f60\u4fbf\u5b8c\u6210\u4e86\u4e00\u4e2a\u5f00\u53d1\u8005\u5411\u67b6\u6784\u5e08\u7684\u8715\u53d8\u3002<\/p>\n<p>\u5730\u57fa\u5df2\u7ecf\u592f\u5b9e&#xff0c;\u9632\u7ebf\u5df2\u7ecf\u7b51\u5c31\u3002\u5728\u5b8c\u6210\u4e86\u8eab\u4efd\u4e0e\u5b89\u5168\u7684\u6781\u81f4\u6253\u78e8\u540e&#xff0c;\u6211\u4eec\u7684\u5e94\u7528\u5df2\u7ecf\u662f\u4e00\u4e2a\u5177\u5907\u5b8c\u6574\u4eba\u683c\u4e0e\u9632\u5fa1\u80fd\u529b\u7684\u6570\u5b57\u751f\u547d\u4f53\u3002\u63a5\u4e0b\u6765&#xff0c;\u6211\u4eec\u5c06\u5f00\u542f\u672c\u4e66\u7684\u7b2c\u5341\u7ae0\u2014\u2014\u5b9e\u6218\u9879\u76ee\u4e00&#xff1a;\u5168\u6808\u5185\u5bb9\u7cfb\u7edf\u2014\u2014\u73b0\u4ee3\u535a\u5ba2\u5e73\u53f0\u3002<\/p>\n<h2>\u7b2c10\u7ae0&#xff1a;\u5b9e\u6218\u9879\u76ee\u4e00&#xff1a;\u5168\u6808\u5185\u5bb9\u7cfb\u7edf\u2014\u2014\u73b0\u4ee3\u535a\u5ba2\u5e73\u53f0<\/h2>\n<ul>\n<li>\n<p>10.1 \u6280\u672f\u9009\u578b&#xff1a;\u00a0Next.js &#043; Contentlayer &#043; MDX<\/p>\n<\/li>\n<li>\n<p>10.2 \u529f\u80fd\u5b9e\u73b0&#xff1a;\u00a0\u6587\u7ae0\u5206\u7c7b\u3001\u641c\u7d22\u4f18\u5316\u3001\u8bc4\u8bba\u7cfb\u7edf\u96c6\u6210<\/p>\n<\/li>\n<li>\n<p>10.3 \u6027\u80fd\u4f18\u5316&#xff1a;\u00a0\u751f\u6210\u9759\u6001\u7ad9\u70b9\u5730\u56fe&#xff08;Sitemap&#xff09;\u4e0e RSS \u8ba2\u9605<\/p>\n<\/li>\n<\/ul>\n<h3>10.1 \u6280\u672f\u9009\u578b \u2014\u2014 Next.js &#043; Contentlayer &#043; MDX&#xff1a;\u6253\u9020\u5185\u5bb9\u9a71\u52a8\u7684\u7ec8\u6781\u5229\u5668<\/h3>\n<p>\u5982\u679c\u8bf4\u524d\u9762\u7684\u7ae0\u8282\u662f\u5728\u6253\u78e8\u96f6\u4ef6\u3001\u4fee\u7b51\u57ce\u6c60&#xff0c;\u90a3\u4e48\u7b2c\u5341\u7ae0\u5219\u662f\u6211\u4eec\u8981\u5c06\u8fd9\u4e9b\u6280\u827a\u6c47\u805a\u4e00\u7089&#xff0c;\u953b\u9020\u51fa\u4e00\u628a\u771f\u6b63\u7684\u5229\u5203\u3002\u6211\u4eec\u5c06\u4ee5\u4e00\u4e2a\u201c\u73b0\u4ee3\u535a\u5ba2\u5e73\u53f0\u201d\u4e3a\u84dd\u672c&#xff0c;\u5b9e\u8df5\u4ece\u5185\u5bb9\u7ba1\u7406\u5230\u6781\u81f4\u6e32\u67d3\u7684\u5168\u6808\u5168\u6d41\u7a0b\u3002<\/p>\n<p>\u5728\u5185\u5bb9\u7cfb\u7edf\u7684\u9009\u578b\u4e2d&#xff0c;\u5b58\u5728\u7740\u4e00\u4e2a\u201c\u4e0d\u53ef\u80fd\u4e09\u89d2\u201d&#xff1a;\u6781\u81f4\u7684\u5f00\u53d1\u4f53\u9a8c\u3001\u6781\u81f4\u7684\u52a0\u8f7d\u901f\u5ea6\u4ee5\u53ca\u6781\u81f4\u7684\u5185\u5bb9\u8868\u8fbe\u80fd\u529b\u3002\u4f20\u7edf\u7684 CMS&#xff08;\u5982 WordPress&#xff09;\u81c3\u80bf\u4e0d\u582a&#xff0c;\u7eaf HTML \u53c8\u96be\u4ee5\u7ef4\u62a4\u3002\u800c\u00a0Next.js &#043; Contentlayer &#043; MDX\u00a0\u7684\u7ec4\u5408&#xff0c;\u6b63\u662f\u4e3a\u4e86\u6253\u7834\u8fd9\u4e00\u50f5\u5c40\u800c\u751f\u7684\u201c\u9ec4\u91d1\u4e09\u89d2\u201d\u3002\u5b83\u5c06\u201c\u4ee3\u7801\u5373\u5185\u5bb9\u201d\u7684\u5f00\u53d1\u8005\u4f53\u9a8c\u63d0\u5347\u5230\u4e86\u524d\u6240\u672a\u6709\u7684\u9ad8\u5ea6\u3002<\/p>\n<p>\u4e00\u3001 \u9009\u578b\u7684\u54f2\u5b66&#xff1a;\u4e3a\u4ec0\u4e48\u662f\u8fd9\u4e09\u8005\u7684\u5171\u9e23&#xff1f;<\/p>\n<p>\u4e00\u4e2a\u73b0\u4ee3\u535a\u5ba2\u5e73\u53f0&#xff0c;\u672c\u8d28\u4e0a\u662f\u4e00\u4e2a\u5185\u5bb9\u8f6c\u6362\u5f15\u64ce\u3002\u6211\u4eec\u9700\u8981\u5c06\u4eba\u7c7b\u53ef\u8bfb\u7684\u6587\u5b57&#xff08;Markdown\/MDX&#xff09;&#xff0c;\u9ad8\u6548\u3001\u5b89\u5168\u4e14\u7c7b\u578b\u5316\u5730\u8f6c\u5316\u4e3a\u7528\u6237\u53ef\u89c1\u7684\u50cf\u7d20\u3002<\/p>\n<p>1. Next.js&#xff1a;\u5168\u6808\u7684\u5e95\u5ea7<\/p>\n<p>\u4f5c\u4e3a\u5e95\u5ea7&#xff0c;Next.js \u63d0\u4f9b\u4e86 6.1 \u8282\u63d0\u5230\u7684\u00a0SSG (\u9759\u6001\u751f\u6210)\u00a0\u80fd\u529b\u3002\u5bf9\u4e8e\u535a\u5ba2\u800c\u8a00&#xff0c;\u5185\u5bb9\u5728\u53d1\u5e03\u540e\u5e76\u4e0d\u9891\u7e41\u53d8\u52a8&#xff0c;\u6784\u5efa\u65f6\u751f\u6210 HTML \u662f\u8ffd\u6c42\u6beb\u79d2\u7ea7\u8bbf\u95ee\u7684\u552f\u4e00\u771f\u7406\u3002<\/p>\n<p>2. MDX&#xff1a;\u5185\u5bb9\u7684\u8d85\u80fd\u529b<\/p>\n<p>\u666e\u901a\u7684 Markdown \u53ea\u80fd\u8868\u8fbe\u6587\u5b57\u4e0e\u56fe\u7247&#xff0c;\u800c\u00a0MDX\u00a0\u5141\u8bb8\u4f60\u5728 Markdown \u4e2d\u76f4\u63a5\u5d4c\u5165 React \u7ec4\u4ef6\u3002<\/p>\n<p>\u4ea4\u4e92\u5f0f\u5185\u5bb9&#xff1a;\u4f60\u60f3\u5728\u6280\u672f\u535a\u5ba2\u91cc\u653e\u4e00\u4e2a\u5b9e\u65f6\u8fd0\u884c\u7684\u4ee3\u7801\u7f16\u8f91\u5668&#xff1f;\u6216\u8005\u4e00\u4e2a\u53ef\u4ee5\u62d6\u52a8\u7684 3D \u56fe\u8868&#xff1f;MDX \u8ba9\u4f60\u7684\u6587\u7ae0\u4e0d\u518d\u662f\u6b7b\u677f\u7684\u6587\u6863&#xff0c;\u800c\u662f\u4e00\u4e2a\u751f\u52a8\u7684\u4ea4\u4e92\u5f0f\u5e94\u7528\u3002<\/p>\n<p>3. Contentlayer&#xff1a;\u8fde\u63a5\u5185\u5bb9\u4e0e\u4ee3\u7801\u7684\u5f3a\u7c7b\u578b\u6865\u6881<\/p>\n<p>\u8fd9\u662f\u6574\u5957\u9009\u578b\u4e2d\u6700\u5177\u7075\u6027\u7684\u90e8\u5206\u3002\u4f20\u7edf\u6a21\u5f0f\u4e0b&#xff0c;\u6211\u4eec\u9700\u8981\u624b\u52a8\u8bfb\u53d6\u6587\u4ef6\u3001\u89e3\u6790 Frontmatter\u3001\u5904\u7406 Slug\u3002\u800c Contentlayer \u5c06\u4f60\u7684\u5185\u5bb9\u76ee\u5f55\u89c6\u4e3a\u4e00\u4e2a\u672c\u5730\u6570\u636e\u5e93\u3002<\/p>\n<p>\u7c7b\u578b\u5b89\u5168&#xff1a;\u5b83\u4f1a\u81ea\u52a8\u6839\u636e\u4f60\u7684 Markdown \u7ed3\u6784\u751f\u6210 TypeScript \u5b9a\u4e49\u3002\u5982\u679c\u4f60\u5728\u6587\u7ae0\u91cc\u5199\u9519\u4e86\u4e00\u4e2a\u65e5\u671f\u683c\u5f0f&#xff0c;\u7f16\u8bd1\u65f6\u5c31\u4f1a\u62a5\u9519&#xff0c;\u800c\u4e0d\u662f\u7b49\u5230\u8fd0\u884c\u65f6\u767d\u5c4f\u3002<\/p>\n<p>\u4e8c\u3001 \u6df1\u5ea6\u5b9e\u8df5&#xff1a;\u6784\u5efa\u5185\u5bb9\u5904\u7406\u6d41\u6c34\u7ebf<\/p>\n<p>\u5728\u5168\u6808\u4e13\u5bb6\u7684\u773c\u4e2d&#xff0c;\u6280\u672f\u9009\u578b\u4e0d\u4ec5\u662f\u770b\u5e93\u7684\u540d\u5b57&#xff0c;\u66f4\u662f\u770b\u6570\u636e\u6d41\u7684\u8d70\u5411\u3002<\/p>\n<p>1. \u5b9a\u4e49 Schema&#xff1a;\u4e3a\u5185\u5bb9\u7acb\u6cd5<\/p>\n<p>\u5728 Contentlayer \u4e2d&#xff0c;\u6211\u4eec\u9996\u5148\u5b9a\u4e49\u6587\u7ae0\u7684\u201c\u5f62\u72b6\u201d\u3002\u8fd9\u786e\u4fdd\u4e86\u6574\u4e2a\u5e73\u53f0\u7684\u6570\u636e\u4e00\u81f4\u6027\u3002<\/p>\n<p>\/\/ contentlayer.config.ts<br \/>\nexport const Post &#061; defineDocumentType(() &#061;&gt; ({<br \/>\n  name: &#039;Post&#039;,<br \/>\n  filePathPattern: &#096;posts\/**\/*.mdx&#096;,<br \/>\n  contentType: &#039;mdx&#039;,<br \/>\n  fields: {<br \/>\n    title: { type: &#039;string&#039;, required: true },<br \/>\n    date: { type: &#039;date&#039;, required: true },<br \/>\n    description: { type: &#039;string&#039;, required: true },<br \/>\n  },<br \/>\n  computedFields: {<br \/>\n    url: { type: &#039;string&#039;, resolve: (post) &#061;&gt; &#096;\/posts\/${post._raw.flattenedPath}&#096; },<br \/>\n  },<br \/>\n}));<\/p>\n<p>2. \u6570\u636e\u7684\u9759\u6001\u6c72\u53d6<\/p>\n<p>Next.js \u4f1a\u5728\u6784\u5efa\u65f6&#xff0c;\u901a\u8fc7 Contentlayer \u81ea\u52a8\u751f\u6210\u7684\u00a0allPosts\u00a0\u6570\u7ec4&#xff0c;\u77ac\u95f4\u5b8c\u6210\u6240\u6709\u9875\u9762\u7684\u9759\u6001\u6ce8\u6c34\u3002<\/p>\n<p>\/\/ app\/posts\/[slug]\/page.tsx<br \/>\nimport { allPosts } from &#039;contentlayer\/generated&#039;;<\/p>\n<p>export const generateStaticParams &#061; async () &#061;&gt;<br \/>\n  allPosts.map((post) &#061;&gt; ({ slug: post._raw.flattenedPath }));<\/p>\n<p>export default function PostPage({ params }) {<br \/>\n  const post &#061; allPosts.find((p) &#061;&gt; p._raw.flattenedPath &#061;&#061;&#061; params.slug);<br \/>\n  return &lt;article&gt;&lt;h1&gt;{post.title}&lt;\/h1&gt;&#8230;&lt;\/article&gt;;<br \/>\n}<\/p>\n<p>\u4e09\u3001 \u6781\u81f4\u4f53\u9a8c&#xff1a;MDX \u7684\u7ec4\u4ef6\u5316\u4fee\u884c<\/p>\n<p>MDX \u7684\u771f\u6b63\u5a01\u529b\u5728\u4e8e\u5b83\u7684\u00a0components\u00a0\u6620\u5c04\u3002\u4f60\u53ef\u4ee5\u5c06\u6807\u51c6\u7684 HTML \u6807\u7b7e\u66ff\u6362\u4e3a\u4f60\u7684\u7cbe\u4fee\u7ec4\u4ef6\u3002<\/p>\n<ul>\n<li>\n<p>\u81ea\u5b9a\u4e49\u6e32\u67d3&#xff1a;\u5c06\u6240\u6709\u7684\u00a0&lt;a&gt;\u00a0\u6807\u7b7e\u66ff\u6362\u4e3a Next.js \u7684\u00a0&lt;Link&gt;\u00a0\u4ee5\u5b9e\u73b0\u65e0\u5237\u65b0\u8df3\u8f6c&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u4ee3\u7801\u9ad8\u4eae&#xff1a;\u901a\u8fc7\u96c6\u6210\u00a0rehype-pretty-code&#xff0c;\u8ba9\u4f60\u7684\u4ee3\u7801\u5757\u62e5\u6709\u7c7b\u4f3c VS Code \u7684\u8bed\u6cd5\u9ad8\u4eae\u548c\u884c\u9ad8\u4eae\u529f\u80fd\u3002<\/p>\n<\/li>\n<li>\n<p>\u77ed\u4ee3\u7801&#xff08;Shortcodes&#xff09;&#xff1a;\u5728 Markdown \u4e2d\u76f4\u63a5\u4e66\u5199\u00a0&lt;InfoBox&gt;\u6ce8\u610f&#xff1a;\u8fd9\u662f\u4e00\u4e2a\u63d0\u793a&lt;\/InfoBox&gt;&#xff0c;\u5b9e\u73b0\u6781\u5176\u590d\u6742\u7684\u6392\u7248\u5e03\u5c40\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u56db\u3001 \u6027\u80fd\u7684\u8003\u91cf&#xff1a;\u4e3a\u4ec0\u4e48\u4e0d\u9009 Headless CMS&#xff1f;<\/p>\n<p>\u4f5c\u4e3a\u9009\u578b\u5bf9\u6bd4&#xff0c;\u5168\u6808\u4e13\u5bb6\u5fc5\u987b\u56de\u7b54&#xff1a;\u4e3a\u4ec0\u4e48\u4e0d\u9009 Strapi \u6216 Contentful \u7b49 Headless CMS&#xff1f;<\/p>\n<li>\n<p>\u96f6\u5ef6\u8fdf\u7684\u6784\u5efa\u611f\u77e5&#xff1a;Contentlayer \u5728\u672c\u5730\u5904\u7406\u6587\u4ef6&#xff0c;\u6ca1\u6709\u7f51\u7edc\u8bf7\u6c42\u7684\u5f00\u9500&#xff0c;\u6784\u5efa\u901f\u5ea6\u6781\u5feb\u3002<\/p>\n<\/li>\n<li>\n<p>Git \u5373\u5355\u771f\u6e90 (Single Source of Truth)&#xff1a;\u6587\u7ae0\u5185\u5bb9\u968f\u7740\u4ee3\u7801\u4e00\u8d77\u7248\u672c\u7ba1\u7406\u3002\u8fd9\u610f\u5473\u7740\u4f60\u53ef\u4ee5\u901a\u8fc7 Pull Request \u50cf\u5ba1\u9605\u4ee3\u7801\u4e00\u6837\u5ba1\u9605\u6587\u7ae0&#xff0c;\u5b9e\u73b0\u4e86\u771f\u6b63\u7684\u201c\u5185\u5bb9\u5f00\u53d1\u5de5\u7a0b\u5316\u201d\u3002<\/p>\n<\/li>\n<li>\n<p>\u90e8\u7f72\u6210\u672c&#xff1a;\u7531\u4e8e\u5185\u5bb9\u662f\u6587\u4ef6\u7cfb\u7edf\u7684\u4e00\u90e8\u5206&#xff0c;\u4f60\u53ef\u4ee5\u90e8\u7f72\u5728\u4efb\u4f55\u652f\u6301\u9759\u6001\u6258\u7ba1\u7684\u5e73\u53f0\u4e0a&#xff0c;\u65e0\u9700\u8d1f\u62c5\u6602\u8d35\u7684\u5916\u90e8\u6570\u636e\u5e93\u6216 CMS \u6708\u8d39\u3002<\/p>\n<\/li>\n<p>\u4e94\u3001 \u603b\u7ed3&#xff1a;\u901a\u5f80\u7eaf\u7cb9\u7684\u5185\u5bb9\u8868\u8fbe<\/p>\n<p>\u672c\u8282\u7684\u9009\u578b\u65b9\u6848&#xff0c;\u672c\u8d28\u4e0a\u662f\u5728\u8ffd\u6c42\u4e00\u79cd\u201c\u6d88\u5931\u7684\u57fa\u5efa\u201d\u3002<\/p>\n<p>\u5f53\u6211\u4eec\u914d\u7f6e\u597d Next.js &#043; Contentlayer &#043; MDX \u540e&#xff0c;\u5f00\u53d1\u8005\u51e0\u4e4e\u611f\u89c9\u4e0d\u5230\u6846\u67b6\u7684\u5b58\u5728\u3002\u4f60\u53ea\u9700\u8981\u6253\u5f00\u7f16\u8f91\u5668&#xff0c;\u65b0\u5efa\u4e00\u4e2a\u00a0.mdx\u00a0\u6587\u4ef6&#xff0c;\u5c3d\u60c5\u6325\u6beb&#xff0c;\u5269\u4e0b\u7684\u7c7b\u578b\u8f6c\u6362\u3001\u56fe\u50cf\u4f18\u5316\u3001\u8def\u7531\u751f\u6210\u3001SEO \u5143\u6570\u636e\u6ce8\u5165&#xff0c;\u5168\u90e8\u7531\u8fd9\u5957\u81ea\u52a8\u5316\u7684\u6d41\u6c34\u7ebf\u5728\u540e\u53f0\u9759\u9ed8\u5b8c\u6210\u3002<\/p>\n<p>\u201c\u9009\u578b\u201d\u7684\u6700\u9ad8\u5883\u754c&#xff0c;\u662f\u8ba9\u6280\u672f\u670d\u52a1\u4e8e\u521b\u4f5c&#xff0c;\u800c\u4e0d\u662f\u8ba9\u6280\u672f\u6210\u4e3a\u521b\u4f5c\u7684\u963b\u788d\u3002\u00a0\u8fd9\u79cd\u65b9\u6848\u4e0d\u4ec5\u7ed9\u4e86\u6211\u4eec\u6781\u81f4\u7684\u6027\u80fd&#xff0c;\u66f4\u7ed9\u4e86\u6211\u4eec\u4e00\u79cd\u56de\u5f52\u6587\u5b57\u3001\u5374\u53c8\u4e0d\u5931\u73b0\u4ee3\u4ea4\u4e92\u80fd\u529b\u7684\u4f18\u96c5\u3002<\/p>\n<p>\u5730\u57fa\u5df2\u7ecf\u6253\u597d&#xff0c;\u5185\u5bb9\u6d41\u6c34\u7ebf\u5df2\u7ecf\u901a\u7545\u3002\u4f46\u4e00\u4e2a\u771f\u6b63\u7684\u535a\u5ba2\u5e73\u53f0\u4e0d\u4ec5\u4ec5\u662f\u5c55\u793a\u6587\u5b57&#xff0c;\u5b83\u8fd8\u9700\u8981\u5177\u5907\u53d1\u73b0\u5185\u5bb9\u7684\u7075\u9b42\u2014\u2014\u5982\u4f55\u5b9e\u73b0\u7cbe\u51c6\u7684\u6587\u7ae0\u5206\u7c7b&#xff1f;\u5982\u4f55\u8ba9\u641c\u7d22\u5feb\u5982\u95ea\u7535&#xff1f;\u5982\u4f55\u8ba9\u8bfb\u8005\u5728\u8bc4\u8bba\u533a\u7559\u4e0b\u601d\u60f3\u7684\u706b\u82b1&#xff1f;\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u653b\u514b\u7684\u96be\u5173\u2014\u2014\u529f\u80fd\u5b9e\u73b0&#xff1a;\u6587\u7ae0\u5206\u7c7b\u3001\u641c\u7d22\u4f18\u5316\u3001\u8bc4\u8bba\u7cfb\u7edf\u96c6\u6210\u3002\u60a8\u51c6\u5907\u597d\u4e3a\u4f60\u7684\u5185\u5bb9\u7cfb\u7edf\u6ce8\u5165\u201c\u4ea4\u4e92\u7684\u751f\u547d\u529b\u201d\u4e86\u5417&#xff1f;<\/p>\n<h3>10.2 \u529f\u80fd\u5b9e\u73b0 \u2014\u2014 \u6587\u7ae0\u5206\u7c7b\u3001\u641c\u7d22\u4f18\u5316\u4e0e\u8bc4\u8bba\u7cfb\u7edf\u7684\u6709\u673a\u96c6\u6210<\/h3>\n<p>\u5982\u679c\u8bf4\u524d\u9762\u5c0f\u8282\u7684\u6280\u672f\u9009\u578b\u4e3a\u535a\u5ba2\u5e73\u53f0\u6784\u7b51\u4e86\u575a\u786c\u7684\u201c\u9aa8\u67b6\u201d&#xff0c;\u90a3\u4e48\u672c\u8282\u7684\u529f\u80fd\u5b9e\u73b0\u5219\u662f\u4e3a\u5176\u6ce8\u5165\u201c\u7075\u9b42\u201d\u4e0e\u201c\u611f\u5b98\u201d\u3002\u4e00\u4e2a\u73b0\u4ee3\u7684\u535a\u5ba2\u5e73\u53f0\u4e0d\u5e94\u53ea\u662f\u4fe1\u606f\u7684\u9648\u5217\u9986&#xff0c;\u800c\u5e94\u662f\u4e00\u4e2a\u53ef\u68c0\u7d22\u3001\u53ef\u4ea4\u4e92\u3001\u53ef\u8fde\u63a5\u7684\u77e5\u8bc6\u751f\u6001\u3002<\/p>\n<p>\u5728\u8fd9\u4e00\u8282\u4e2d&#xff0c;\u6211\u4eec\u5c06\u6df1\u5165\u63a2\u8ba8\u5982\u4f55\u5229\u7528 Next.js \u7684\u8def\u7531\u4f18\u52bf\u5904\u7406\u590d\u6742\u7684\u5206\u7c7b\u903b\u8f91&#xff0c;\u5982\u4f55\u5e73\u8861\u641c\u7d22\u7684\u5b9e\u65f6\u6027\u4e0e\u6027\u80fd&#xff0c;\u4ee5\u53ca\u5982\u4f55\u5728\u9759\u6001\u7684\u9875\u9762\u4e2d\u690d\u5165\u52a8\u6001\u7684\u793e\u4ea4\u706b\u82b1\u3002\u6211\u4eec\u5c06\u7528\u4ee3\u7801\u7f16\u7ec7\u4e00\u5957\u4e25\u5bc6\u7684\u903b\u8f91&#xff0c;\u8ba9\u8bfb\u8005\u5728\u4fe1\u606f\u7684\u6d77\u6d0b\u4e2d\u4e0d\u81f3\u4e8e\u8ff7\u5931&#xff0c;\u5728\u77e5\u8bc6\u7684\u78b0\u649e\u4e2d\u4ea7\u751f\u5171\u9e23\u3002<\/p>\n<p>\u4e00\u3001 \u7ef4\u5ea6\u91cd\u6784&#xff1a;\u6587\u7ae0\u5206\u7c7b\u4e0e\u6807\u7b7e\u7684\u52a8\u6001\u5bfc\u822a<\/p>\n<p>\u5185\u5bb9\u7684\u4ef7\u503c\u5f80\u5f80\u53d6\u51b3\u4e8e\u5176\u7ec4\u7ec7\u7684\u6df1\u5ea6\u3002\u5728 Contentlayer \u751f\u6210\u7684\u6241\u5e73\u5316\u6570\u636e\u7ed3\u6784\u4e0a&#xff0c;\u6211\u4eec\u9700\u8981\u5efa\u7acb\u4e00\u5957\u7acb\u4f53\u7684\u5206\u7c7b\u4f53\u7cfb\u3002<\/p>\n<p>1. \u52a8\u6001\u8def\u7531\u7684\u827a\u672f<\/p>\n<p>\u5229\u7528 Next.js \u7684\u52a8\u6001\u8def\u7531\u00a0app\/categories\/[slug]\/page.tsx&#xff0c;\u6211\u4eec\u53ef\u4ee5\u4e3a\u6bcf\u4e00\u4e2a\u5206\u7c7b\u521b\u5efa\u4e00\u4e2a\u4e13\u5c5e\u7684\u201c\u805a\u5408\u7a7a\u95f4\u201d\u3002<\/p>\n<ul>\n<li>\n<p>\u805a\u5408\u903b\u8f91&#xff1a;\u901a\u8fc7\u00a0allPosts\u00a0\u6570\u7ec4&#xff0c;\u5229\u7528\u00a0filter\u00a0\u65b9\u6cd5\u63d0\u53d6\u51fa\u5e26\u6709\u7279\u5b9a\u5206\u7c7b\u6807\u8bb0\u7684\u6587\u7ae0\u3002<\/p>\n<\/li>\n<li>\n<p>\u7c7b\u578b\u611f\u5e94&#xff1a;\u501f\u52a9 TypeScript&#xff0c;\u6211\u4eec\u53ef\u4ee5\u786e\u4fdd\u7528\u6237\u8bbf\u95ee\u7684\u6bcf\u4e00\u4e2a\u5206\u7c7b\u90fd\u662f\u5728 Contentlayer Schema \u4e2d\u9884\u5b9a\u4e49\u7684\u5408\u6cd5\u9879&#xff0c;\u4ece\u800c\u907f\u514d\u65e0\u6548\u8def\u7531\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u5206\u7c7b\u4e91\u4e0e\u6d3b\u8dc3\u5ea6<\/p>\n<p>\u4e0d\u4ec5\u4ec5\u662f\u5217\u8868\u3002\u901a\u8fc7\u8ba1\u7b97\u6bcf\u4e2a\u5206\u7c7b\u4e0b\u7684\u6587\u7ae0\u603b\u6570&#xff0c;\u6211\u4eec\u53ef\u4ee5\u6784\u5efa\u4e00\u4e2a\u201c\u5206\u7c7b\u5bfc\u822a\u4e91\u201d\u3002\u8fd9\u4e0d\u4ec5\u63d0\u5347\u4e86\u7528\u6237\u7684\u63a2\u7d22\u6b32\u671b&#xff0c;\u66f4\u5728\u89c6\u89c9\u4e0a\u5c55\u793a\u4e86\u535a\u4e3b\u77e5\u8bc6\u7248\u56fe\u7684\u4fa7\u91cd\u70b9\u3002<\/p>\n<p>\u4e8c\u3001 \u77ac\u65f6\u89e6\u8fbe&#xff1a;\u641c\u7d22\u4f18\u5316\u7684\u201c\u53cc\u8f68\u5236\u201d\u65b9\u6848<\/p>\n<p>\u5728\u4fe1\u606f\u7206\u70b8\u7684\u535a\u5ba2\u4e2d&#xff0c;\u641c\u7d22\u6846\u662f\u7528\u6237\u7684\u201c\u9003\u751f\u51fa\u53e3\u201d\u3002\u5728\u5168\u6808\u5f00\u53d1\u4e2d&#xff0c;\u641c\u7d22\u65b9\u6848\u7684\u9009\u62e9\u4f53\u73b0\u4e86\u5bf9\u201c\u5373\u65f6\u6027\u201d\u4e0e\u201c\u7d22\u5f15\u6210\u672c\u201d\u7684\u6743\u8861\u3002<\/p>\n<p>1. \u5ba2\u6237\u7aef\u8f7b\u91cf\u7ea7\u641c\u7d22 (Fuse.js)<\/p>\n<p>\u5bf9\u4e8e\u6587\u7ae0\u6570\u91cf\u5728\u5343\u7bc7\u4ee5\u5185\u7684\u535a\u5ba2&#xff0c;\u5c06\u6240\u6709\u6587\u7ae0\u7684\u6807\u9898\u3001\u6458\u8981\u3001\u5206\u7c7b\u9884\u5148\u751f\u6210\u4e00\u4e2a\u8f7b\u91cf\u7ea7\u7684 JSON \u7d22\u5f15\u6587\u4ef6&#xff0c;\u5e76\u5229\u7528\u00a0Fuse.js\u00a0\u5728\u524d\u7aef\u8fdb\u884c\u6a21\u7cca\u5339\u914d\u3002<\/p>\n<ul>\n<li>\n<p>\u4f18\u52bf&#xff1a;\u6781\u901f\u54cd\u5e94&#xff0c;\u65e0\u9700\u540e\u7aef\u4ea4\u4e92&#xff0c;\u65e0\u7f51\u7edc\u5ef6\u8fdf\u3002<\/p>\n<\/li>\n<li>\n<p>\u4f53\u9a8c&#xff1a;\u914d\u5408\u7b80\u5355\u7684\u00a0Input\u00a0\u7ec4\u4ef6&#xff0c;\u5b9e\u73b0\u201c\u8fb9\u6253\u5b57\u8fb9\u51fa\u7ed3\u679c\u201d\u7684\u4e1d\u6ed1\u611f\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u670d\u52a1\u7aef\u5168\u6587\u68c0\u7d22 (Algolia \/ ElasticSearch)<\/p>\n<p>\u5f53\u5185\u5bb9\u91cf\u7ea7\u8fbe\u5230\u4e07\u7ea7\u65f6&#xff0c;\u5ba2\u6237\u7aef\u7d22\u5f15\u7684\u52a0\u8f7d\u4f53\u79ef\u5c06\u53d8\u5f97\u4e0d\u53ef\u63a5\u53d7\u3002\u6b64\u65f6&#xff0c;\u6211\u4eec\u9700\u8981\u5f15\u5165\u00a0Algolia\u00a0\u7b49\u4e13\u4e1a\u7684\u641c\u7d22\u670d\u52a1\u3002<\/p>\n<ul>\n<li>\n<p>\u94a9\u5b50\u8054\u52a8&#xff1a;\u5728\u6784\u5efa\u65f6&#xff08;Build Time&#xff09;&#xff0c;\u5c06\u6587\u7ae0\u5185\u5bb9\u540c\u6b65\u81f3 Algolia \u7d22\u5f15\u5e93\u3002<\/p>\n<\/li>\n<li>\n<p>\u5b89\u5168\u8c03\u7528&#xff1a;\u5229\u7528\u524d\u9762\u7ae0\u8282\u63d0\u5230\u7684 Route Handlers \u5c01\u88c5\u641c\u7d22\u63a5\u53e3&#xff0c;\u9690\u85cf API Key \u5e76\u9632\u6b62\u6076\u610f\u8c03\u7528\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e09\u3001 \u793e\u4ea4\u5171\u9e23&#xff1a;\u8bc4\u8bba\u7cfb\u7edf\u7684\u6df1\u5ea6\u96c6\u6210<\/p>\n<p>\u9759\u6001\u9875\u9762\u6700\u6015\u201c\u6b7b\u6c14\u6c89\u6c89\u201d\u3002\u8bc4\u8bba\u7cfb\u7edf\u662f\u6253\u7834\u9759\u9ed8\u3001\u5efa\u7acb\u793e\u533a\u611f\u7684\u5173\u952e\u7ebd\u5e26\u3002\u5728\u73b0\u4ee3\u5168\u6808\u5b9e\u8df5\u4e2d&#xff0c;\u6211\u4eec\u503e\u5411\u4e8e\u4f7f\u7528\u201c\u65e0\u6570\u636e\u5e93\u611f\u201d\u7684\u5916\u90e8\u96c6\u6210\u65b9\u6848\u3002<\/p>\n<p>1. Giscus&#xff1a;\u4ee5 GitHub \u4e3a\u5e95\u5ea7\u7684\u667a\u6167<\/p>\n<p>Giscus\u00a0\u5229\u7528 GitHub Discussions \u4f5c\u4e3a\u8bc4\u8bba\u5b58\u50a8&#xff0c;\u5176\u8bbe\u8ba1\u7f8e\u5b66\u4e0e\u6280\u672f\u535a\u5ba2\u5b8c\u7f8e\u5951\u5408\u3002<\/p>\n<ul>\n<li>\n<p>\u6620\u5c04\u903b\u8f91&#xff1a;\u6bcf\u4e00\u7bc7\u6587\u7ae0\u7684 Slug \u5bf9\u5e94\u4e00\u4e2a GitHub \u8ba8\u8bba\u4e3b\u9898\u3002<\/p>\n<\/li>\n<li>\n<p>\u4f18\u52bf&#xff1a;\u5929\u7136\u5177\u5907 Markdown \u652f\u6301\u3001\u4ee3\u7801\u9ad8\u4eae\u3001Emoji \u4e92\u52a8&#xff0c;\u4e14\u5b8c\u5168\u514d\u8d39\u3001\u65e0\u5e7f\u544a\u3001\u81ea\u5e26\u9274\u6743\u7cfb\u7edf\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u96c6\u6210\u7684\u5fc3\u6cd5&#xff1a;\u5ba2\u6237\u7aef\u7ec4\u4ef6\u7684\u9694\u79bb<\/p>\n<p>\u8bc4\u8bba\u7ec4\u4ef6\u901a\u5e38\u5305\u542b\u5927\u91cf\u7684\u52a8\u6001\u4ea4\u4e92\u548c\u7b2c\u4e09\u65b9\u811a\u672c\u3002\u6211\u4eec\u5e94\u5c06\u5176\u5c01\u88c5\u4e3a\u72ec\u7acb\u7684\u00a0Client Component&#xff0c;\u5e76\u5229\u7528 React \u7684\u00a0Suspense\u00a0\u6216\u00a0dynamic\u00a0\u5bfc\u5165&#xff0c;\u786e\u4fdd\u5176\u4e0d\u4f1a\u62d6\u6162\u9996\u5c4f\u7684 LCP&#xff08;\u6700\u5927\u5185\u5bb9\u7ed8\u5236&#xff09;\u3002<\/p>\n<p>\u56db\u3001 \u4e13\u5bb6\u89c6\u70b9&#xff1a;\u7528\u6237\u8def\u5f84\u7684\u7ec6\u8282\u96d5\u7422<\/p>\n<p>\u4f5c\u4e3a\u4e00\u540d\u5168\u6808\u4e13\u5bb6&#xff0c;\u529f\u80fd\u5b9e\u73b0\u4e0d\u5e94\u6b62\u4e8e\u201c\u8dd1\u901a\u201d&#xff0c;\u800c\u5e94\u6b62\u4e8e\u201c\u5353\u8d8a\u201d&#xff1a;<\/p>\n<li>\n<p>\u9762\u5305\u5c51\u5bfc\u822a (Breadcrumbs)&#xff1a;\u4e3a\u6bcf\u4e00\u7bc7\u6587\u7ae0\u81ea\u52a8\u751f\u6210\u57fa\u4e8e\u8def\u5f84\u7684\u5bfc\u822a\u3002\u8fd9\u4e0d\u4ec5\u5229\u4e8e\u7528\u6237\u56de\u6eaf&#xff0c;\u66f4\u662f SEO \u7ed3\u6784\u5316\u6570\u636e\u7684\u91cd\u8981\u7ec4\u6210\u90e8\u5206\u3002<\/p>\n<\/li>\n<li>\n<p>\u76f8\u5173\u6587\u7ae0\u63a8\u8350&#xff1a;\u57fa\u4e8e\u6807\u7b7e&#xff08;Tags&#xff09;\u91cd\u5408\u5ea6\u8ba1\u7b97\u76f8\u5173\u6027&#xff0c;\u5728\u6587\u7ae0\u672b\u5c3e\u5c55\u793a\u201c\u4f60\u53ef\u80fd\u4e5f\u611f\u5174\u8da3\u201d\u3002\u8fd9\u79cd\u7b97\u6cd5\u5316\u7684\u63a8\u8350\u80fd\u663e\u8457\u63d0\u5347\u7f51\u7ad9\u7684\u9875\u9762\u6d4f\u89c8\u91cf&#xff08;PV&#xff09;\u3002<\/p>\n<\/li>\n<li>\n<p>\u9605\u8bfb\u8fdb\u5ea6\u6761&#xff1a;\u901a\u8fc7\u76d1\u542c\u6eda\u52a8\u4e8b\u4ef6&#xff0c;\u5728\u9876\u90e8\u5c55\u793a\u7ec6\u5fae\u7684\u8fdb\u5ea6\u6761\u3002\u8fd9\u79cd\u5fae\u5999\u7684\u53cd\u9988\u80fd\u6781\u5927\u7f13\u89e3\u957f\u6587\u9605\u8bfb\u5e26\u6765\u7684\u5fc3\u7406\u538b\u529b\u3002<\/p>\n<\/li>\n<p>\u4e94\u3001 \u603b\u7ed3&#xff1a;\u4ece\u201c\u53d1\u5e03\u201d\u5230\u201c\u4e92\u52a8\u201d<\/p>\n<p>\u672c\u8282\u7684\u4efb\u52a1&#xff0c;\u662f\u5b8c\u6210\u4ece\u5185\u5bb9\u4ea7\u51fa\u5230\u4ef7\u503c\u4f20\u9012\u7684\u95ed\u73af\u3002<\/p>\n<ul>\n<li>\n<p>\u5206\u7c7b\u4e0e\u6807\u7b7e\u89e3\u51b3\u4e86\u5185\u5bb9\u7684\u201c\u6709\u5e8f\u6027\u201d&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u641c\u7d22\u4f18\u5316\u89e3\u51b3\u4e86\u5185\u5bb9\u7684\u201c\u53ef\u5f97\u6027\u201d&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u8bc4\u8bba\u7cfb\u7edf\u89e3\u51b3\u4e86\u5185\u5bb9\u7684\u201c\u5ef6\u4f38\u6027\u201d\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u5f53\u8fd9\u4e09\u4e2a\u6a21\u5757\u6709\u673a\u5730\u878d\u5408\u5728 Next.js \u7684\u67b6\u6784\u4e2d\u65f6&#xff0c;\u4f60\u7684\u535a\u5ba2\u5e73\u53f0\u4fbf\u4e0d\u518d\u662f\u4e00\u4e2a\u5b64\u7acb\u7684\u3001\u51b0\u51b7\u7684\u9759\u6001\u6587\u4ef6\u96c6\u5408&#xff0c;\u800c\u53d8\u6210\u4e86\u4e00\u4e2a\u6709\u547c\u5438\u3001\u6709\u53cd\u9988\u7684\u77e5\u8bc6\u793e\u4ea4\u573a\u3002\u6bcf\u4e00\u4e2a\u529f\u80fd\u70b9\u90fd\u662f\u4e3a\u4e86\u7f29\u77ed\u8bfb\u8005\u4e0e\u4f5c\u8005\u3001\u8bfb\u8005\u4e0e\u77e5\u8bc6\u4e4b\u95f4\u7684\u8ddd\u79bb\u3002<\/p>\n<p>\u529f\u80fd\u5df2\u7ecf\u5b8c\u5907&#xff0c;\u4ea4\u4e92\u5df2\u7ecf\u987a\u7545\u3002\u4f46\u5728\u771f\u5b9e\u7684\u4e92\u8054\u7f51\u73af\u5883\u4e2d&#xff0c;\u4f18\u79c0\u7684\u7cfb\u7edf\u4e0d\u4ec5\u8981\u597d\u7528&#xff0c;\u66f4\u8981\u201c\u6613\u4e8e\u88ab\u53d1\u73b0\u3001\u6613\u4e8e\u88ab\u4f20\u64ad\u201d\u3002\u5982\u4f55\u8ba9\u4f60\u7684\u535a\u5ba2\u5728\u641c\u7d22\u5f15\u64ce\u4e2d\u540d\u5217\u524d\u8305&#xff1f;\u5982\u4f55\u8ba9\u4f60\u7684\u5fe0\u5b9e\u8bfb\u8005\u80fd\u7b2c\u4e00\u65f6\u95f4\u6536\u5230\u66f4\u65b0\u63d0\u9192&#xff1f;\u8fd9\u5c31\u662f\u672c\u7ae0\u7684\u6700\u540e\u4e00\u8bfe\u2014\u2014\u6027\u80fd\u4f18\u5316&#xff1a;\u751f\u6210\u9759\u6001\u7ad9\u70b9\u5730\u56fe&#xff08;Sitemap&#xff09;\u4e0e RSS \u8ba2\u9605\u3002\u60a8\u51c6\u5907\u597d\u8fce\u63a5\u5343\u4e07\u7ea7\u6d41\u91cf\u7684\u81ea\u7136\u589e\u957f\u4e86\u5417&#xff1f;<\/p>\n<h3>10.3 \u6027\u80fd\u4f18\u5316 \u2014\u2014 \u751f\u6210\u9759\u6001\u7ad9\u70b9\u5730\u56fe (Sitemap) \u4e0e RSS \u8ba2\u9605<\/h3>\n<p>\u5982\u679c\u8bf4\u5185\u5bb9\u7684\u521b\u4f5c\u662f\u4e00\u573a\u5b64\u72ec\u7684\u4fee\u884c&#xff0c;\u529f\u80fd\u7684\u5b9e\u73b0\u662f\u4fee\u7b51\u7cbe\u7f8e\u7684\u6bbf\u5802&#xff0c;\u90a3\u4e48\u672c\u8282\u6240\u63a2\u8ba8\u7684 Sitemap \u4e0e RSS&#xff0c;\u5c31\u662f\u4e3a\u8fd9\u5ea7\u6bbf\u5802\u4fee\u7b51\u901a\u5f80\u5916\u90e8\u4e16\u754c\u7684\u201c\u9ad8\u901f\u516c\u8def\u201d\u3002<\/p>\n<p>\u5728 Web \u5f00\u53d1\u7684\u8bed\u5883\u4e0b&#xff0c;\u6027\u80fd\u4f18\u5316\u4e0d\u4ec5\u662f\u6307\u9996\u5c4f\u52a0\u8f7d\u7684\u90a3\u51e0\u6beb\u79d2&#xff0c;\u66f4\u5305\u542b\u4e86\u201c\u5206\u53d1\u6027\u80fd\u201d\u4e0e\u201c\u89e6\u8fbe\u6548\u7387\u201d\u3002\u4e00\u4e2a\u4f18\u79c0\u7684\u5168\u6808\u7cfb\u7edf\u5e94\u5f53\u5177\u5907\u4e3b\u52a8\u51fa\u51fb\u7684\u80fd\u529b&#xff1a;\u5b83\u4e0d\u4ec5\u8981\u7b49\u5f85\u7528\u6237\u8bbf\u95ee&#xff0c;\u66f4\u8981\u80fd\u88ab\u641c\u7d22\u5f15\u64ce\u7cbe\u51c6\u6293\u53d6&#xff0c;\u80fd\u88ab\u8ba2\u9605\u5de5\u5177\u9ad8\u6548\u6355\u83b7\u3002\u5728 Next.js \u7684\u5de5\u7a0b\u5b9e\u8df5\u4e2d&#xff0c;\u6211\u4eec\u5c06\u5229\u7528\u201c\u4ee3\u7801\u5373\u914d\u7f6e\u201d\u7684\u54f2\u5b66&#xff0c;\u81ea\u52a8\u5316\u5730\u5f00\u542f\u8fd9\u4e24\u6247\u901a\u5f80\u5168\u7403\u6d41\u91cf\u7684\u5927\u95e8\u3002<\/p>\n<p>\u4e00\u3001 \u7ad9\u70b9\u5730\u56fe (Sitemap)&#xff1a;\u4e3a\u722c\u866b\u7ed8\u5236\u7684\u201c\u5168\u666f\u822a\u6d77\u56fe\u201d<\/p>\n<p>Sitemap\u00a0\u662f\u4e00\u4efd\u5199\u7ed9\u673a\u5668\u770b\u7684\u201c\u8bf4\u660e\u4e66\u201d\u3002\u5b83\u544a\u8bc9\u641c\u7d22\u5f15\u64ce\u7684\u722c\u866b&#xff1a;\u4f60\u7684\u7ad9\u70b9\u6709\u54ea\u4e9b\u9875\u9762&#xff1f;\u54ea\u4e9b\u662f\u6700\u91cd\u8981\u7684&#xff1f;\u5b83\u4eec\u4e0a\u4e00\u6b21\u66f4\u65b0\u662f\u4ec0\u4e48\u65f6\u5019&#xff1f;<\/p>\n<p>1. \u58f0\u660e\u5f0f\u751f\u6210&#xff1a;\u4ece\u624b\u52a8\u5230\u81ea\u52a8\u7684\u98de\u8dc3<\/p>\n<p>\u5728\u4f20\u7edf\u7684\u5f00\u53d1\u6a21\u5f0f\u4e2d&#xff0c;\u7ef4\u62a4 Sitemap \u662f\u4e00\u573a\u5669\u68a6\u2014\u2014\u6bcf\u5199\u4e00\u7bc7\u65b0\u6587\u7ae0&#xff0c;\u90fd\u8981\u624b\u52a8\u4fee\u6539 XML \u6587\u4ef6\u3002\u800c\u5728 Next.js App Router \u4e2d&#xff0c;\u6211\u4eec\u5229\u7528\u00a0sitemap.ts\u00a0\u8fd9\u4e00\u7279\u6b8a\u7ea6\u5b9a\u6587\u4ef6&#xff0c;\u5b9e\u73b0\u4e86\u52a8\u6001\u8ba1\u7b97\u3001\u9759\u6001\u4ea7\u51fa\u3002<\/p>\n<p>\/\/ app\/sitemap.ts<br \/>\nimport { allPosts } from &#039;contentlayer\/generated&#039;;<br \/>\nimport { MetadataRoute } from &#039;next&#039;;<\/p>\n<p>export default function sitemap(): MetadataRoute.Sitemap {<br \/>\n  const baseUrl &#061; &#039;https:\/\/your-blog.com&#039;;<\/p>\n<p>  \/\/ \u6620\u5c04\u6240\u6709\u535a\u5ba2\u6587\u7ae0\u8def\u7531<br \/>\n  const postEntries &#061; allPosts.map((post) &#061;&gt; ({<br \/>\n    url: &#096;${baseUrl}\/posts\/${post._raw.flattenedPath}&#096;,<br \/>\n    lastModified: new Date(post.date),<br \/>\n    changeFrequency: &#039;monthly&#039; as const,<br \/>\n    priority: 0.8,<br \/>\n  }));<\/p>\n<p>  \/\/ \u57fa\u7840\u9875\u9762\u8def\u7531<br \/>\n  const routes &#061; [&#039;&#039;, &#039;\/about&#039;, &#039;\/categories&#039;].map((route) &#061;&gt; ({<br \/>\n    url: &#096;${baseUrl}${route}&#096;,<br \/>\n    lastModified: new Date(),<br \/>\n    changeFrequency: &#039;daily&#039; as const,<br \/>\n    priority: 1.0,<br \/>\n  }));<\/p>\n<p>  return [&#8230;routes, &#8230;postEntries];<br \/>\n}<\/p>\n<p>2. \u6027\u80fd\u7ea2\u5229&#xff1a;\u6784\u5efa\u65f6\u7684\u201c\u5feb\u7167\u201d<\/p>\n<p>Next.js \u4f1a\u5728\u6784\u5efa\u9636\u6bb5\u6267\u884c\u8fd9\u4e2a\u51fd\u6570\u3002\u8fd9\u610f\u5473\u7740\u5f53\u722c\u866b\u8bf7\u6c42\u00a0\/sitemap.xml\u00a0\u65f6&#xff0c;\u670d\u52a1\u5668\u76f4\u63a5\u5410\u51fa\u9884\u5148\u751f\u6210\u7684\u9759\u6001 XML\u3002\u8fd9\u79cd\u201c\u96f6\u8ba1\u7b97\u5f00\u9500\u201d\u7684\u8def\u7531&#xff0c;\u4e0d\u4ec5\u5bf9\u722c\u866b\u6781\u5176\u53cb\u597d&#xff0c;\u4e5f\u907f\u514d\u4e86\u56e0\u5b9e\u65f6\u67e5\u8be2\u6570\u636e\u5e93\u800c\u4ea7\u751f\u7684\u6027\u80fd\u6ce2\u52a8\u3002<\/p>\n<p>\u4e8c\u3001 RSS \u8ba2\u9605&#xff1a;\u91cd\u5851\u201c\u5185\u5bb9\u4e3b\u6743\u201d\u7684\u8fde\u63a5\u5668<\/p>\n<p>\u5728\u4e00\u4e2a\u88ab\u7b97\u6cd5\u5206\u53d1\u7edf\u6cbb\u7684\u65f6\u4ee3&#xff0c;RSS (Really Simple Syndication)\u00a0\u8c61\u5f81\u7740\u4e00\u79cd\u590d\u53e4\u800c\u9ad8\u8d35\u7684\u575a\u6301&#xff1a;\u8ba9\u7528\u6237\u91cd\u65b0\u638c\u63e1\u9605\u8bfb\u7684\u4e3b\u52a8\u6743\u3002\u5bf9\u4e8e\u6280\u672f\u535a\u5ba2\u800c\u8a00&#xff0c;RSS \u662f\u8fde\u63a5\u786c\u6838\u8bfb\u8005\u3001\u6280\u672f\u805a\u5408\u5e73\u53f0&#xff08;\u5982 Feedly&#xff09;\u7684\u751f\u547d\u7ebf\u3002<\/p>\n<p>1. \u7ed3\u6784\u5316\u8f93\u51fa&#xff1a;\u5c06 MDX \u8f6c\u5316\u4e3a XML \u6d41<\/p>\n<p>\u751f\u6210 RSS \u7684\u6311\u6218\u5728\u4e8e\u5982\u4f55\u5c06\u590d\u6742\u7684 MDX \u5185\u5bb9\u8f6c\u5316\u4e3a\u6807\u51c6\u7684 XML \u683c\u5f0f\u3002\u6211\u4eec\u5229\u7528\u00a0feed\u00a0\u5e93\u914d\u5408 Contentlayer \u7684\u6570\u636e&#xff0c;\u5728\u6784\u5efa\u9636\u6bb5\u751f\u6210\u00a0feed.xml\u3002<\/p>\n<ul>\n<li>\n<p>\u6458\u8981\u63d0\u53d6&#xff1a;\u4e3a\u4e86\u4f18\u5316\u8ba2\u9605\u4f53\u9a8c&#xff0c;\u6211\u4eec\u901a\u5e38\u5728 RSS \u4e2d\u53ea\u63d0\u4f9b\u6587\u7ae0\u7684\u6458\u8981\u6216\u524d 200 \u5b57&#xff0c;\u5f15\u5bfc\u7528\u6237\u70b9\u51fb\u8fdb\u5165\u4e3b\u7ad9\u9605\u8bfb&#xff0c;\u540c\u65f6\u4e5f\u51cf\u5c0f\u4e86 XML \u6587\u4ef6\u7684\u4f53\u79ef\u3002<\/p>\n<\/li>\n<li>\n<p>\u65f6\u6548\u6027\u4fdd\u969c&#xff1a;\u6bcf\u5f53\u6709\u65b0\u6587\u7ae0\u901a\u8fc7 Git \u63d0\u4ea4\u5e76\u89e6\u53d1\u6784\u5efa&#xff0c;RSS \u5c31\u4f1a\u540c\u6b65\u66f4\u65b0&#xff0c;\u786e\u4fdd\u8ba2\u9605\u8005\u603b\u80fd\u7b2c\u4e00\u65f6\u95f4\u6536\u5230\u63a8\u9001\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u81ea\u52a8\u5316\u89e6\u53d1&#xff1a;\u6784\u5efa\u811a\u672c\u7684\u95ed\u73af<\/p>\n<p>\u7531\u4e8e Next.js \u76ee\u524d\u6ca1\u6709\u5185\u7f6e\u9488\u5bf9 RSS \u7684\u7279\u6b8a\u6587\u4ef6\u7ea6\u5b9a&#xff0c;\u6211\u4eec\u901a\u5e38\u5728\u00a0next.config.js\u00a0\u7684\u6784\u5efa\u94a9\u5b50\u4e2d&#xff0c;\u6216\u8005\u5229\u7528\u4e00\u4e2a\u5355\u72ec\u7684\u811a\u672c\u5728\u00a0postbuild\u00a0\u9636\u6bb5\u6267\u884c\u751f\u6210\u903b\u8f91\u3002<\/p>\n<p>\u4e09\u3001 \u6df1\u5ea6\u4f18\u5316&#xff1a;\u641c\u7d22\u5f15\u64ce\u7684\u201c\u8d85\u611f\u77e5\u201d\u914d\u7f6e<\/p>\n<p>\u4ec5\u4ec5\u6709 Sitemap \u662f\u4e0d\u591f\u7684&#xff0c;\u5168\u6808\u4e13\u5bb6\u4f1a\u8fdb\u4e00\u6b65\u538b\u69a8\u00a0SEO \u6027\u80fd&#xff1a;<\/p>\n<li>\n<p>Robots.txt \u7684\u5f15\u5bfc&#xff1a; \u901a\u8fc7\u00a0robots.ts\u00a0\u660e\u786e\u544a\u8bc9\u722c\u866b Sitemap \u7684\u4f4d\u7f6e&#xff0c;\u5e76\u9650\u5236\u5176\u6293\u53d6\u90a3\u4e9b\u4e0d\u5fc5\u8981\u7684\u4e34\u65f6\u76ee\u5f55&#xff08;\u5982\u00a0\/_next\/&#xff09;&#xff0c;\u5c06\u722c\u866b\u6709\u9650\u7684\u201c\u6293\u53d6\u914d\u989d\u201d\u96c6\u4e2d\u5728\u9ad8\u8d28\u91cf\u7684\u5185\u5bb9\u9875\u9762\u4e0a\u3002<\/p>\n<\/li>\n<li>\n<p>\u89c4\u8303\u94fe\u63a5 (Canonical Tags)&#xff1a; \u5229\u7528\u6211\u4eec\u5728 7.4 \u8282\u5b66\u5230\u7684 Metadata API&#xff0c;\u4e3a\u6bcf\u4e2a\u9875\u9762\u6ce8\u5165\u552f\u4e00\u7684\u00a0canonical\u00a0\u94fe\u63a5\u3002\u8fd9\u80fd\u9632\u6b62\u56e0\u4e3a\u5e26\u53c2\u6570\u7684 URL&#xff08;\u5982\u00a0?ref&#061;twitter&#xff09;\u5bfc\u81f4\u641c\u7d22\u5f15\u64ce\u5224\u5b9a\u4e3a\u201c\u91cd\u590d\u5185\u5bb9\u201d&#xff0c;\u4ece\u800c\u7a00\u91ca\u6743\u91cd\u3002<\/p>\n<\/li>\n<p>\u56db\u3001 \u6027\u80fd\u76d1\u63a7&#xff1a;\u5728\u751f\u4ea7\u73af\u5883\u89c2\u5bdf\u201c\u547c\u5438\u201d<\/p>\n<p>\u5f53\u6211\u4eec\u7684\u535a\u5ba2\u7cfb\u7edf\u5df2\u7ecf\u5177\u5907\u4e86\u5b8c\u7f8e\u7684\u5206\u53d1\u80fd\u529b&#xff0c;\u6211\u4eec\u9700\u8981\u4e00\u5957\u76d1\u63a7\u624b\u6bb5\u6765\u9a8c\u8bc1\u4f18\u5316\u7684\u6210\u6548\u3002<\/p>\n<ul>\n<li>\n<p>Core Web Vitals \u76d1\u63a7&#xff1a;\u5229\u7528 Vercel Speed Insights \u6216 Google Search Console&#xff0c;\u89c2\u5bdf\u771f\u5b9e\u7528\u6237\u7684 LCP\u3001FID \u548c CLS \u6570\u636e\u3002<\/p>\n<\/li>\n<li>\n<p>\u6293\u53d6\u7edf\u8ba1&#xff1a;\u901a\u8fc7\u641c\u7d22\u5f15\u64ce\u540e\u53f0&#xff0c;\u89c2\u5bdf Sitemap \u4e2d\u7684\u94fe\u63a5\u6709\u591a\u5c11\u88ab\u6210\u529f\u7d22\u5f15&#xff0c;\u662f\u5426\u6709\u9875\u9762\u56e0\u4e3a\u6027\u80fd\u95ee\u9898&#xff08;\u5982 JS \u6267\u884c\u8fc7\u6162&#xff09;\u800c\u88ab\u4e22\u5f03\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e94\u3001 \u603b\u7ed3&#xff1a;\u901a\u5f80\u6781\u81f4\u7684\u6700\u540e\u4e00\u516c\u91cc<\/p>\n<p>\u672c\u8282\u7684\u4f18\u5316&#xff0c;\u5b8c\u6210\u4e86\u5168\u6808\u535a\u5ba2\u7cfb\u7edf\u4ece\u201c\u5b64\u82b3\u81ea\u8d4f\u201d\u5230\u201c\u4f17\u6240\u5468\u77e5\u201d\u7684\u8d28\u53d8\u3002<\/p>\n<ul>\n<li>\n<p>Sitemap\u00a0\u662f\u5bf9\u641c\u7d22\u5f15\u64ce\u7684\u5c0a\u91cd&#xff1b;<\/p>\n<\/li>\n<li>\n<p>RSS\u00a0\u662f\u5bf9\u6838\u5fc3\u8bfb\u8005\u7684\u544a\u767d&#xff1b;<\/p>\n<\/li>\n<li>\n<p>Robots \u4e0e Metadata\u00a0\u662f\u5bf9 Web \u534f\u8bae\u7684\u656c\u754f\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u5728 Next.js \u7684\u5de5\u7a0b\u54f2\u5b66\u91cc&#xff0c;\u6027\u80fd\u4f18\u5316\u4e0d\u662f\u7e41\u7410\u7684\u8c03\u4f18&#xff0c;\u800c\u662f\u201c\u5c06\u590d\u6742\u7684\u5951\u7ea6\u8f6c\u5316\u4e3a\u7b80\u6d01\u7684\u4ee3\u7801\u201d\u3002\u5f53\u6211\u4eec\u901a\u8fc7\u51e0\u884c\u4ee3\u7801\u81ea\u52a8\u5316\u5730\u7ba1\u7406\u4e86\u5168\u7ad9\u7684\u7d22\u5f15\u4e0e\u5206\u53d1\u903b\u8f91&#xff0c;\u6211\u4eec\u5c31\u5df2\u7ecf\u6784\u5efa\u4e86\u4e00\u4e2a\u5177\u5907\u81ea\u751f\u957f\u80fd\u529b\u7684\u6570\u5b57\u8d44\u4ea7\u3002<\/p>\n<p>\u81f3\u6b64&#xff0c;\u7b2c\u5341\u7ae0\u201c\u5168\u6808\u5185\u5bb9\u7cfb\u7edf\u201d\u5df2\u5168\u7bc7\u5706\u6ee1\u3002\u6211\u4eec\u4ece\u6280\u672f\u9009\u578b\u7684\u201c\u8c0b\u7bc7\u5e03\u5c40\u201d&#xff0c;\u8d70\u5230\u4e86\u529f\u80fd\u5b9e\u73b0\u7684\u201c\u8840\u8089\u586b\u5145\u201d&#xff0c;\u6700\u7ec8\u62b5\u8fbe\u4e86\u6027\u80fd\u4f18\u5316\u7684\u201c\u795e\u91c7\u98de\u626c\u201d\u3002<\/p>\n<p>\u4f46\u8fd9\u53ea\u662f\u5b9e\u6218\u7684\u7b2c\u4e00\u6b65\u3002\u535a\u5ba2\u5e73\u53f0\u662f\u9759\u6001\u5185\u5bb9\u7684\u6781\u81f4&#xff0c;\u800c\u771f\u6b63\u7684\u5546\u4e1a\u6311\u6218\u5f80\u5f80\u5728\u4e8e\u90a3\u4e9b\u9ad8\u9891\u53d8\u52a8\u3001\u5145\u6ee1\u91d1\u94b1\u6c14\u606f\u7684\u52a8\u6001\u7cfb\u7edf\u3002\u63a5\u4e0b\u6765&#xff0c;\u6211\u4eec\u5c06\u5f00\u542f\u7b2c\u5341\u4e00\u7ae0\u2014\u2014\u5b9e\u6218\u9879\u76ee\u4e8c&#xff1a;\u4ea4\u4e92\u5f0f\u7535\u5546\u2014\u2014\u9ad8\u6027\u80fd\u5546\u57ce\u524d\u7aef\u3002\u6211\u4eec\u5c06\u9762\u5bf9\u590d\u6742\u4ea4\u4e92\u3001\u5e93\u5b58\u7ade\u4e89\u3001\u6570\u636e\u5e93\u8054\u52a8\u7b49\u5de5\u7a0b\u8003\u9a8c\u3002\u60a8\u51c6\u5907\u597d\u4ece\u201c\u6587\u5b57\u7684\u4fee\u884c\u201d\u8de8\u8d8a\u5230\u201c\u5546\u4e1a\u7684\u5b9e\u6218\u201d\u4e86\u5417&#xff1f;<\/p>\n<h2>\u7b2c11\u7ae0&#xff1a;\u5b9e\u6218\u9879\u76ee\u4e8c&#xff1a;\u4ea4\u4e92\u5f0f\u7535\u5546\u2014\u2014\u9ad8\u6027\u80fd\u5546\u57ce\u524d\u7aef<\/h2>\n<ul>\n<li>\n<p>11.1 \u72b6\u6001\u7ba1\u7406&#xff1a;\u00a0Zustand \u4e0e React \u72b6\u6001\u7684\u6743\u8861<\/p>\n<\/li>\n<li>\n<p>11.2 \u590d\u6742\u4ea4\u4e92&#xff1a;\u00a0\u8d2d\u7269\u8f66\u903b\u8f91\u3001\u591a\u51c6\u5219\u641c\u7d22\u4e0e\u652f\u4ed8\u96c6\u6210&#xff08;Stripe&#xff09;<\/p>\n<\/li>\n<li>\n<p>11.3 \u6570\u636e\u5e93\u8054\u52a8&#xff1a;\u00a0\u4f7f\u7528 Prisma \u6216 Drizzle ORM \u64cd\u4f5c\u5173\u7cfb\u578b\u6570\u636e\u5e93<\/p>\n<\/li>\n<\/ul>\n<h3>11.1 \u72b6\u6001\u7ba1\u7406 \u2014\u2014 Zustand \u4e0e React \u72b6\u6001\u7684\u6743\u8861&#xff1a;\u5728\u7075\u52a8\u4e0e\u79e9\u5e8f\u95f4\u5bfb\u627e\u5e73\u8861<\/h3>\n<p>\u5982\u679c\u8bf4\u535a\u5ba2\u7cfb\u7edf\u662f\u9759\u8c27\u7684\u6e56\u6cca&#xff0c;\u90a3\u4e48\u7535\u5546\u5546\u57ce\u5c31\u662f\u6ce2\u6d9b\u6c79\u6d8c\u7684\u5927\u6d77\u3002\u5728 11.1 \u8282\u4e2d&#xff0c;\u6211\u4eec\u4e0d\u518d\u4ec5\u4ec5\u5904\u7406\u6587\u5b57\u7684\u5c55\u793a&#xff0c;\u800c\u662f\u8981\u9762\u5bf9\u6781\u5176\u590d\u6742\u7684\u6570\u636e\u4ea4\u4e92\u6d41&#xff1a;\u5546\u54c1\u89c4\u683c\u7684\u52a8\u6001\u5207\u6362\u3001\u8de8\u9875\u9762\u7684\u8d2d\u7269\u8f66\u540c\u6b65\u3001\u7528\u6237\u767b\u5f55\u72b6\u6001\u7684\u5168\u5c40\u611f\u77e5\u3001\u4ee5\u53ca\u652f\u4ed8\u6d41\u7a0b\u4e2d\u7684\u4e25\u82db\u6821\u9a8c\u3002<\/p>\n<p>\u5728\u7535\u5546\u524d\u7aef\u7684\u5de5\u7a0b\u5b9e\u8df5\u4e2d&#xff0c;\u6700\u4ee4\u5f00\u53d1\u8005\u5934\u75bc\u7684\u83ab\u8fc7\u4e8e\u201c\u72b6\u6001\u7684\u81a8\u80c0\u201d\u3002\u5f53\u4e00\u4e2a\u53d8\u91cf\u7684\u53d8\u5316\u9700\u8981\u5f15\u8d77\u4e94\u4e2a\u7ec4\u4ef6\u7684\u540c\u65f6\u54cd\u5e94\u65f6&#xff0c;\u7b80\u5355\u7684 React\u00a0useState\u00a0\u5c31\u4f1a\u6f14\u53d8\u6210\u4e00\u573a\u540d\u4e3a\u201cProp Drilling\u201d&#xff08;\u5c5e\u6027\u94bb\u53d6&#xff09;\u7684\u5669\u68a6\u3002\u6211\u4eec\u9700\u8981\u4e00\u5957\u65e2\u80fd\u4fdd\u6301 React \u6e32\u67d3\u6027\u80fd&#xff0c;\u53c8\u80fd\u5728\u590d\u6742\u903b\u8f91\u4e2d\u6e38\u5203\u6709\u4f59\u7684\u72b6\u6001\u7ba1\u7406\u54f2\u5b66\u3002\u800c\u00a0Zustand\u00a0\u914d\u5408 React \u539f\u751f\u72b6\u6001&#xff0c;\u6b63\u662f\u6211\u4eec\u5e94\u5bf9\u8fd9\u4e00\u6311\u6218\u7684\u9ec4\u91d1\u65b9\u6848\u3002<\/p>\n<p>\u4e00\u3001 \u6743\u529b\u7684\u8fb9\u754c&#xff1a;\u5c40\u90e8\u72b6\u6001\u4e0e\u5168\u5c40\u72b6\u6001\u7684\u535a\u5f08<\/p>\n<p>\u5728\u5168\u6808\u4e13\u5bb6\u7684\u89c6\u91ce\u91cc&#xff0c;\u6ca1\u6709\u4e00\u79cd\u5de5\u5177\u662f\u4e07\u80fd\u7684\u3002\u72b6\u6001\u7ba1\u7406\u7684\u827a\u672f\u5728\u4e8e\u201c\u5404\u53f8\u5176\u804c\u201d\u3002<\/p>\n<p>1. React\u00a0useState\u00a0\/\u00a0useReducer&#xff1a;\u5c40\u90e8\u7684\u81ea\u6cbb<\/p>\n<p>\u7535\u5546\u9875\u9762\u4e2d\u6709\u5927\u91cf\u77ac\u65f6\u3001\u79c1\u6709\u7684\u72b6\u6001\u3002\u4f8b\u5982&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u5546\u54c1\u8be6\u60c5\u9875\u91cc\u67d0\u4e2a\u5206\u6bb5\u9009\u62e9\u5668\u7684\u5f53\u524d\u7d22\u5f15&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u641c\u7d22\u6846\u8f93\u5165\u7684\u4e34\u65f6\u6587\u5b57&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u4e00\u4e2a\u63a7\u5236\u5f39\u7a97\u5f00\u5173\u7684\u5e03\u5c14\u503c\u3002 \u8fd9\u4e9b\u72b6\u6001\u751f\u547d\u5468\u671f\u77ed&#xff0c;\u4e14\u4e0d\u4e0e\u5176\u4ed6\u4e1a\u52a1\u903b\u8f91\u8026\u5408\u3002\u575a\u6301\u4f7f\u7528 React \u539f\u751f\u72b6\u6001&#xff0c;\u80fd\u4fdd\u6301\u7ec4\u4ef6\u7684\u9ad8\u5ea6\u5c01\u88c5\u6027\u4e0e\u590d\u7528\u6027&#xff0c;\u907f\u514d\u5168\u5c40\u5b58\u50a8&#xff08;Store&#xff09;\u7684\u8fc7\u5ea6\u6c61\u67d3\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. Zustand&#xff1a;\u5168\u5c40\u7684\u5171\u9e23<\/p>\n<p>\u5f53\u72b6\u6001\u5f00\u59cb\u8de8\u8d8a\u7ec4\u4ef6\u5c42\u7ea7\u3001\u751a\u81f3\u8de8\u8d8a\u8def\u7531\u65f6&#xff0c;Zustand\u00a0\u4fbf\u5c55\u73b0\u4e86\u5b83\u201c\u8f7b\u91cf\u7ea7\u9738\u4e3b\u201d\u7684\u5a01\u4e25\u3002<\/p>\n<ul>\n<li>\n<p>\u8d2d\u7269\u8f66 (Cart)&#xff1a;\u65e0\u8bba\u7528\u6237\u5728\u54ea\u4e2a\u9875\u9762\u70b9\u51fb\u201c\u52a0\u5165\u8d2d\u7269\u8f66\u201d&#xff0c;\u5bfc\u822a\u680f\u7684\u6570\u5b57\u548c\u4fa7\u8fb9\u680f\u7684\u5217\u8868\u90fd\u5fc5\u987b\u5373\u65f6\u66f4\u65b0\u3002<\/p>\n<\/li>\n<li>\n<p>\u7528\u6237\u4fe1\u606f (User Profile)&#xff1a;\u7528\u6237\u7684\u6298\u6263\u7b49\u7ea7\u3001\u6536\u8d27\u5730\u5740\u504f\u597d&#xff0c;\u9700\u8981\u8d2f\u7a7f\u4ece\u6d4f\u89c8\u5230\u7ed3\u8d26\u7684\u5168\u8fc7\u7a0b\u3002<\/p>\n<\/li>\n<li>\n<p>UI \u6301\u4e45\u5316&#xff1a;\u7528\u6237\u9009\u62e9\u7684\u8d27\u5e01\u5355\u4f4d&#xff08;CNY\/USD&#xff09;\u6216\u6697\u9ed1\u6a21\u5f0f\u504f\u597d\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e8c\u3001 Zustand \u7684\u964d\u7ef4\u6253\u51fb&#xff1a;\u4e3a\u4ec0\u4e48\u5b83\u4f18\u4e8e Redux&#xff1f;<\/p>\n<p>\u5728 Next.js \u7684\u751f\u6001\u4e2d&#xff0c;Zustand \u4e4b\u6240\u4ee5\u5907\u53d7\u63a8\u5d07&#xff0c;\u662f\u56e0\u4e3a\u5b83\u5b9e\u73b0\u4e86\u4e00\u79cd\u201c\u65e0\u75db\u7684\u5168\u6808\u72b6\u6001\u7ba1\u7406\u201d\u3002<\/p>\n<li>\n<p>\u96f6\u6837\u677f\u4ee3\u7801 (Zero Boilerplate)&#xff1a;\u4e0d\u9700\u8981\u7f16\u5199\u5197\u957f\u7684 Action\u3001Reducer \u548c Dispatch\u3002\u4f60\u53ea\u9700\u5b9a\u4e49\u4e00\u4e2a Hook&#xff0c;\u5269\u4e0b\u7684\u5c31\u662f\u76f4\u63a5\u8c03\u7528\u3002<\/p>\n<\/li>\n<li>\n<p>\u8ba2\u9605\u5f0f\u6e32\u67d3 (Selective Rendering)&#xff1a;Zustand \u6700\u6838\u5fc3\u7684\u6740\u624b\u950f\u5728\u4e8e\u5b83\u80fd\u7cbe\u51c6\u63a7\u5236\u6e32\u67d3\u3002\u53ea\u6709\u5f53\u4f60\u5f15\u7528\u7684\u90a3\u4e2a\u7279\u5b9a\u5b57\u6bb5\u53d8\u5316\u65f6&#xff0c;\u7ec4\u4ef6\u624d\u4f1a\u91cd\u7ed8\u3002\u8fd9\u5bf9\u4e8e\u5305\u542b\u6210\u767e\u4e0a\u5343\u4e2a\u5546\u54c1\u7684\u5546\u57ce\u9996\u9875\u6765\u8bf4&#xff0c;\u662f\u6781\u81f4\u6027\u80fd\u7684\u57fa\u77f3\u3002<\/p>\n<\/li>\n<li>\n<p>\u539f\u751f\u4e2d\u95f4\u4ef6\u652f\u6301&#xff1a;\u60f3\u8981\u8ba9\u7528\u6237\u7684\u8d2d\u7269\u8f66\u5237\u65b0\u9875\u9762\u540e\u4e0d\u4e22\u5931&#xff1f;\u53ea\u9700\u4e00\u884c\u00a0persist\u00a0\u4e2d\u95f4\u4ef6&#xff0c;Zustand \u5c31\u80fd\u81ea\u52a8\u5c06\u72b6\u6001\u6301\u4e45\u5316\u5230\u00a0localStorage\u00a0\u4e2d\u3002<\/p>\n<\/li>\n<p>\/\/ store\/useCartStore.ts<br \/>\nimport { create } from &#039;zustand&#039;;<br \/>\nimport { persist } from &#039;zustand\/middleware&#039;;<\/p>\n<p>interface CartState {<br \/>\n  items: CartItem[];<br \/>\n  addItem: (item: Product) &#061;&gt; void;<br \/>\n  totalPrice: number;<br \/>\n}<\/p>\n<p>export const useCartStore &#061; create&lt;CartState&gt;()(<br \/>\n  persist(<br \/>\n    (set) &#061;&gt; ({<br \/>\n      items: [],<br \/>\n      addItem: (product) &#061;&gt; set((state) &#061;&gt; ({<br \/>\n        items: [&#8230;state.items, { &#8230;product, quantity: 1 }]<br \/>\n      })),<br \/>\n      get totalPrice() {<br \/>\n        \/\/ \u884d\u751f\u72b6\u6001\u7684\u8ba1\u7b97\u903b\u8f91<br \/>\n      }<br \/>\n    }),<br \/>\n    { name: &#039;shopping-cart&#039; }<br \/>\n  )<br \/>\n);<\/p>\n<p>\u4e09\u3001 \u6027\u80fd\u7684\u6df1\u6c34\u533a&#xff1a;\u907f\u514d\u72b6\u6001\u5bfc\u81f4\u7684\u201c\u5168\u5c4f\u91cd\u7ed8\u201d<\/p>\n<p>\u7535\u5546\u9879\u76ee\u5bf9\u4ea4\u4e92\u54cd\u5e94\u6781\u5ea6\u654f\u611f\u3002\u5982\u679c\u72b6\u6001\u7ba1\u7406\u4e0d\u5f53&#xff0c;\u7528\u6237\u70b9\u51fb\u4e00\u4e2a\u6536\u85cf\u6309\u94ae\u53ef\u80fd\u4f1a\u5bfc\u81f4\u6574\u4e2a\u9875\u9762\u5361\u987f 100ms\u3002<\/p>\n<ul>\n<li>\n<p>Selector \u7684\u7cbe\u7ec6\u5316\u64cd\u4f5c&#xff1a; \u4e0d\u8981\u00a0const state &#061; useStore()\u3002\u6c38\u8fdc\u4f7f\u7528\u00a0const items &#061; useStore(state &#061;&gt; state.items)\u3002\u8fd9\u79cd\u201c\u539f\u5b50\u5316\u8ba2\u9605\u201d\u80fd\u786e\u4fdd\u4f60\u7684\u4fa7\u8fb9\u680f\u7ec4\u4ef6\u4e0d\u4f1a\u56e0\u4e3a\u5546\u54c1\u4ef7\u683c\u7684\u5fae\u8c03\u800c\u4ea7\u751f\u4e0d\u5fc5\u8981\u7684\u91cd\u7ed8\u3002<\/p>\n<\/li>\n<li>\n<p>\u4e0e Server Components \u7684\u534f\u540c&#xff1a; \u8fd9\u662f Next.js \u72ec\u6709\u7684\u6311\u6218\u3002\u5168\u5c40\u72b6\u6001\u53ea\u5b58\u5728\u4e8e\u5ba2\u6237\u7aef\u3002\u6211\u4eec\u5e94\u5f53\u5728\u670d\u52a1\u7aef&#xff08;RSC&#xff09;\u5b8c\u6210\u521d\u59cb\u6570\u636e\u7684\u6293\u53d6&#xff08;\u5982\u7528\u6237\u4fe1\u606f&#xff09;&#xff0c;\u7136\u540e\u901a\u8fc7\u00a0hydration\u00a0\u7684\u65b9\u5f0f\u540c\u6b65\u7ed9 Zustand \u5b58\u50a8\u3002\u8fd9\u79cd\u201c\u9996\u5c4f\u9759\u6001\u3001\u540e\u7eed\u52a8\u6001\u201d\u7684\u7b56\u7565&#xff0c;\u517c\u987e\u4e86 SEO \u901f\u5ea6\u4e0e\u4ea4\u4e92\u7075\u6d3b\u6027\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u56db\u3001 \u72b6\u6001\u7684\u751f\u547d\u5468\u671f&#xff1a;\u4ece\u6d4f\u89c8\u5230\u7ed3\u7b97\u7684\u8fde\u8d2f\u6027<\/p>\n<p>\u5728\u5546\u57ce\u524d\u7aef&#xff0c;\u72b6\u6001\u7ba1\u7406\u8fd8\u627f\u62c5\u7740\u201c\u4e1a\u52a1\u72b6\u6001\u673a\u201d\u7684\u804c\u8d23\u3002<\/p>\n<ul>\n<li>\n<p>\u9884\u53d6\u7b56\u7565 (Prefetching)&#xff1a;\u5f53\u7528\u6237\u5c06\u9f20\u6807\u60ac\u505c\u5728\u5546\u54c1\u8be6\u60c5\u94fe\u63a5\u65f6&#xff0c;\u6211\u4eec\u53ef\u4ee5\u9884\u5148\u89e6\u53d1\u72b6\u6001\u66f4\u65b0\u6216 API \u8c03\u7528&#xff0c;\u8ba9\u968f\u540e\u7684\u9875\u9762\u8f6c\u6362\u51e0\u4e4e\u5b9e\u73b0\u201c\u96f6\u5ef6\u8fdf\u201d\u3002<\/p>\n<\/li>\n<li>\n<p>\u4e50\u89c2\u66f4\u65b0 (Optimistic Updates)&#xff1a;\u5f53\u7528\u6237\u70b9\u51fb\u201c\u6536\u85cf\u201d&#xff0c;UI \u5e94\u5f53\u7acb\u5373\u53d8\u7ea2&#xff0c;\u800c\u4e0d\u662f\u7b49\u5f85\u540e\u7aef\u63a5\u53e3\u8fd4\u56de\u6210\u529f\u3002\u8fd9\u79cd\u72b6\u6001\u5148\u884c\u3001\u7f51\u7edc\u5728\u540e\u7684\u6280\u5de7&#xff0c;\u662f\u8425\u9020\u201c\u5feb\u5982\u95ea\u7535\u201d\u611f\u5b98\u4f53\u9a8c\u7684\u5173\u952e\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e94\u3001 \u603b\u7ed3&#xff1a;\u5728\u6d41\u52a8\u7684\u72b6\u6001\u4e2d\u4fdd\u6301\u6e05\u9192<\/p>\n<p>\u672c\u8282\u7684\u63a2\u7d22&#xff0c;\u672c\u8d28\u4e0a\u662f\u4e3a\u7535\u5546\u7cfb\u7edf\u6784\u5efa\u4e00\u5957\u201c\u6570\u5b57\u795e\u7ecf\u7f51\u7edc\u201d\u3002<\/p>\n<ul>\n<li>\n<p>\u5c40\u90e8\u72b6\u6001\u662f\u89e6\u89c9&#xff0c;\u611f\u77e5\u77ac\u65f6\u7684\u4ea4\u4e92&#xff1b;<\/p>\n<\/li>\n<li>\n<p>Zustand\u00a0\u662f\u4e2d\u67a2&#xff0c;\u7edf\u7b79\u5168\u5c40\u7684\u8ba4\u77e5\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u5168\u6808\u4e13\u5bb6\u7684\u9009\u578b\u6807\u51c6\u4ece\u4e0d\u662f\u201c\u54ea\u4e2a\u5e93\u66f4\u6d41\u884c\u201d&#xff0c;\u800c\u662f\u201c\u54ea\u4e2a\u5e93\u66f4\u5951\u5408\u4e1a\u52a1\u7684\u590d\u6742\u5ea6\u201d\u3002Zustand \u4ee5\u5176\u6781\u7b80\u7684 API\u3001\u5353\u8d8a\u7684\u8ba2\u9605\u6027\u80fd\u548c\u5bf9 Serverless \u73af\u5883\u7684\u5929\u7136\u9002\u914d&#xff0c;\u6210\u4e3a\u4e86\u9ad8\u6027\u80fd\u5546\u57ce\u7684\u7075\u9b42\u90e8\u4ef6\u3002\u5f53\u72b6\u6001\u4e0d\u518d\u662f\u5f00\u53d1\u8005\u7684\u6c89\u91cd\u8d1f\u62c5&#xff0c;\u800c\u53d8\u6210\u4e86\u4e00\u79cd\u53ef\u9884\u6d4b\u3001\u53ef\u6d41\u52a8\u7684\u751f\u4ea7\u529b\u65f6&#xff0c;\u4f60\u4fbf\u638c\u63e1\u4e86\u6784\u5efa\u5546\u4e1a\u7ea7\u590d\u6742\u7cfb\u7edf\u7684\u94a5\u5319\u3002<\/p>\n<p>\u72b6\u6001\u7684\u8109\u7edc\u5df2\u7ecf\u7406\u6e05&#xff0c;\u5546\u57ce\u7684\u795e\u7ecf\u7f51\u7edc\u5df2\u7ecf\u8df3\u52a8\u3002\u4f46\u72b6\u6001\u672c\u8eab\u53ea\u662f\u8f7d\u4f53&#xff0c;\u771f\u6b63\u7684\u6311\u6218\u5728\u4e8e\u590d\u6742\u7684\u4e1a\u52a1\u535a\u5f08&#xff1a;\u5982\u4f55\u5904\u7406\u5343\u4e07\u7ea7\u5546\u54c1\u7684\u7b5b\u9009&#xff1f;\u5982\u4f55\u786e\u4fdd\u652f\u4ed8\u6d41\u7a0b\u7684\u7edd\u5bf9\u5b89\u5168&#xff1f;\u5982\u4f55\u8ba9\u8d2d\u7269\u8f66\u903b\u8f91\u5728\u5404\u79cd\u6781\u7aef\u60c5\u51b5\u4e0b\u4f9d\u7136\u7a33\u5065&#xff1f;\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u653b\u514b\u7684\u5821\u5792\u2014\u2014\u590d\u6742\u4ea4\u4e92&#xff1a;\u8d2d\u7269\u8f66\u903b\u8f91\u3001\u591a\u51c6\u5219\u641c\u7d22\u4e0e\u652f\u4ed8\u96c6\u6210 (Stripe)\u3002\u60a8\u51c6\u5907\u597d\u8fce\u63a5\u7535\u5546\u5f00\u53d1\u4e2d\u6700\u5177\u6311\u6218\u6027\u7684\u201c\u5b9e\u6218\u65f6\u523b\u201d\u4e86\u5417&#xff1f;<\/p>\n<h3>11.2 \u590d\u6742\u4ea4\u4e92 \u2014\u2014 \u8d2d\u7269\u8f66\u903b\u8f91\u3001\u591a\u51c6\u5219\u641c\u7d22\u4e0e\u652f\u4ed8\u96c6\u6210\u7684\u7ec8\u6781\u535a\u5f08<\/h3>\n<p>\u5982\u679c\u8bf4\u72b6\u6001\u7ba1\u7406\u662f\u7535\u5546\u5546\u57ce\u7684\u201c\u795e\u7ecf\u7f51\u7edc\u201d&#xff0c;\u90a3\u4e48\u00a011.2 \u8282\u6240\u6db5\u76d6\u7684\u590d\u6742\u4ea4\u4e92\u5219\u662f\u8fd9\u5957\u795e\u7ecf\u7cfb\u7edf\u9a71\u52a8\u4e0b\u7684\u201c\u7cbe\u5bc6\u52a8\u4f5c\u201d\u3002\u5728\u7535\u5546\u9886\u57df&#xff0c;\u5e73\u5eb8\u4e0e\u5353\u8d8a\u7684\u5206\u6c34\u5cad\u5f80\u5f80\u5c31\u5728\u4e8e\u7ec6\u8282&#xff1a;\u8d2d\u7269\u8f66\u5728\u79bb\u7ebf\u72b6\u6001\u4e0b\u662f\u5426\u4f9d\u7136\u53ef\u9760&#xff1f;\u5728\u6210\u5343\u4e0a\u4e07\u4e2a SKU \u4e2d\u641c\u7d22\u65f6\u662f\u5426\u5feb\u5982\u95ea\u7535&#xff1f;\u652f\u4ed8\u73af\u8282\u662f\u5426\u80fd\u50cf\u4e1d\u7ef8\u822c\u987a\u6ed1\u4e14\u575a\u4e0d\u53ef\u6467&#xff1f;<\/p>\n<p>\u672c\u8282\u6211\u4eec\u5c06\u6df1\u5165\u7535\u5546\u6700\u6838\u5fc3\u7684\u4e09\u4e2a\u4ea4\u4e92\u9ad8\u5730&#xff0c;\u63a2\u8ba8\u5982\u4f55\u901a\u8fc7 Next.js \u7684\u5168\u6808\u7279\u6027&#xff0c;\u5c06\u7e41\u7410\u7684\u4e1a\u52a1\u903b\u8f91\u8f6c\u5316\u4e3a\u6781\u7b80\u7684\u7528\u6237\u4f53\u9a8c\u3002<\/p>\n<p>\u4e00\u3001 \u8d2d\u7269\u8f66\u7684\u7cbe\u5bc6\u5f8b\u52a8&#xff1a;\u4ece\u672c\u5730\u6301\u4e45\u5316\u5230\u670d\u52a1\u7aef\u540c\u6b65<\/p>\n<p>\u8d2d\u7269\u8f66\u4e0d\u4ec5\u662f\u4e00\u4e2a\u5b58\u653e\u5546\u54c1\u7684\u5217\u8868&#xff0c;\u5b83\u662f\u4e00\u5957\u8de8\u73af\u5883\u7684\u72b6\u6001\u540c\u6b65\u673a\u5236\u3002\u7528\u6237\u53ef\u80fd\u5728\u672a\u767b\u5f55\u65f6\u6d4f\u89c8\u5546\u54c1&#xff0c;\u4e5f\u53ef\u80fd\u5728\u624b\u673a\u4e0a\u6dfb\u52a0\u3001\u5728\u7f51\u9875\u4e0a\u7ed3\u7b97\u3002<\/p>\n<p>1. \u79bb\u7ebf\u4f18\u5148\u7684\u54f2\u5b66<\/p>\n<p>\u5229\u7528\u00a0Zustand &#043; Persist \u4e2d\u95f4\u4ef6&#xff0c;\u6211\u4eec\u5b9e\u73b0\u4e86\u201c\u96f6\u5ef6\u8fdf\u201d\u7684\u521d\u59cb\u4f53\u9a8c\u3002\u7528\u6237\u70b9\u51fb\u201c\u52a0\u5165\u8d2d\u7269\u8f66\u201d\u7684\u77ac\u95f4&#xff0c;\u6570\u636e\u88ab\u5199\u5165\u00a0localStorage&#xff0c;UI \u7acb\u5373\u53cd\u9988\u3002\u8fd9\u79cd\u4e50\u89c2 UI (Optimistic UI)\u00a0\u6781\u5927\u5730\u6d88\u9664\u4e86\u7528\u6237\u7684\u64cd\u4f5c\u7126\u8651\u3002<\/p>\n<p>2. \u8eab\u4efd\u5207\u6362\u65f6\u7684\u201c\u6570\u636e\u63e1\u624b\u201d<\/p>\n<p>\u6700\u5177\u6311\u6218\u6027\u7684\u65f6\u523b\u5728\u4e8e\u7528\u6237\u767b\u5f55\u7684\u77ac\u95f4\u3002\u6211\u4eec\u9700\u8981\u5c06\u533f\u540d\u72b6\u6001\u4e0b\u7684\u00a0localCart\u00a0\u4e0e\u6570\u636e\u5e93\u4e2d\u7684\u00a0userCart\u00a0\u8fdb\u884c\u5408\u5e76&#xff08;Merge&#xff09;\u3002<\/p>\n<ul>\n<li>\n<p>\u7b56\u7565&#xff1a;\u901a\u8fc7\u4e00\u4e2a\u4e13\u5c5e\u7684 Route Handler&#xff0c;\u5728\u7528\u6237\u767b\u5f55\u6210\u529f\u540e\u7684\u9996\u4e2a\u8bf7\u6c42\u4e2d\u6bd4\u5bf9\u4e24\u7aef\u5dee\u5f02&#xff0c;\u5904\u7406\u5e93\u5b58\u6821\u9a8c&#xff0c;\u5e76\u8fd4\u56de\u4e00\u4e2a\u5927\u4e00\u7edf\u7684\u8d2d\u7269\u8f66\u72b6\u6001\u3002<\/p>\n<\/li>\n<li>\n<p>\u5e93\u5b58\u4fdd\u62a4&#xff1a;\u5728\u8d2d\u7269\u8f66\u4ea4\u4e92\u4e2d&#xff0c;\u6211\u4eec\u9700\u8981\u5b9e\u65f6\u901a\u8fc7 API \u6821\u9a8c\u5e93\u5b58\u3002Next.js \u7684\u00a0Server Actions\u00a0\u5728\u8fd9\u91cc\u5927\u653e\u5f02\u5f69&#xff0c;\u5b83\u80fd\u4ee5\u6700\u8f7b\u91cf\u7684\u65b9\u5f0f\u6267\u884c\u540e\u7aef\u6821\u9a8c&#xff0c;\u5e76\u5c06\u201c\u5e93\u5b58\u4e0d\u8db3\u201d\u7684\u8b66\u544a\u77ac\u95f4\u53cd\u9988\u81f3\u524d\u7aef\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e8c\u3001 \u591a\u51c6\u5219\u641c\u7d22&#xff1a;\u590d\u6742\u6570\u636e\u7684\u201c\u964d\u7ef4\u6253\u51fb\u201d<\/p>\n<p>\u5728\u62e5\u6709\u6570\u5343\u79cd\u5546\u54c1\u7684\u5546\u57ce\u91cc&#xff0c;\u641c\u7d22\u6846\u548c\u4fa7\u8fb9\u680f\u8fc7\u6ee4\u5668&#xff08;Filter&#xff09;\u662f\u7528\u6237\u7684\u5bfc\u822a\u706f\u5854\u3002<\/p>\n<p>1. URL \u5373\u72b6\u6001 (URL as Source of Truth)<\/p>\n<p>\u5168\u6808\u4e13\u5bb6\u4ece\u4e0d\u5c06\u7b5b\u9009\u6761\u4ef6&#xff08;\u4ef7\u683c\u533a\u95f4\u3001\u54c1\u724c\u3001\u8bc4\u5206&#xff09;\u5b58\u5728\u5c40\u90e8\u72b6\u6001\u91cc&#xff0c;\u800c\u662f\u5b58\u5728\u00a0URL Query Parameters\u00a0\u4e2d\u3002<\/p>\n<ul>\n<li>\n<p>\u4f18\u52bf&#xff1a;\u7528\u6237\u5237\u65b0\u9875\u9762\u6216\u5206\u4eab\u94fe\u63a5&#xff0c;\u7b5b\u9009\u7ed3\u679c\u4f9d\u7136\u4fdd\u6301\u3002<\/p>\n<\/li>\n<li>\n<p>\u5b9e\u73b0&#xff1a;\u5229\u7528 Next.js \u7684\u00a0useSearchParams\u00a0\u4e0e\u00a0useRouter\u3002\u6bcf\u5f53\u7528\u6237\u52fe\u9009\u4e00\u4e2a\u9009\u9879&#xff0c;URL \u77ac\u65f6\u66f4\u65b0&#xff0c;\u89e6\u53d1 Server Components \u91cd\u65b0\u83b7\u53d6\u6570\u636e\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u6027\u80fd\u52a0\u901f&#xff1a;Faceted Search (\u5206\u9762\u641c\u7d22)<\/p>\n<p>\u901a\u8fc7\u5bf9\u6570\u636e\u5e93\u8fdb\u884c\u7d22\u5f15\u4f18\u5316&#xff08;Indexing&#xff09;&#xff0c;\u6211\u4eec\u5b9e\u73b0\u4e86\u5728\u7b5b\u9009\u7684\u540c\u65f6\u663e\u793a\u5404\u5206\u7c7b\u4e0b\u7684\u5546\u54c1\u6570\u91cf\u3002<\/p>\n<ul>\n<li>\n<p>\u641c\u7d22\u9632\u6296 (Debouncing)&#xff1a;\u5728\u8f93\u5165\u5173\u952e\u8bcd\u65f6&#xff0c;\u901a\u8fc7\u00a0use-debounce\u00a0\u94a9\u5b50\u5ef6\u8fdf\u8bf7\u6c42&#xff0c;\u907f\u514d\u6570\u636e\u5e93\u5728\u7528\u6237\u6253\u5b57\u65f6\u9891\u7e41\u201c\u62bd\u98ce\u201d\u3002<\/p>\n<\/li>\n<li>\n<p>\u9aa8\u67b6\u5c4f\u8054\u52a8&#xff1a;\u5229\u7528\u00a0Suspense\u00a0\u8fb9\u754c&#xff0c;\u5728\u7b5b\u9009\u6761\u4ef6\u53d8\u52a8\u65f6&#xff0c;\u4ec5\u8ba9\u5546\u54c1\u5217\u8868\u90e8\u5206\u8fdb\u5165 Loading \u72b6\u6001&#xff0c;\u800c\u4fa7\u8fb9\u680f\u548c\u641c\u7d22\u6846\u4fdd\u6301\u53ef\u7528&#xff0c;\u5b9e\u73b0\u201c\u5c40\u90e8\u54cd\u5e94&#xff0c;\u5168\u5c40\u4e0d\u5361\u987f\u201d\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e09\u3001 \u652f\u4ed8\u96c6\u6210&#xff1a;Stripe \u7684\u5168\u6808\u5b89\u5168\u95ed\u73af<\/p>\n<p>\u652f\u4ed8\u662f\u6574\u573a\u4ea4\u4e92\u7684\u7ec8\u66f2&#xff0c;\u4e5f\u662f\u5bb9\u9519\u7387\u4e3a\u96f6\u7684\u7981\u533a\u3002\u96c6\u6210\u00a0Stripe\u00a0\u4e0d\u4ec5\u662f\u5f15\u5165\u4e00\u4e2a SDK&#xff0c;\u66f4\u662f\u6784\u5efa\u4e00\u5957\u5b8c\u6574\u7684\u72b6\u6001\u673a\u3002<\/p>\n<p>1. \u652f\u4ed8\u610f\u5411 (Payment Intent) \u7684\u521b\u5efa<\/p>\n<p>\u5f53\u7528\u6237\u8fdb\u5165\u7ed3\u7b97\u9875&#xff0c;Next.js \u7684 Route Handler \u4f1a\u7387\u5148\u5411 Stripe \u53d1\u8d77\u8bf7\u6c42&#xff0c;\u521b\u5efa\u4e00\u4e2a\u00a0PaymentIntent\u3002\u8fd9\u4e0d\u4ec5\u9501\u5b9a\u4e86\u4ea4\u6613\u91d1\u989d&#xff0c;\u4e5f\u4e3a\u540e\u7eed\u7684\u5ba1\u8ba1\u7559\u4e0b\u4e86\u5b58\u8bc1\u3002<\/p>\n<p>2. \u5b89\u5168\u7684 Webhook \u76d1\u542c<\/p>\n<p>\u652f\u4ed8\u6210\u529f\u5e76\u4e0d\u610f\u5473\u7740\u4ea4\u6613\u7ed3\u675f\u3002\u6211\u4eec\u9700\u8981\u5904\u7406\u5404\u79cd\u6781\u7aef\u60c5\u51b5&#xff08;\u7528\u6237\u5173\u6389\u6d4f\u89c8\u5668\u3001\u4fe1\u7528\u5361\u4e8c\u6b21\u9a8c\u8bc1\u7b49&#xff09;\u3002<\/p>\n<ul>\n<li>\n<p>\u6838\u5fc3\u903b\u8f91&#xff1a;\u5229\u7528 Stripe \u7684\u00a0Webhook\u3002\u5f53 Stripe \u7684\u670d\u52a1\u5668\u786e\u8ba4\u6536\u5230\u94b1\u6b3e\u540e&#xff0c;\u5b83\u4f1a\u5411\u6211\u4eec\u7684\u00a0\/api\/webhooks\/stripe\u00a0\u53d1\u8d77\u8bf7\u6c42\u3002<\/p>\n<\/li>\n<li>\n<p>\u7b7e\u540d\u9a8c\u8bc1&#xff1a;\u6b63\u5982 8.4 \u8282\u6240\u8bb2&#xff0c;\u5fc5\u987b\u4e25\u683c\u6821\u9a8c Webhook \u7b7e\u540d\u3002\u53ea\u6709\u6821\u9a8c\u901a\u8fc7&#xff0c;\u6211\u4eec\u624d\u5728\u6570\u636e\u5e93\u4e2d\u66f4\u65b0\u8ba2\u5355\u72b6\u6001\u4e3a\u00a0PAID&#xff0c;\u5e76\u89e6\u53d1\u540e\u7eed\u7684\u53d1\u8d27\u6d41\u7a0b\u3002<\/p>\n<\/li>\n<\/ul>\n<p>3. \u7ed3\u679c\u9875\u7684\u5e73\u6ed1\u8fc7\u6e21<\/p>\n<p>\u652f\u4ed8\u5b8c\u6210\u540e&#xff0c;\u5229\u7528\u00a0stripe-js\u00a0\u7684\u91cd\u5b9a\u5411\u529f\u80fd\u56de\u5230\u6211\u4eec\u7684\u00a0\/checkout\/success\u00a0\u9875\u9762\u3002\u6b64\u65f6&#xff0c;\u6211\u4eec\u53ef\u4ee5\u5229\u7528\u00a0ISR (\u589e\u91cf\u9759\u6001\u518d\u751f)\u00a0\u77ac\u95f4\u751f\u6210\u4e00\u4efd\u7cbe\u7f8e\u7684\u7535\u5b50\u6536\u636e\u3002<\/p>\n<p>\u56db\u3001 \u4e13\u5bb6\u7ea7\u7ec6\u8282&#xff1a;\u5728\u4ea4\u4e92\u4e2d\u6ce8\u5165\u201c\u9ad8\u7ea7\u611f\u201d<\/p>\n<li>\n<p>\u5206\u6bb5\u52a0\u8f7d (Partial Loading)&#xff1a;\u5728\u7ed3\u7b97\u9875&#xff0c;\u5148\u52a0\u8f7d\u5730\u5740\u548c\u5546\u54c1\u6e05\u5355&#xff08;\u9759\u6001\u90e8\u5206&#xff09;&#xff0c;\u518d\u6d41\u5f0f\u4f20\u8f93&#xff08;Streaming&#xff09;\u7a0e\u8d39\u548c\u8fd0\u8d39\u8ba1\u7b97&#xff08;\u52a8\u6001\u90e8\u5206&#xff09;\u3002<\/p>\n<\/li>\n<li>\n<p>\u9519\u8bef\u5904\u7406\u7684\u827a\u672f&#xff1a;\u5f53\u652f\u4ed8\u5931\u8d25&#xff0c;\u4e0d\u8981\u53ea\u7ed9\u4e00\u4e2a\u201c\u9519\u8bef\u201d&#xff0c;\u800c\u8981\u7ed9\u51fa\u660e\u786e\u7684\u6307\u5f15&#xff08;\u5982\u201c\u4f59\u989d\u4e0d\u8db3\u201d\u6216\u201c\u8bf7\u68c0\u67e5\u5b89\u5168\u7801\u201d&#xff09;&#xff0c;\u5e76\u4fdd\u7559\u7528\u6237\u7684\u8d2d\u7269\u8f66\u5185\u5bb9&#xff0c;\u51cf\u5c11\u4e8c\u6b21\u5f55\u5165\u7684\u75db\u82e6\u3002<\/p>\n<\/li>\n<li>\n<p>\u5fae\u4ea4\u4e92\u52a8\u753b&#xff1a;\u5229\u7528\u00a0framer-motion\u00a0\u4e3a\u201c\u52a0\u5165\u8d2d\u7269\u8f66\u201d\u6dfb\u52a0\u98de\u5165\u52a8\u753b\u3002\u867d\u7136\u8fd9\u4e0d\u6d89\u53ca\u540e\u7aef&#xff0c;\u4f46\u8fd9\u79cd\u89c6\u89c9\u4e0a\u7684\u786e\u8ba4\u611f\u662f\u5546\u4e1a\u8f6c\u5316\u7387\u7684\u91cd\u8981\u50ac\u5316\u5242\u3002<\/p>\n<\/li>\n<p>\u4e94\u3001 \u603b\u7ed3&#xff1a;\u4ea4\u4e92\u5373\u670d\u52a1<\/p>\n<p>\u672c\u8282\u6240\u6784\u5efa\u7684&#xff0c;\u662f\u4e00\u5957\u9ad8\u53ef\u9760\u3001\u4f4e\u5ef6\u8fdf\u3001\u5f3a\u4e00\u81f4\u6027\u7684\u4e1a\u52a1\u4ea4\u4e92\u6a21\u578b\u3002<\/p>\n<ul>\n<li>\n<p>\u8d2d\u7269\u8f66\u89e3\u51b3\u4e86\u201c\u9009\u8d2d\u201d\u7684\u7a33\u5b9a\u6027&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u591a\u51c6\u5219\u641c\u7d22\u89e3\u51b3\u4e86\u201c\u53d1\u73b0\u201d\u7684\u6548\u7387&#xff1b;<\/p>\n<\/li>\n<li>\n<p>Stripe \u96c6\u6210\u89e3\u51b3\u4e86\u201c\u4ef7\u503c\u4ea4\u6362\u201d\u7684\u5b89\u5168\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u5728 Next.js \u7684\u4e16\u754c\u91cc&#xff0c;\u590d\u6742\u4ea4\u4e92\u4e0d\u518d\u662f\u6563\u4e71\u7684\u4ee3\u7801\u788e\u7247&#xff0c;\u800c\u662f\u4e00\u6761\u88ab\u7cbe\u5fc3\u6253\u78e8\u7684\u6d41\u6c34\u7ebf\u3002\u5f53\u6570\u636e\u5728 URL\u3001\u72b6\u6001\u673a\u3001\u6570\u636e\u5e93\u548c\u7b2c\u4e09\u65b9\u670d\u52a1\u4e4b\u95f4\u4e1d\u6ed1\u6d41\u8f6c\u65f6&#xff0c;\u4f60\u6240\u4ea4\u4ed8\u7684\u4e0d\u4ec5\u4ec5\u662f\u4e00\u4e2a\u7f51\u9875&#xff0c;\u800c\u662f\u4e00\u4e2a\u5177\u5907\u5de5\u4e1a\u7ea7\u5f3a\u5ea6\u7684\u5546\u4e1a\u5f15\u64ce\u3002<\/p>\n<p>\u4ea4\u4e92\u7684\u5f8b\u52a8\u5df2\u7ecf\u5b8c\u7f8e&#xff0c;\u4f46\u6240\u6709\u8fd9\u4e9b\u52a8\u6001\u6570\u636e\u7684\u5f52\u5bbf&#xff0c;\u90fd\u5728\u4e8e\u6df1\u5c42\u7684\u6301\u4e45\u5316\u3002\u5982\u4f55\u8ba9\u590d\u6742\u7684\u5173\u7cfb\u578b\u6570\u636e\u5728\u6211\u4eec\u7684\u638c\u63a7\u4e0b\u6709\u5e8f\u6392\u5217&#xff1f;\u5982\u4f55\u8ba9\u6570\u636e\u5e93\u7684\u64cd\u4f5c\u50cf\u5199 TypeScript \u4e00\u6837\u62e5\u6709\u5b8c\u7f8e\u7684\u7c7b\u578b\u68c0\u67e5&#xff1f;\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u63a2\u7d22\u7684\u201c\u5168\u6808\u4e4b\u57fa\u201d\u2014\u2014\u6570\u636e\u5e93\u8054\u52a8&#xff1a;\u4f7f\u7528 Prisma \u6216 Drizzle ORM \u64cd\u4f5c\u5173\u7cfb\u578b\u6570\u636e\u5e93\u3002\u60a8\u51c6\u5907\u597d\u4e3a\u4f60\u7684\u5546\u57ce\u7cfb\u7edf\u6253\u9020\u6700\u7a33\u56fa\u7684\u201c\u6570\u5b57\u5730\u57fa\u201d\u4e86\u5417&#xff1f;<\/p>\n<h3>11.3 \u6570\u636e\u5e93\u8054\u52a8 \u2014\u2014 Prisma \u4e0e Drizzle \u7684\u535a\u5f08&#xff1a;\u6784\u5efa\u7c7b\u578b\u5b89\u5168\u7684\u751f\u4ea7\u7ea7\u5730\u57fa<\/h3>\n<p>\u5982\u679c\u8bf4 UI \u662f\u5546\u57ce\u7684\u76ae\u80a4&#xff0c;\u72b6\u6001\u7ba1\u7406\u662f\u795e\u7ecf&#xff0c;\u90a3\u4e48\u6570\u636e\u5e93&#xff08;Database&#xff09;\u5c31\u662f\u6574\u5ea7\u5546\u4e1a\u5927\u53a6\u7684\u201c\u94a2\u7b4b\u6df7\u51dd\u571f\u201d\u3002\u5728\u7535\u5546\u8fd9\u4e2a\u5bf9\u6570\u636e\u4e00\u81f4\u6027\u8981\u6c42\u8fd1\u4e4e\u82db\u523b\u7684\u9886\u57df&#xff0c;\u4e00\u6b21\u5e93\u5b58\u7684\u8d85\u5356\u3001\u4e00\u5f20\u8ba2\u5355\u7684\u4e22\u5931\u3001\u751a\u81f3\u662f\u4e00\u4e2a\u5b57\u6bb5\u7c7b\u578b\u7684\u504f\u5dee&#xff0c;\u90fd\u53ef\u80fd\u5bfc\u81f4\u707e\u96be\u6027\u7684\u5546\u4e1a\u540e\u679c\u3002<\/p>\n<p>\u5728\u672c\u8282\u4e2d&#xff0c;\u6211\u4eec\u5c06\u544a\u522b\u539f\u59cb\u7684 SQL \u62fc\u63a5&#xff0c;\u8de8\u5165\u00a0ORM&#xff08;\u5bf9\u8c61\u5173\u7cfb\u6620\u5c04&#xff09;\u00a0\u7684\u73b0\u4ee3\u7eaa\u5143\u3002\u6211\u4eec\u5c06\u6df1\u5165\u63a2\u8ba8\u00a0Prisma\u00a0\u4e0e\u00a0Drizzle\u00a0\u8fd9\u4e24\u6b3e\u5212\u65f6\u4ee3\u5de5\u5177\u7684\u9009\u578b\u5fc3\u6cd5&#xff0c;\u5e76\u5b66\u4e60\u5982\u4f55\u5229\u7528 Next.js \u7684\u5168\u6808\u7279\u6027&#xff0c;\u5c06\u5173\u7cfb\u578b\u6570\u636e\u5e93\u7684\u64cd\u4f5c\u8f6c\u5316\u4e3a\u6781\u7b80\u4e14\u7c7b\u578b\u5b89\u5168\u7684 TypeScript \u8c03\u7528\u3002<\/p>\n<p>\u4e00\u3001 \u9009\u578b\u7684\u4fee\u884c&#xff1a;Prisma \u7684\u539a\u91cd\u4e0e Drizzle \u7684\u7075\u52a8<\/p>\n<p>\u5728\u5168\u6808\u4e13\u5bb6\u7684\u5de5\u5177\u7bb1\u91cc&#xff0c;\u6ca1\u6709\u7edd\u5bf9\u7684\u201c\u6700\u597d\u201d&#xff0c;\u53ea\u6709\u6700\u9002\u5408\u4e1a\u52a1\u573a\u666f\u7684\u201c\u6700\u4f18\u201d\u3002<\/p>\n<p>1. Prisma&#xff1a;\u5f00\u53d1\u8005\u4f53\u9a8c\u7684\u5dc5\u5cf0<\/p>\n<p>Prisma \u50cf\u662f\u4e00\u4f4d\u7ecf\u9a8c\u4e30\u5bcc\u7684\u201c\u8001\u7ba1\u5bb6\u201d\u3002\u5b83\u901a\u8fc7\u72ec\u521b\u7684\u00a0.prisma\u00a0\u6587\u4ef6\u5b9a\u4e49 Schema&#xff0c;\u5e76\u81ea\u52a8\u751f\u6210\u4e00\u6574\u5957\u7c7b\u578b\u6781\u5176\u4e25\u5bc6\u7684 Client\u3002<\/p>\n<ul>\n<li>\n<p>\u6838\u5fc3\u4f18\u52bf&#xff1a;\u6781\u5ea6\u4e1d\u6ed1\u7684\u5f00\u53d1\u4f53\u9a8c\u3002\u5b83\u7684\u53ef\u89c6\u5316\u5de5\u5177 Prisma Studio \u8ba9\u6570\u636e\u7ba1\u7406\u53d8\u5f97\u5982\u540c\u64cd\u4f5c Excel \u822c\u76f4\u89c2\u3002<\/p>\n<\/li>\n<li>\n<p>\u9002\u7528\u573a\u666f&#xff1a;\u5bf9\u5f00\u53d1\u6548\u7387\u8981\u6c42\u6781\u9ad8\u3001\u4e1a\u52a1\u903b\u8f91\u590d\u6742\u3001\u4e14\u5bf9\u51b7\u542f\u52a8\u5ef6\u8fdf&#xff08;Cold Start&#xff09;\u4e0d\u90a3\u4e48\u654f\u611f\u7684\u4f20\u7edf\u670d\u52a1\u5668\u6216\u957f\u8fde\u63a5\u73af\u5883\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. Drizzle ORM&#xff1a;\u8ffd\u6c42\u6781\u81f4\u7684\u201c\u88f8\u673a\u201d\u6027\u80fd<\/p>\n<p>\u5982\u679c\u8bf4 Prisma \u662f\u81ea\u52a8\u6321\u8c6a\u8f66&#xff0c;Drizzle \u5c31\u662f\u4e00\u8f86\u8ffd\u6c42\u901f\u5ea6\u6781\u9650\u7684 F1 \u8d5b\u8f66\u3002\u5b83\u5ba3\u79f0\u201c\u5982\u679c\u4f60\u61c2 SQL&#xff0c;\u4f60\u5c31\u61c2 Drizzle\u201d\u3002<\/p>\n<ul>\n<li>\n<p>\u6838\u5fc3\u4f18\u52bf&#xff1a;\u96f6\u62bd\u8c61\u5f00\u9500\u3002Drizzle \u7684\u4f53\u79ef\u6781\u5176\u8f7b\u91cf&#xff0c;\u4e14\u5b8c\u5168\u652f\u6301 Edge Runtime\u3002\u5728 Serverless \u73af\u5883\u4e0b&#xff0c;\u5b83\u51e0\u4e4e\u6ca1\u6709\u51b7\u542f\u52a8\u5ef6\u8fdf\u3002<\/p>\n<\/li>\n<li>\n<p>\u9002\u7528\u573a\u666f&#xff1a;\u5bf9\u6027\u80fd\u6709\u75c5\u6001\u8ffd\u6c42\u3001\u90e8\u7f72\u5728\u8fb9\u7f18\u8282\u70b9\u3001\u6216\u8005\u5e0c\u671b\u5bf9\u751f\u6210\u7684 SQL \u8bed\u53e5\u62e5\u6709\u7edd\u5bf9\u63a7\u5236\u6743\u7684\u9879\u76ee\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e8c\u3001 \u5efa\u6a21\u7684\u827a\u672f&#xff1a;\u5173\u7cfb\u578b\u6570\u636e\u7684\u201c\u7075\u9b42\u84dd\u56fe\u201d<\/p>\n<p>\u5728\u7535\u5546\u7cfb\u7edf\u4e2d&#xff0c;\u6570\u636e\u5e93\u5efa\u6a21\u662f\u51b3\u5b9a\u7cfb\u7edf\u6269\u5c55\u6027\u7684\u5173\u952e\u3002\u4e00\u4e2a\u5178\u578b\u7684\u201c\u5546\u54c1-\u8ba2\u5355\u201d\u6a21\u578b\u9700\u8981\u5904\u7406\u590d\u6742\u7684\u4e00\u5bf9\u591a&#xff08;One-to-Many&#xff09;\u4e0e\u591a\u5bf9\u591a&#xff08;Many-to-Many&#xff09;\u5173\u7cfb\u3002<\/p>\n<ul>\n<li>\n<p>\u4ea7\u54c1 (Product) \u4e0e \u89c4\u683c (Variant)&#xff1a;\u4e00\u4e2a\u4ea7\u54c1\u5bf9\u5e94\u591a\u4e2a\u89c4\u683c&#xff08;\u5982\u989c\u8272\u3001\u5c3a\u7801&#xff09;&#xff0c;\u8fd9\u662f\u5178\u578b\u7684\u4e00\u5bf9\u591a\u3002<\/p>\n<\/li>\n<li>\n<p>\u8ba2\u5355 (Order) \u4e0e \u4ea7\u54c1 (Product)&#xff1a;\u901a\u8fc7\u201c\u8ba2\u5355\u9879 (OrderItem)\u201d\u8fd9\u4e00\u4e2d\u95f4\u8868&#xff0c;\u5efa\u7acb\u8d77\u591a\u5bf9\u591a\u7684\u8fde\u63a5\u3002<\/p>\n<\/li>\n<\/ul>\n<p>Prisma \u5efa\u6a21\u793a\u4f8b&#xff1a;<\/p>\n<p>model Product {<br \/>\n  id          String    &#064;id &#064;default(cuid())<br \/>\n  name        String<br \/>\n  description String<br \/>\n  variants    Variant[] \/\/ \u5173\u8054\u89c4\u683c<br \/>\n  orders      OrderItem[]<br \/>\n}<\/p>\n<p>model Variant {<br \/>\n  id        String  &#064;id &#064;default(cuid())<br \/>\n  sku       String  &#064;unique<br \/>\n  price     Decimal<br \/>\n  inventory Int     \/\/ \u5e93\u5b58&#xff1a;\u5e76\u53d1\u7ade\u4e89\u7684\u7126\u70b9<br \/>\n  productId String<br \/>\n  product   Product &#064;relation(fields: [productId], references: [id])<br \/>\n}<\/p>\n<p>\u4f18\u79c0\u7684\u5efa\u6a21\u4e0d\u662f\u5728\u5b58\u50a8\u6570\u636e&#xff0c;\u800c\u662f\u5728\u63cf\u8ff0\u4e1a\u52a1\u7684\u89c4\u5219\u3002<\/p>\n<p>\u4e09\u3001 \u5b9e\u6218\u8054\u52a8&#xff1a;Server Actions \u4e2d\u7684\u4e8b\u52a1\u5904\u7406<\/p>\n<p>\u7535\u5546\u7cfb\u7edf\u6700\u60ca\u5fc3\u52a8\u9b44\u7684\u64cd\u4f5c\u83ab\u8fc7\u4e8e\u201c\u4e0b\u5355\u201d\u3002\u8fd9\u6d89\u53ca\u6263\u51cf\u5e93\u5b58\u3001\u521b\u5efa\u8ba2\u5355\u3001\u8bb0\u5f55\u652f\u4ed8\u6d41\u6c34&#xff0c;\u4e09\u4e2a\u64cd\u4f5c\u5fc5\u987b\u201c\u540c\u751f\u5171\u6b7b\u201d\u2014\u2014\u8fd9\u5c31\u662f\u6570\u636e\u5e93\u4e8b\u52a1&#xff08;Transaction&#xff09;\u7684\u610f\u4e49\u3002<\/p>\n<p>\u5728 Next.js \u7684 Server Actions \u4e2d&#xff0c;\u6211\u4eec\u53ef\u4ee5\u4f18\u96c5\u5730\u5c01\u88c5\u8fd9\u4e00\u8fc7\u7a0b&#xff1a;<\/p>\n<p>\/\/ app\/actions\/create-order.ts<br \/>\nexport async function createOrder(cartItems: CartItem[]) {<br \/>\n  return await db.$transaction(async (tx) &#061;&gt; {<br \/>\n    \/\/ 1. \u904d\u5386\u8d2d\u7269\u8f66&#xff0c;\u9010\u4e00\u6821\u9a8c\u5e76\u6263\u51cf\u5e93\u5b58<br \/>\n    for (const item of cartItems) {<br \/>\n      const variant &#061; await tx.variant.update({<br \/>\n        where: { id: item.variantId, inventory: { gte: item.quantity } },<br \/>\n        data: { inventory: { decrement: item.quantity } }<br \/>\n      });<br \/>\n      if (!variant) throw new Error(&#034;\u5e93\u5b58\u4e0d\u8db3&#034;);<br \/>\n    }<\/p>\n<p>    \/\/ 2. \u521b\u5efa\u8ba2\u5355\u4e3b\u8868<br \/>\n    const order &#061; await tx.order.create({<br \/>\n      data: { \/* &#8230;\u8ba2\u5355\u8be6\u60c5 *\/ }<br \/>\n    });<\/p>\n<p>    return order;<br \/>\n  });<br \/>\n}<\/p>\n<p>\u5173\u952e\u70b9&#xff1a;\u6211\u4eec\u4f7f\u7528\u4e86\u4e50\u89c2\u9501&#xff08;Optimistic Locking&#xff09;\u7684\u601d\u60f3&#xff0c;\u5728\u00a0update\u00a0\u7684\u00a0where\u00a0\u6761\u4ef6\u4e2d\u76f4\u63a5\u5224\u65ad\u5e93\u5b58\u3002\u8fd9\u6bd4\u5148\u67e5\u8be2\u518d\u4fee\u6539\u66f4\u80fd\u6709\u6548\u9632\u6b62\u9ad8\u5e76\u53d1\u4e0b\u7684\u8d85\u5356\u95ee\u9898\u3002<\/p>\n<p>\u56db\u3001 \u6027\u80fd\u7684\u6781\u5883&#xff1a;\u7d22\u5f15\u3001\u9884\u52a0\u8f7d\u4e0e\u8fb9\u7f18\u4fa7\u7f13\u5b58<\/p>\n<p>\u5f53\u6570\u636e\u5e93\u8fbe\u5230\u767e\u4e07\u7ea7\u6570\u636e\u91cf\u65f6&#xff0c;\u6bcf\u4e00\u6beb\u79d2\u7684\u67e5\u8be2\u90fd\u662f\u5bf9\u670d\u52a1\u5668\u6210\u672c\u7684\u6311\u6218\u3002<\/p>\n<li>\n<p>\u7d22\u5f15 (Index) \u7684\u7cbe\u51c6\u6253\u51fb&#xff1a; \u4e3a\u7ecf\u5e38\u641c\u7d22\u7684\u00a0slug\u3001sku\u00a0\u4ee5\u53ca\u7528\u4e8e\u7b5b\u9009\u7684\u00a0category_id\u00a0\u5efa\u7acb\u7d22\u5f15\u3002\u5728 Prisma\/Drizzle \u4e2d&#xff0c;\u8fd9\u53ea\u9700\u5728 Schema \u4e2d\u6dfb\u52a0\u4e00\u4e2a\u5c5e\u6027&#xff0c;\u4f46\u5b83\u80fd\u8ba9\u67e5\u8be2\u901f\u5ea6\u4ece\u201c\u6f2b\u957f\u626b\u63cf\u201d\u53d8\u4e3a\u201c\u77ac\u95f4\u5b9a\u4f4d\u201d\u3002<\/p>\n<\/li>\n<li>\n<p>\u907f\u514d N&#043;1 \u67e5\u8be2&#xff1a; \u5229\u7528 ORM \u7684\u00a0include\u00a0\u6216\u00a0with\u00a0\u8bed\u6cd5\u8fdb\u884c\u9884\u52a0\u8f7d&#xff08;Eager Loading&#xff09;\u3002\u4e00\u6b21\u6027\u5e26\u51fa\u5546\u54c1\u53ca\u5176\u6240\u6709\u89c4\u683c&#xff0c;\u800c\u4e0d\u662f\u5728\u5faa\u73af\u4e2d\u53cd\u590d\u8bf7\u6c42\u6570\u636e\u5e93\u3002<\/p>\n<\/li>\n<li>\n<p>\u8fb9\u7f18\u4fa7\u67e5\u8be2\u91cd\u5199&#xff1a; \u5229\u7528 Next.js \u7684\u6570\u636e\u7f13\u5b58&#xff08;Data Cache&#xff09;\u914d\u5408 ORM\u3002\u5bf9\u4e8e\u4e0d\u5e38\u53d8\u52a8\u7684\u5546\u54c1\u5206\u7c7b\u548c\u8be6\u60c5&#xff0c;\u5728\u83b7\u53d6\u6570\u636e\u540e\u6807\u8bb0\u00a0revalidate\u00a0\u65f6\u95f4&#xff0c;\u8ba9\u6570\u636e\u9a7b\u7559\u5728\u8fb9\u7f18\u8282\u70b9&#xff0c;\u751a\u81f3\u65e0\u9700\u89e6\u78b0\u6570\u636e\u5e93\u3002<\/p>\n<\/li>\n<p>\u4e94\u3001 \u603b\u7ed3&#xff1a;\u6570\u5b57\u4e16\u754c\u7684\u201c\u951a\u70b9\u201d<\/p>\n<p>\u672c\u8282\u7684\u63a2\u7d22&#xff0c;\u5b8c\u6210\u4e86\u5546\u57ce\u7cfb\u7edf\u4ece\u201c\u52a8\u6001\u4ea4\u4e92\u201d\u5230\u201c\u6301\u4e45\u7a33\u5065\u201d\u7684\u6700\u540e\u62fc\u56fe\u3002<\/p>\n<ul>\n<li>\n<p>\u9009\u578b\u51b3\u5b9a\u4e86\u5f00\u53d1\u7684\u4e0a\u9650\u4e0e\u8fd0\u884c\u7684\u5e95\u9650&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u5efa\u6a21\u51b3\u5b9a\u4e86\u4e1a\u52a1\u7684\u7075\u6d3b\u6027&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u4e8b\u52a1\u51b3\u5b9a\u4e86\u5546\u4e1a\u7684\u4fe1\u8a89\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u5728 Next.js \u7684\u5168\u6808\u7586\u57df\u91cc&#xff0c;\u6570\u636e\u5e93\u4e0d\u518d\u662f\u4e00\u4e2a\u51b0\u51b7\u7684\u5b58\u50a8\u7f50&#xff0c;\u800c\u662f\u4e00\u4e2a\u4e0e\u4ee3\u7801\u6df1\u5ea6\u878d\u5408\u3001\u62e5\u6709\u5f3a\u7c7b\u578b\u7ea6\u675f\u3001\u80fd\u591f\u611f\u77e5\u4e1a\u52a1\u8109\u52a8\u7684\u6838\u5fc3\u7ec4\u4ef6\u3002\u5f53\u4f60\u80fd\u591f\u719f\u7ec3\u5730\u5728 Prisma \u7684\u4f18\u96c5\u4e0e Drizzle \u7684\u72c2\u91ce\u95f4\u5207\u6362&#xff0c;\u5f53\u4f60\u7684\u4e8b\u52a1\u903b\u8f91\u80fd\u4ece\u5bb9\u5e94\u5bf9\u79d2\u6740\u6d2a\u5cf0\u65f6&#xff0c;\u4f60\u4fbf\u771f\u6b63\u6784\u5efa\u8d77\u4e86\u4e00\u5ea7\u575a\u4e0d\u53ef\u6467\u7684\u9ad8\u6027\u80fd\u5546\u57ce\u4e2d\u67a2\u3002<\/p>\n<p>\u81f3\u6b64&#xff0c;\u7b2c\u5341\u4e00\u7ae0\u201c\u4ea4\u4e92\u5f0f\u7535\u5546\u201d\u5df2\u5168\u7bc7\u5706\u6ee1\u3002\u4ece\u201c\u72b6\u6001\u5f8b\u52a8\u201d\u5230\u201c\u590d\u6742\u535a\u5f08\u201d\u518d\u5230\u201c\u7a33\u56fa\u5730\u57fa\u201d&#xff0c;\u6211\u4eec\u5df2\u7ecf\u5b8c\u6210\u4e86\u4e00\u4e2a\u73b0\u4ee3\u5168\u6808\u5e94\u7528\u6700\u590d\u6742\u7684\u5f62\u6001\u3002<\/p>\n<p>\u4f46\u5728\u5168\u6808\u7684\u4e16\u754c\u91cc&#xff0c;\u5f00\u53d1\u5b8c\u6210\u4ec5\u4ec5\u662f\u5f00\u59cb\u3002\u5f53\u5343\u4e07\u7528\u6237\u6d8c\u5165&#xff0c;\u5982\u4f55\u4fdd\u8bc1\u7cfb\u7edf\u4e0d\u5d29\u6e83&#xff1f;\u5982\u4f55\u5b9e\u65f6\u6d1e\u5bdf\u6bcf\u4e00\u4e2a\u62a5\u9519&#xff1f;\u5982\u4f55\u8ba9\u90e8\u7f72\u50cf\u547c\u5438\u4e00\u6837\u81ea\u7136&#xff1f;\u63a5\u4e0b\u6765&#xff0c;\u6211\u4eec\u5c06\u5f00\u542f\u672c\u4e66\u7684\u7b2c\u5341\u4e8c\u7ae0\u2014\u2014\u5de5\u7a0b\u5316\u4e0e\u767b\u4ed9\u2014\u2014\u90e8\u7f72\u3001\u76d1\u63a7\u4e0e\u7ef4\u62a4\u3002\u60a8\u51c6\u5907\u597d\u8fce\u63a5\u771f\u5b9e\u4e16\u754c\u7684\u7ec8\u6781\u6d17\u793c\u4e86\u5417&#xff1f;<\/p>\n<h2>\u7b2c12\u7ae0&#xff1a;\u5de5\u7a0b\u5316\u4e0e\u767b\u4ed9\u2014\u2014\u90e8\u7f72\u3001\u76d1\u63a7\u4e0e\u7ef4\u62a4<\/h2>\n<ul>\n<li>\n<p>12.1 \u90e8\u7f72\u7684\u7ec8\u6781\u9009\u62e9&#xff1a;\u00a0Vercel \u5e73\u53f0\u7684\u539f\u751f\u9002\u914d\u4e0e\u8fb9\u7f18\u51fd\u6570<\/p>\n<\/li>\n<li>\n<p>12.2 \u201c\u9003\u79bb Vercel\u201d&#xff1a;\u00a0\u4f7f\u7528 Docker \u5c06 Next.js \u90e8\u7f72\u5230\u79c1\u6709\u4e91<\/p>\n<\/li>\n<li>\n<p>12.3 \u6027\u80fd\u5ea6\u91cf&#xff1a;\u00a0Core Web Vitals (LCP, FID, CLS) \u7684\u76d1\u63a7\u4e0e\u8c03\u4f18<\/p>\n<\/li>\n<li>\n<p>12.4 CI\/CD \u5de5\u4f5c\u6d41&#xff1a;\u00a0GitHub Actions \u81ea\u52a8\u5316\u6d4b\u8bd5\u4e0e\u90e8\u7f72<\/p>\n<\/li>\n<\/ul>\n<h3>12.1 \u90e8\u7f72\u7684\u7ec8\u6781\u9009\u62e9 \u2014\u2014 Vercel \u5e73\u53f0\u7684\u539f\u751f\u9002\u914d\u4e0e\u8fb9\u7f18\u51fd\u6570<\/h3>\n<p>\u5982\u679c\u8bf4\u4ee3\u7801\u7684\u7f16\u5199\u662f\u201c\u95ed\u5173\u4fee\u70bc\u201d&#xff0c;\u90a3\u4e48**\u90e8\u7f72&#xff08;Deployment&#xff09;**\u5c31\u662f\u201c\u7fbd\u5316\u767b\u4ed9\u201d\u3002\u5728\u7ecf\u5386\u4e86\u4ece\u72b6\u6001\u7ba1\u7406\u5230\u6570\u636e\u5e93\u8054\u52a8\u7684\u4e5d\u91cd\u96f7\u52ab\u540e&#xff0c;\u4f60\u7684\u5e94\u7528\u7ec8\u4e8e\u8981\u8fce\u63a5\u771f\u5b9e\u4e92\u8054\u7f51\u6d41\u91cf\u7684\u6d17\u793c\u3002<\/p>\n<p>\u5728\u4f17\u591a\u7684\u90e8\u7f72\u65b9\u6848\u4e2d&#xff0c;Vercel\u00a0\u7edd\u975e\u4ec5\u4ec5\u662f\u4e00\u4e2a\u6258\u7ba1\u5e73\u53f0&#xff0c;\u5b83\u662f Next.js \u7684\u201c\u6bcd\u4f53\u201d&#xff0c;\u662f\u8fd9\u5957\u5168\u6808\u54f2\u5b66\u5728\u7269\u7406\u4e16\u754c\u6700\u5b8c\u7f8e\u7684\u6620\u5c04\u300212.1 \u8282\u6211\u4eec\u5c06\u63a2\u8ba8\u4e3a\u4f55 Vercel \u662f Next.js \u7684\u7ec8\u6781\u5f52\u5bbf&#xff0c;\u4ee5\u53ca\u5b83\u5982\u4f55\u5229\u7528**\u8fb9\u7f18\u51fd\u6570&#xff08;Edge Functions&#xff09;**\u6253\u7834\u5730\u7406\u4e0e\u901f\u5ea6\u7684\u684e\u688f&#xff0c;\u8ba9\u4f60\u7684\u5e94\u7528\u5728\u77ac\u606f\u4e4b\u95f4\u89e6\u8fbe\u5168\u7403\u3002<\/p>\n<p>\u4e00\u3001 \u6bcd\u4f53\u5171\u751f&#xff1a;Vercel \u4e0e Next.js \u7684\u8840\u8109\u8fde\u63a5<\/p>\n<p>Vercel \u4e4b\u4e8e Next.js&#xff0c;\u5982\u540c\u786c\u4ef6\u4e4b\u4e8e\u64cd\u4f5c\u7cfb\u7edf\u3002\u5b83\u4e0d\u4ec5\u4ec5\u662f\u201c\u4e0a\u4f20\u4ee3\u7801\u201d&#xff0c;\u800c\u662f\u4e00\u79cd\u67b6\u6784\u7ea7\u522b\u7684\u534f\u540c\u3002<\/p>\n<p>1. \u96f6\u914d\u7f6e\u7684\u201c\u539f\u751f\u611f\u201d<\/p>\n<p>\u5f53\u4f60\u5c06 Next.js \u9879\u76ee\u63a8\u9001\u5230 Vercel&#xff0c;\u5b83\u4f1a\u77ac\u95f4\u8bc6\u522b\u51fa\u4f60\u7684 SSR \u8def\u7531\u3001\u9759\u6001\u8d44\u6e90\u3001Image \u4f18\u5316\u8bf7\u6c42\u4ee5\u53ca API \u8def\u7531\u3002\u5b83\u4f1a\u81ea\u52a8\u5c06\u8fd9\u4e9b\u4ee3\u7801\u62c6\u89e3&#xff0c;\u5206\u53d1\u5230\u6700\u9002\u5408\u5b83\u4eec\u7684\u6267\u884c\u73af\u5883&#xff1a;\u9759\u6001\u5185\u5bb9\u8fdb\u5165\u00a0Global CDN&#xff0c;\u52a8\u6001\u903b\u8f91\u8fdb\u5165\u00a0Serverless Functions&#xff0c;\u800c\u4e2d\u95f4\u4ef6\u5219\u9a7b\u7559\u5728\u00a0Edge Network\u3002<\/p>\n<p>2. \u201c\u9884\u89c8\u90e8\u7f72\u201d\u7684\u5de5\u7a0b\u7f8e\u5b66<\/p>\n<p>Vercel \u4e3a\u6bcf\u4e00\u4e2a Pull Request \u81ea\u52a8\u751f\u6210\u4e00\u4e2a\u72ec\u4e00\u65e0\u4e8c\u7684\u9884\u89c8\u94fe\u63a5\u3002\u8fd9\u79cd\u201c\u6240\u89c1\u5373\u6240\u5f97\u201d\u7684\u534f\u4f5c\u6a21\u5f0f&#xff0c;\u8ba9\u56e2\u961f\u5ba1\u9605\u4e0d\u518d\u662f\u770b\u67af\u71e5\u7684\u4ee3\u7801&#xff0c;\u800c\u662f\u76f4\u63a5\u4ea4\u4e92\u771f\u5b9e\u7684\u6210\u679c\u3002\u8fd9\u662f\u5de5\u7a0b\u5316\u601d\u7ef4\u5bf9\u5f00\u53d1\u6548\u7387\u7684\u4e00\u6b21\u964d\u7ef4\u6253\u51fb\u3002<\/p>\n<p>\u4e8c\u3001 \u6781\u901f\u7684\u6781\u5883&#xff1a;\u8fb9\u7f18\u51fd\u6570 (Edge Functions) \u7684\u9b54\u529b<\/p>\n<p>\u5728\u4f20\u7edf\u7684\u4e91\u67b6\u6784\u4e2d&#xff0c;\u8bf7\u6c42\u5f80\u5f80\u8981\u7a7f\u8d8a\u534a\u4e2a\u5730\u7403\u5230\u8fbe\u4e2d\u5fc3\u673a\u623f\u3002\u800c\u00a0Edge Functions\u00a0\u5f7b\u5e95\u98a0\u8986\u4e86\u8fd9\u4e00\u8def\u5f84\u3002<\/p>\n<p>1. \u6beb\u79d2\u7ea7\u7684\u201c\u611f\u5b98\u9769\u547d\u201d<\/p>\n<p>\u8fb9\u7f18\u51fd\u6570\u8fd0\u884c\u5728\u79bb\u7528\u6237\u6700\u8fd1\u7684 CDN \u8282\u70b9\u4e0a\u3002\u5b83\u91c7\u7528\u8f7b\u91cf\u7ea7\u7684 V8 \u5f15\u64ce&#xff08;Edge Runtime&#xff09;&#xff0c;\u6ca1\u6709\u4f20\u7edf Serverless \u7684\u51b7\u542f\u52a8&#xff08;Cold Start&#xff09;\u5305\u88b1\u3002<\/p>\n<ul>\n<li>\n<p>\u573a\u666f&#xff1a;\u4e2a\u6027\u5316\u5b9a\u4ef7\u3001\u5730\u7406\u4f4d\u7f6e\u91cd\u5b9a\u5411\u3001A\/B \u6d4b\u8bd5\u3002<\/p>\n<\/li>\n<li>\n<p>\u5fc3\u6cd5&#xff1a;\u5728\u8fb9\u7f18\u4fa7\u5904\u7406\u903b\u8f91&#xff0c;\u610f\u5473\u7740\u7528\u6237\u5728\u8bf7\u6c42\u53d1\u51fa\u7684\u90a3\u4e00\u523b&#xff0c;\u903b\u8f91\u5c31\u5df2\u7ecf\u5728\u4ed6\u4eec\u8eab\u8fb9\u7684\u57fa\u7ad9\u91cc\u6267\u884c\u5b8c\u6bd5\u4e86\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u4ece Serverless \u5230 Edge-first<\/p>\n<p>\u5168\u6808\u4e13\u5bb6\u7684\u8fdb\u5316&#xff0c;\u4f53\u73b0\u5728\u5bf9\u6267\u884c\u73af\u5883\u7684\u7cbe\u51c6\u8c03\u914d\u3002<\/p>\n<ul>\n<li>\n<p>Serverless Functions (Node.js)&#xff1a;\u9002\u5408\u9700\u8981\u590d\u6742\u5e93\u652f\u6301\u3001\u957f\u94fe\u63a5\u6570\u636e\u5e93\u6216\u91cd\u5ea6\u8ba1\u7b97\u7684\u573a\u666f\u3002<\/p>\n<\/li>\n<li>\n<p>Edge Functions&#xff1a;\u9002\u5408\u9700\u8981\u6781\u81f4\u54cd\u5e94\u3001\u5904\u7406 HTTP Header \u6216\u7b80\u5355\u52a8\u6001\u5185\u5bb9\u7684\u573a\u666f\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e09\u3001 \u6027\u80fd\u7684\u95ed\u73af&#xff1a;\u81ea\u52a8\u5316\u7684\u201c\u4e94\u611f\u201d\u4f18\u5316<\/p>\n<p>Vercel \u5e73\u53f0\u5728\u90e8\u7f72\u8fc7\u7a0b\u4e2d&#xff0c;\u6697\u4e2d\u4e3a Next.js \u690d\u5165\u4e86\u4e00\u7cfb\u5217\u201c\u8d85\u80fd\u529b\u201d&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u667a\u80fd\u7f13\u5b58\u91cd\u751f\u6548 (ISR)&#xff1a;\u5b83\u80fd\u7cbe\u51c6\u7ba1\u7406\u6211\u4eec\u5728\u7b2c 6 \u7ae0\u8ba8\u8bba\u8fc7\u7684\u589e\u91cf\u9759\u6001\u518d\u751f\u3002\u5f53\u6570\u636e\u5e93\u66f4\u65b0&#xff0c;Vercel \u786e\u4fdd\u5168\u7403\u8282\u70b9\u4e0a\u7684\u8fc7\u65f6\u7f13\u5b58\u88ab\u7cbe\u51c6\u5254\u9664&#xff0c;\u5b9e\u73b0\u201c\u9759\u6001\u901f\u5ea6&#xff0c;\u52a8\u6001\u5185\u5bb9\u201d\u7684\u7edf\u4e00\u3002<\/p>\n<\/li>\n<li>\n<p>\u539f\u751f\u56fe\u50cf\u4f18\u5316\u7f51\u5173&#xff1a;Vercel \u62e5\u6709\u4e13\u95e8\u7684\u56fe\u50cf\u5904\u7406\u96c6\u7fa4\u3002\u6240\u6709\u7684\u00a0next\/image\u00a0\u8bf7\u6c42\u5728\u8fb9\u7f18\u4fa7\u88ab\u81ea\u52a8\u8f6c\u6362\u683c\u5f0f\u4e0e\u5c3a\u5bf8&#xff0c;\u5927\u5e45\u964d\u4f4e\u4e3b\u670d\u52a1\u5668\u7684 CPU \u8d1f\u8f7d\u3002<\/p>\n<\/li>\n<li>\n<p>\u5168\u7403\u6d41\u91cf\u8c03\u5ea6&#xff1a;\u5b83\u80fd\u81ea\u52a8\u611f\u77e5\u6d41\u91cf\u6d2a\u5cf0&#xff0c;\u5e76\u52a8\u6001\u6269\u5c55\u5b9e\u4f8b\u3002\u65e0\u8bba\u662f\u4e00\u4e2a\u7528\u6237\u8fd8\u662f\u5343\u4e07\u7ea7\u7528\u6237&#xff0c;\u4f60\u7684\u67b6\u6784\u90fd\u80fd\u5728 Vercel \u7684\u5f39\u6027\u652f\u6491\u4e0b\u7a33\u5982\u6cf0\u5c71\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u56db\u3001 \u4e13\u5bb6\u89c6\u70b9&#xff1a;\u5728 Vercel \u4e0a\u5b9e\u73b0\u201c\u6781\u81f4\u6027\u4ef7\u6bd4\u201d<\/p>\n<p>\u90e8\u7f72\u4e0d\u53ea\u662f\u4e3a\u4e86\u8fd0\u884c&#xff0c;\u66f4\u662f\u4e3a\u4e86\u53ef\u6301\u7eed\u7684\u8fd0\u8425\u3002\u4f5c\u4e3a\u4e00\u540d\u9876\u7ea7\u5168\u6808\u5de5\u7a0b\u5e08&#xff0c;\u4f60\u9700\u8981\u638c\u63e1 Vercel \u7684\u201c\u7701\u94b1\u4e0e\u52a0\u901f\u201d\u827a\u672f&#xff1a;<\/p>\n<li>\n<p>\u5584\u7528 Data Cache&#xff1a;\u5229\u7528 Next.js \u7684\u6570\u636e\u7f13\u5b58\u5c42&#xff0c;\u51cf\u5c11\u5bf9\u6602\u8d35\u6570\u636e\u5e93\u7684\u76f4\u63a5\u8bf7\u6c42\u3002Vercel \u4f1a\u81ea\u52a8\u6301\u4e45\u5316\u8fd9\u4e9b\u7f13\u5b58&#xff0c;\u8ba9\u4f60\u7684\u514d\u8d39\u914d\u989d\u652f\u6491\u66f4\u591a\u7684\u8bbf\u95ee\u3002<\/p>\n<\/li>\n<li>\n<p>\u914d\u7f6e\u5408\u7406\u7684 Stale-While-Revalidate&#xff1a;\u901a\u8fc7 Header \u63a7\u5236&#xff0c;\u8ba9\u65e7\u9875\u9762\u5728\u540e\u53f0\u66f4\u65b0\u7684\u540c\u65f6\u4f9d\u7136\u80fd\u77ac\u95f4\u5c55\u793a\u3002<\/p>\n<\/li>\n<li>\n<p>\u73af\u5883\u9694\u79bb\u7684\u5c0a\u4e25&#xff1a;\u5229\u7528 Vercel Environment Variables \u7684 Production\u3001Preview \u548c Development \u9694\u79bb&#xff0c;\u786e\u4fdd\u6d4b\u8bd5\u73af\u5883\u7684 API Key \u6c38\u8fdc\u4e0d\u4f1a\u89e6\u78b0\u751f\u4ea7\u73af\u5883\u7684\u6570\u636e\u5e93\u3002<\/p>\n<\/li>\n<p>\u4e94\u3001 \u603b\u7ed3&#xff1a;\u7fbd\u5316\u540e\u7684\u7b2c\u4e00\u6b65<\/p>\n<p>\u672c\u8282\u6240\u8bb2\u8ff0\u7684&#xff0c;\u662f\u5173\u4e8e\u201c\u5f52\u5bbf\u201d\u7684\u9009\u62e9\u3002\u9009\u62e9 Vercel&#xff0c;\u672c\u8d28\u4e0a\u662f\u9009\u62e9\u4e86\u4e00\u5957\u201c\u4e0d\u7528\u7ef4\u62a4\u7684\u67b6\u6784\u201d\u3002\u5b83\u8ba9\u5f00\u53d1\u8005\u4ece\u7e41\u6742\u7684 Nginx \u914d\u7f6e\u3001SSL \u8bc1\u4e66\u66f4\u65b0\u3001\u8d1f\u8f7d\u5747\u8861\u8ba1\u7b97\u4e2d\u89e3\u8131\u51fa\u6765\u3002\u8fd9\u79cd\u89e3\u8131\u5e76\u975e\u9003\u907f&#xff0c;\u800c\u662f\u4e00\u79cd\u4e13\u6ce8\u4e8e\u4e1a\u52a1\u4ef7\u503c\u7684\u8fdb\u9636\u3002<\/p>\n<p>\u201c\u90e8\u7f72\u201d\u4e0d\u662f\u7ec8\u70b9&#xff0c;\u800c\u662f\u5e94\u7528\u751f\u547d\u7684\u8d77\u70b9\u3002\u00a0\u5f53\u4f60\u7684\u4ee3\u7801\u5728 Vercel \u7684\u5168\u7403\u7f51\u7edc\u4e2d\u5f00\u59cb\u8df3\u52a8&#xff0c;\u5f53\u8fb9\u7f18\u51fd\u6570\u5728\u51e0\u6beb\u79d2\u5185\u56de\u5e94\u7528\u6237\u7684\u671f\u5f85&#xff0c;\u4f60\u6240\u6784\u5efa\u7684\u5c31\u4e0d\u518d\u662f\u4e00\u4e2a\u672c\u5730\u7684\u73a9\u5177&#xff0c;\u800c\u662f\u4e00\u4e2a\u5177\u5907\u5168\u7403\u7ade\u4e89\u529b\u7684\u3001\u6709\u751f\u547d\u529b\u7684\u6570\u5b57\u5b9e\u4f53\u3002<\/p>\n<p>Vercel \u867d\u597d&#xff0c;\u4f46\u5e76\u975e\u6240\u6709\u573a\u666f\u90fd\u9002\u7528\u3002\u5f53\u4f60\u9762\u4e34\u6570\u636e\u51fa\u5883\u5408\u89c4\u3001\u6781\u81f4\u6210\u672c\u63a7\u5236\u3001\u6216\u7279\u5b9a\u7684\u5185\u7f51\u73af\u5883\u65f6&#xff0c;\u4f60\u9700\u8981\u62e5\u6709\u968f\u65f6\u201c\u9003\u79bb\u201d\u7684\u80fd\u529b\u3002\u5982\u4f55\u5c06 Next.js \u4f18\u96c5\u5730\u6253\u5305\u8fdb Docker \u5bb9\u5668&#xff0c;\u90e8\u7f72\u5230\u4efb\u4f55\u4f60\u60f3\u53bb\u7684\u5730\u65b9&#xff1f;\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u63a2\u8ba8\u7684\u201c\u81ea\u7531\u4e4b\u6218\u201d\u2014\u2014\u201c\u9003\u79bb Vercel\u201d&#xff1a;\u4f7f\u7528 Docker \u5c06 Next.js \u90e8\u7f72\u5230\u79c1\u6709\u4e91\u3002\u60a8\u51c6\u5907\u597d\u638c\u63e1\u5168\u6808\u90e8\u7f72\u7684\u81ea\u4e3b\u6743\u4e86\u5417&#xff1f;<\/p>\n<h3>12.2 \u201c\u9003\u79bb Vercel\u201d \u2014\u2014 \u4f7f\u7528 Docker \u5c06 Next.js \u90e8\u7f72\u5230\u79c1\u6709\u4e91<\/h3>\n<p>\u5982\u679c\u8bf4 Vercel \u662f\u4e3a Next.js \u91cf\u8eab\u5b9a\u5236\u7684\u201c\u7cbe\u88c5\u4fee\u516c\u5bd3\u201d&#xff0c;\u90a3\u4e48\u00a0Docker\u00a0\u5c31\u662f\u4e00\u5957\u53ef\u4ee5\u968f\u8eab\u643a\u5e26\u3001\u5728\u4efb\u4f55\u571f\u5730\u4e0a\u90fd\u80fd\u77ac\u95f4\u590d\u539f\u7684\u201c\u6a21\u5757\u5316\u65b9\u821f\u201d\u3002<\/p>\n<p>\u5728\u5168\u6808\u5f00\u53d1\u7684\u8fdb\u9636\u8def\u4e0a&#xff0c;Vercel \u5e26\u6765\u7684\u4fbf\u5229\u6027\u56fa\u7136\u8ff7\u4eba&#xff0c;\u4f46\u5728\u67d0\u4e9b\u65f6\u523b\u2014\u2014\u51fa\u4e8e\u6570\u636e\u5408\u89c4\u7684\u521a\u9700\u3001\u4e3a\u4e86\u538b\u69a8\u6781\u81f4\u7684\u786c\u4ef6\u6027\u4ef7\u6bd4\u3001\u6216\u662f\u4e3a\u4e86\u5728\u590d\u6742\u7684\u5185\u7f51\u96c6\u7fa4\u4e2d\u6a2a\u5411\u6269\u5c55\u2014\u2014\u6211\u4eec\u5fc5\u987b\u62e5\u6709**\u201c\u9003\u79bb\u201d**\u7684\u80fd\u529b\u3002\u672c\u8282\u5c06\u5e26\u4f60\u8de8\u8d8a\u5e73\u53f0\u7684\u85e9\u7bf1&#xff0c;\u5b66\u4e60\u5982\u4f55\u901a\u8fc7\u5bb9\u5668\u5316\u6280\u672f&#xff0c;\u5c06 Next.js \u8f6c\u5316\u4e3a\u4e00\u4e2a\u6807\u51c6\u5316\u7684\u5de5\u4e1a\u7ec4\u4ef6&#xff0c;\u4f7f\u5176\u5728\u79c1\u6709\u4e91\u6216\u4efb\u4f55\u652f\u6301 Docker \u7684\u73af\u5883\u4e2d\u7115\u53d1\u65b0\u751f\u3002<\/p>\n<p>\u4e00\u3001 \u9003\u79bb\u7684\u54f2\u5b66&#xff1a;\u4ece\u201c\u6258\u7ba1\u201d\u5230\u201c\u638c\u63a7\u201d<\/p>\n<p>\u201c\u9003\u79bb Vercel\u201d\u5e76\u4e0d\u4ee3\u8868\u5426\u5b9a\u5b83\u7684\u4ef7\u503c&#xff0c;\u800c\u662f\u4e00\u79cd\u67b6\u6784\u81ea\u4e3b\u6743\u7684\u56de\u5f52\u3002<\/p>\n<p>1. \u73af\u5883\u7684\u7edd\u5bf9\u4e00\u81f4\u6027<\/p>\n<p>\u5728 Vercel \u4e0a&#xff0c;\u4f60\u4f9d\u8d56\u4e8e\u4e91\u7aef\u7684\u6267\u884c\u73af\u5883&#xff1b;\u800c\u901a\u8fc7 Docker&#xff0c;\u4f60\u4e0d\u4ec5\u6253\u5305\u4e86\u4ee3\u7801&#xff0c;\u8fd8\u6253\u5305\u4e86 Node.js \u8fd0\u884c\u65f6\u3001\u7cfb\u7edf\u4f9d\u8d56\u3001\u751a\u81f3\u662f\u7279\u5b9a\u7684\u914d\u7f6e\u6587\u4ef6\u3002\u8fd9\u610f\u5473\u7740\u201c\u5728\u6211\u7684\u673a\u5668\u4e0a\u80fd\u8dd1&#xff0c;\u5728\u670d\u52a1\u5668\u4e0a\u4e5f\u80fd\u8dd1\u201d\u4ece\u613f\u666f\u53d8\u6210\u4e86\u7269\u7406\u73b0\u5b9e\u3002<\/p>\n<p>2. \u6210\u672c\u4e0e\u4e3b\u6743\u7684\u535a\u5f08<\/p>\n<p>\u5bf9\u4e8e\u62e5\u6709\u6d77\u91cf\u6d41\u91cf\u6216\u654f\u611f\u6570\u636e\u7684\u4f01\u4e1a&#xff0c;\u79c1\u6709\u4e91\u90e8\u7f72\u80fd\u663e\u8457\u964d\u4f4e\u6602\u8d35\u7684\u5e26\u5bbd\u6ea2\u4ef7\u3002\u66f4\u91cd\u8981\u7684\u662f&#xff0c;\u901a\u8fc7 Docker \u90e8\u7f72&#xff0c;\u4f60\u638c\u63e1\u4e86\u65e5\u5fd7\u3001\u76d1\u63a7\u548c\u7f51\u7edc\u62d3\u6251\u7684\u6df1\u5c42\u63a7\u5236\u6743&#xff0c;\u8fd9\u5728\u5904\u7406\u94f6\u884c\u7ea7\u5b89\u5168\u9700\u6c42\u65f6\u81f3\u5173\u91cd\u8981\u3002<\/p>\n<p>\u4e8c\u3001 \u6838\u5fc3\u79d8\u6cd5&#xff1a;Next.js \u7684\u201c\u8131\u6c34\u201d\u4e0e\u201c\u590d\u6d3b\u201d<\/p>\n<p>\u8981\u5c06 Next.js \u4f18\u96c5\u5730\u88c5\u8fdb\u5bb9\u5668&#xff0c;\u4e0d\u80fd\u7b80\u5355\u5730\u590d\u5236\u6574\u4e2a\u9879\u76ee\u76ee\u5f55\u3002\u6211\u4eec\u9700\u8981\u4e00\u79cd\u540d\u4e3a\u00a0Standalone Mode&#xff08;\u72ec\u7acb\u6a21\u5f0f&#xff09;\u00a0\u7684\u9ed1\u79d1\u6280\u3002<\/p>\n<p>1. Standalone \u6a21\u5f0f&#xff1a;\u7cbe\u7b80\u7684\u6781\u81f4<\/p>\n<p>Next.js \u63d0\u4f9b\u4e86\u4e00\u4e2a\u9769\u547d\u6027\u7684\u7279\u6027&#xff1a;\u5b83\u80fd\u5206\u6790\u4f60\u7684\u4ee3\u7801&#xff0c;\u4ec5\u63d0\u53d6\u8fd0\u884c\u5e94\u7528\u6240\u9700\u7684\u6700\u5c0f\u00a0node_modules\u00a0\u5b50\u96c6\u3002<\/p>\n<ul>\n<li>\n<p>\u7626\u8eab\u6548\u679c&#xff1a;\u539f\u672c 1GB \u7684\u9879\u76ee\u4f53\u79ef&#xff0c;\u5728 Standalone \u6a21\u5f0f\u4e0b\u53ef\u4ee5\u88ab\u538b\u7f29\u5230 100MB \u4ee5\u5185\u3002\u8fd9\u4e0d\u4ec5\u52a0\u901f\u4e86\u955c\u50cf\u7684\u63a8\u9001\u901f\u5ea6&#xff0c;\u66f4\u6781\u5927\u63d0\u5347\u4e86\u5bb9\u5668\u7684\u542f\u52a8\u6548\u7387\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u591a\u9636\u6bb5\u6784\u5efa (Multi-stage Build)<\/p>\n<p>\u5728\u00a0Dockerfile\u00a0\u4e2d&#xff0c;\u6211\u4eec\u91c7\u7528\u201c\u6d41\u6c34\u7ebf\u201d\u601d\u7ef4&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u7b2c\u4e00\u9636\u6bb5 (Deps)&#xff1a;\u5b89\u88c5\u6240\u6709\u4f9d\u8d56&#xff08;\u5305\u62ec\u5f00\u53d1\u4f9d\u8d56&#xff09;\u3002<\/p>\n<\/li>\n<li>\n<p>\u7b2c\u4e8c\u9636\u6bb5 (Builder)&#xff1a;\u6267\u884c\u00a0npm run build&#xff0c;\u8fdb\u884c\u9759\u6001\u5206\u6790\u4e0e\u7f16\u8bd1\u3002<\/p>\n<\/li>\n<li>\n<p>\u7b2c\u4e09\u9636\u6bb5 (Runner)&#xff1a;\u4ec5\u62f7\u8d1d\u7f16\u8bd1\u4ea7\u7269\u00a0server.js\u00a0\u548c\u6700\u5c0f\u5316\u4f9d\u8d56&#xff0c;\u6784\u5efa\u6700\u7ec8\u7684\u751f\u4ea7\u955c\u50cf\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e09\u3001 \u5b9e\u6218&#xff1a;\u6784\u5efa\u4e00\u4efd\u201c\u751f\u4ea7\u7ea7\u201d\u7684 Dockerfile<\/p>\n<p>\u8fd9\u4efd\u914d\u7f6e\u662f\u5168\u6808\u4e13\u5bb6\u591a\u5e74\u7ecf\u9a8c\u7684\u7ed3\u6676&#xff0c;\u5b83\u517c\u987e\u4e86\u5b89\u5168\u3001\u901f\u5ea6\u4e0e\u7a33\u5b9a\u6027&#xff1a;<\/p>\n<p># \u4f7f\u7528\u8f7b\u91cf\u7ea7\u7684 Alpine \u955c\u50cf<br \/>\nFROM node:18-alpine AS base<\/p>\n<p># \u9636\u6bb5\u4e00&#xff1a;\u5b89\u88c5\u4f9d\u8d56<br \/>\nFROM base AS deps<br \/>\nWORKDIR \/app<br \/>\nCOPY package.json yarn.lock* .\/<br \/>\nRUN yarn install &#8211;frozen-lockfile<\/p>\n<p># \u9636\u6bb5\u4e8c&#xff1a;\u6784\u5efa\u5e94\u7528<br \/>\nFROM base AS builder<br \/>\nWORKDIR \/app<br \/>\nCOPY &#8211;from&#061;deps \/app\/node_modules .\/node_modules<br \/>\nCOPY . .<br \/>\n# \u5f00\u542f Standalone \u6a21\u5f0f\u7684\u5173\u952e\u73af\u5883\u53d8\u91cf<br \/>\nENV NEXT_PRIVATE_STANDALONE true<br \/>\nRUN yarn build<\/p>\n<p># \u9636\u6bb5\u4e09&#xff1a;\u8fd0\u884c\u955c\u50cf<br \/>\nFROM base AS runner<br \/>\nWORKDIR \/app<br \/>\nENV NODE_ENV production<br \/>\n# \u5904\u4e8e\u5b89\u5168\u8003\u8651&#xff0c;\u4e0d\u4f7f\u7528 root \u7528\u6237\u8fd0\u884c<br \/>\nRUN addgroup &#8211;system &#8211;gid 1001 nodejs<br \/>\nRUN adduser &#8211;system &#8211;uid 1001 nextjs<\/p>\n<p>COPY &#8211;from&#061;builder \/app\/public .\/public<br \/>\nCOPY &#8211;from&#061;builder &#8211;chown&#061;nextjs:nodejs \/app\/.next\/standalone .\/<br \/>\nCOPY &#8211;from&#061;builder &#8211;chown&#061;nextjs:nodejs \/app\/.next\/static .\/.next\/static<\/p>\n<p>USER nextjs<br \/>\nEXPOSE 3000<br \/>\nCMD [&#034;node&#034;, &#034;server.js&#034;]<\/p>\n<p>\u56db\u3001 \u5931\u53bb\u4e0e\u4ee3\u507f&#xff1a;\u79c1\u6709\u4e91\u90e8\u7f72\u7684\u201c\u8865\u8bfe\u201d<\/p>\n<p>\u5f53\u4f60\u79bb\u5f00 Vercel&#xff0c;\u539f\u672c\u7531\u5e73\u53f0\u81ea\u52a8\u5904\u7406\u7684\u90a3\u4e9b\u201c\u9b54\u6cd5\u201d\u5c06\u4f1a\u6d88\u5931\u3002\u4f5c\u4e3a\u67b6\u6784\u5e08&#xff0c;\u4f60\u9700\u8981\u624b\u52a8\u8865\u9f50\u8fd9\u4e9b\u62fc\u56fe&#xff1a;<\/p>\n<li>\n<p>\u9759\u6001\u8d44\u6e90 CDN \u5206\u53d1&#xff1a; Vercel \u4f1a\u81ea\u52a8\u5728\u5168\u7403\u5206\u53d1\u4f60\u7684\u56fe\u7247\u548c CSS\u3002\u5728\u79c1\u6709\u4e91\u4e2d&#xff0c;\u4f60\u53ef\u80fd\u9700\u8981\u914d\u7f6e\u00a0Nginx\u00a0\u4f5c\u4e3a\u53cd\u5411\u4ee3\u7406&#xff0c;\u5e76\u5f00\u542f Gzip \u6216 Brotli \u538b\u7f29&#xff0c;\u6216\u8005\u5c06\u00a0public\u00a0\u76ee\u5f55\u6302\u8f7d\u5230\u72ec\u7acb\u7684\u5bf9\u8c61\u5b58\u50a8&#xff08;OSS\/S3&#xff09;\u914d\u5408 CDN\u3002<\/p>\n<\/li>\n<li>\n<p>\u73af\u5883\u53d8\u91cf\u7684\u6ce8\u5165&#xff1a; \u4e0d\u518d\u6709 Vercel Dashboard\u3002\u4f60\u9700\u8981\u5229\u7528 Docker \u7684\u00a0-e\u00a0\u53c2\u6570\u6216\u00a0Kubernetes\u00a0\u7684 ConfigMap&#xff0c;\u5728\u8fd0\u884c\u65f6\u5c06\u751f\u4ea7\u73af\u5883\u7684\u79d8\u94a5\u6ce8\u5165\u5bb9\u5668\u3002<\/p>\n<\/li>\n<li>\n<p>Image \u4f18\u5316\u7684\u8d1f\u8f7d&#xff1a;\u00a0next\/image\u00a0\u975e\u5e38\u6d88\u8017 CPU\u3002\u5728 Vercel \u4e0a\u8fd9\u662f\u514d\u8d39\u7684&#xff0c;\u4f46\u5728\u79c1\u6709\u670d\u52a1\u5668\u4e0a&#xff0c;\u5982\u679c\u8bf7\u6c42\u91cf\u5de8\u5927&#xff0c;\u5efa\u8bae\u5b89\u88c5\u00a0sharp\u00a0\u5e93&#xff0c;\u5e76\u8003\u8651\u5bf9\u56fe\u7247\u8bf7\u6c42\u8fdb\u884c\u72ec\u7acb\u7f13\u5b58\u3002<\/p>\n<\/li>\n<p>\u4e94\u3001 \u603b\u7ed3&#xff1a;\u81ea\u7531\u7684\u4ee3\u4ef7\u4e0e\u8363\u8000<\/p>\n<p>\u672c\u8282\u6240\u6559\u6388\u7684&#xff0c;\u662f\u5168\u6808\u5de5\u7a0b\u5e08\u7684**\u201c\u751f\u5b58\u6280\u80fd\u201d**\u3002<\/p>\n<ul>\n<li>\n<p>Dockerfile\u00a0\u662f\u6211\u4eec\u7684\u901a\u5173\u6587\u7252&#xff1b;<\/p>\n<\/li>\n<li>\n<p>Standalone \u6a21\u5f0f\u00a0\u662f\u6211\u4eec\u7684\u51cf\u8d1f\u9526\u56ca&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u79c1\u6709\u4e91\u00a0\u662f\u6211\u4eec\u7684\u661f\u8fb0\u5927\u6d77\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u638c\u63e1\u4e86 Docker \u90e8\u7f72&#xff0c;\u4f60\u5c31\u5f7b\u5e95\u6446\u8131\u4e86\u4f9b\u5e94\u5546\u9501\u5b9a&#xff08;Vendor Lock-in&#xff09;\u3002\u4f60\u53ef\u4ee5\u81ea\u8c6a\u5730\u5ba3\u5e03&#xff1a;\u6211\u7684 Next.js \u5e94\u7528\u4e0d\u4ec5\u80fd\u5728\u4e91\u7aef\u8d77\u821e&#xff0c;\u4e5f\u80fd\u5728\u4efb\u4f55\u4e00\u7247\u6570\u5b57\u9886\u571f\u4e0a\u624e\u6839\u751f\u957f\u3002\u8fd9\u79cd\u8de8\u5e73\u53f0\u7684\u81ea\u7531&#xff0c;\u6b63\u662f\u4ece\u201c\u5f00\u53d1\u8005\u201d\u8fc8\u5411\u201c\u67b6\u6784\u5e08\u201d\u7684\u5173\u952e\u4e00\u6b65\u3002<\/p>\n<p>\u65b9\u821f\u5df2\u7ecf\u9020\u597d&#xff0c;\u951a\u5df2\u7ecf\u62c9\u8d77\u3002\u4f46\u5728\u8fd9\u7247\u81ea\u7531\u7684\u6d77\u57df\u4e0a&#xff0c;\u5982\u4f55\u786e\u4fdd\u4f60\u7684\u5e94\u7528\u4e0d\u662f\u5728\u5e26\u75c5\u822a\u884c&#xff1f;\u5982\u4f55\u91cf\u5316\u6bcf\u4e00\u6beb\u79d2\u7684\u5ef6\u8fdf\u548c\u6bcf\u4e00\u6b21\u50cf\u7d20\u7684\u6296\u52a8&#xff1f;\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u653b\u514b\u7684\u201c\u7cbe\u51c6\u4e4b\u6218\u201d\u2014\u2014\u6027\u80fd\u5ea6\u91cf&#xff1a;Core Web Vitals (LCP, FID, CLS) \u7684\u76d1\u63a7\u4e0e\u8c03\u4f18\u3002\u60a8\u51c6\u5907\u597d\u7528\u6570\u636e\u6765\u5ba1\u89c6\u4f60\u7684\u6bcf\u4e00\u884c\u4ee3\u7801\u4e86\u5417&#xff1f;<\/p>\n<h3>12.3 \u6027\u80fd\u5ea6\u91cf \u2014\u2014 Core Web Vitals \u7684\u76d1\u63a7\u4e0e\u8c03\u4f18&#xff1a;\u50cf\u7d20\u7ea7\u7684\u5353\u8d8a\u4fee\u884c<\/h3>\n<p>\u5982\u679c\u8bf4\u90e8\u7f72\u662f\u5e94\u7528\u7684\u201c\u8bde\u751f\u201d&#xff0c;\u90a3\u4e48**\u6027\u80fd\u5ea6\u91cf&#xff08;Performance Metrics&#xff09;**\u5c31\u662f\u5e94\u7528\u7684\u201c\u4f53\u68c0\u201d\u4e0e\u201c\u8fdb\u5316\u201d\u3002\u5728\u5168\u6808\u5f00\u53d1\u7684\u6781\u5883\u4e2d&#xff0c;\u6211\u4eec\u8ffd\u6c42\u7684\u4e0d\u518d\u662f\u7b3c\u7edf\u7684\u201c\u5feb\u201d&#xff0c;\u800c\u662f Google \u6240\u5b9a\u4e49\u7684\u00a0Core Web Vitals (\u6838\u5fc3 Web \u6307\u6807)\u3002<\/p>\n<p>\u8fd9\u4e0d\u4ec5\u4ec5\u662f\u4e00\u7ec4\u6280\u672f\u53c2\u6570&#xff0c;\u5b83\u662f\u5bf9\u7528\u6237\u771f\u5b9e\u611f\u5b98\u7684\u6570\u5b57\u5316\u5efa\u6a21\u3002\u4e00\u4e2a LCP \u6162\u4e86 1 \u79d2\u7684\u5e94\u7528&#xff0c;\u53ef\u80fd\u610f\u5473\u7740 20% \u7684\u7528\u6237\u6d41\u5931&#xff1b;\u4e00\u4e2a CLS \u5267\u70c8\u6296\u52a8\u7684\u9875\u9762&#xff0c;\u5219\u4f1a\u77ac\u95f4\u6467\u6bc1\u54c1\u724c\u7684\u4fe1\u4efb\u611f\u3002\u5728 12.3 \u8282\u4e2d&#xff0c;\u6211\u4eec\u5c06\u6df1\u5165\u8fd9\u5957\u7cbe\u5bc6\u7684\u6570\u636e\u4f53\u7cfb&#xff0c;\u5b66\u4e60\u5982\u4f55\u5728 Next.js \u4e2d\u6355\u6349\u90a3\u4e9b\u8f6c\u77ac\u5373\u901d\u7684\u6027\u80fd\u635f\u8017&#xff0c;\u5e76\u5c06\u5176\u6253\u78e8\u81f3\u5dc5\u5cf0\u3002<\/p>\n<p>\u4e00\u3001 \u4e09\u4f4d\u4e00\u4f53&#xff1a;\u6d1e\u5bdf\u7528\u6237\u7684\u201c\u611f\u5b98\u4e09\u8981\u7d20\u201d<\/p>\n<p>\u8981\u4f18\u5316\u6027\u80fd&#xff0c;\u5fc5\u987b\u5148\u7406\u89e3 Google \u5212\u5b9a\u7684\u8fd9\u4e09\u6761\u7ea2\u7ebf\u3002\u5b83\u4eec\u5206\u522b\u4ee3\u8868\u4e86\u52a0\u8f7d\u901f\u5ea6\u3001\u4ea4\u4e92\u5ef6\u8fdf\u4e0e\u89c6\u89c9\u7a33\u5b9a\u6027\u3002<\/p>\n<p>1. LCP (Largest Contentful Paint) \u2014\u2014 \u52a0\u8f7d\u7684\u201c\u5206\u91cf\u611f\u201d<\/p>\n<p>LCP \u8861\u91cf\u7684\u662f\u9875\u9762\u4e0a\u6700\u5927\u7684\u53ef\u89c1\u5143\u7d20&#xff08;\u901a\u5e38\u662f Hero Image \u6216\u5927\u6bb5\u6807\u9898&#xff09;\u6e32\u67d3\u5b8c\u6210\u7684\u65f6\u95f4\u3002<\/p>\n<ul>\n<li>\n<p>\u5168\u6808\u5fc3\u6cd5&#xff1a;\u8fd9\u662f\u5bf9 6.1 \u8282 SSG\/ISR \u4e0e 7.2 \u8282\u56fe\u50cf\u4f18\u5316\u7684\u7efc\u5408\u5927\u8003\u3002\u5982\u679c LCP \u8d85\u8fc7 2.5 \u79d2&#xff0c;\u7528\u6237\u5c31\u4f1a\u611f\u5230\u660e\u663e\u7684\u201c\u7b49\u5f85\u611f\u201d\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. FID (First Input Delay) \u2014\u2014 \u4ea4\u4e92\u7684\u201c\u7075\u654f\u5ea6\u201d<\/p>\n<p>FID \u8861\u91cf\u4ece\u7528\u6237\u7b2c\u4e00\u6b21\u70b9\u51fb\u6216\u8f93\u5165&#xff0c;\u5230\u6d4f\u89c8\u5668\u771f\u6b63\u54cd\u5e94\u8fd9\u4e2a\u64cd\u4f5c\u7684\u65f6\u95f4\u3002<\/p>\n<ul>\n<li>\n<p>\u5168\u6808\u5fc3\u6cd5&#xff1a;\u5b83\u76f4\u6307 JS \u6267\u884c\u7684\u4e3b\u7ebf\u7a0b\u3002\u5982\u679c\u4f60\u7684 Hydration&#xff08;\u6c34\u5408&#xff09;\u8fc7\u7a0b\u8fc7\u4e8e\u81c3\u80bf&#xff0c;\u4e3b\u7ebf\u7a0b\u88ab\u957f\u4efb\u52a1\u963b\u585e&#xff0c;\u7528\u6237\u5c31\u4f1a\u611f\u5230\u9875\u9762\u201c\u5047\u6b7b\u201d\u3002<\/p>\n<\/li>\n<\/ul>\n<p>3. CLS (Cumulative Layout Shift) \u2014\u2014 \u89c6\u89c9\u7684\u201c\u7a33\u5065\u6027\u201d<\/p>\n<p>CLS \u8861\u91cf\u9875\u9762\u5728\u52a0\u8f7d\u8fc7\u7a0b\u4e2d\u53d1\u751f\u7684\u610f\u5916\u504f\u79fb\u3002<\/p>\n<ul>\n<li>\n<p>\u5168\u6808\u5fc3\u6cd5&#xff1a;\u8fd9\u662f\u5bf9 7.3 \u8282\u5b57\u4f53\u4f18\u5316\u4e0e\u5bb9\u5668\u5360\u4f4d\u6280\u5de7\u7684\u7ec8\u6781\u68c0\u9a8c\u3002\u4efb\u4f55\u50cf\u7d20\u7ea7\u7684\u8df3\u52a8&#xff0c;\u90fd\u4f1a\u88ab\u8ba1\u5165\u8fd9\u4e2a\u5206\u503c\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e8c\u3001 \u6355\u98ce\u6349\u5f71&#xff1a;\u5728 Next.js \u4e2d\u5efa\u7acb\u5168\u65b9\u4f4d\u76d1\u63a7<\/p>\n<p>\u76d1\u63a7\u5206\u4e3a\u4e24\u79cd&#xff1a;\u5b9e\u9a8c\u5ba4\u6570\u636e (Lab Data)\u00a0\u4e0e\u00a0\u771f\u5b9e\u7528\u6237\u6570\u636e (RUM)\u3002<\/p>\n<p>1. \u5b9e\u9a8c\u5ba4\u7684\u53d7\u63a7\u89c2\u6d4b<\/p>\n<p>\u5229\u7528\u00a0Lighthouse\u00a0\u6216\u00a0PageSpeed Insights&#xff0c;\u5728\u5f00\u53d1\u9636\u6bb5\u8fdb\u884c\u6a21\u62df\u6d4b\u8bd5\u3002<\/p>\n<ul>\n<li>\n<p>\u5c40\u9650\u6027&#xff1a;\u5b9e\u9a8c\u5ba4\u73af\u5883\u592a\u201c\u5b8c\u7f8e\u201d&#xff0c;\u65e0\u6cd5\u53cd\u6620\u5168\u7403\u7528\u6237\u5728 4G \u7f51\u7edc\u6216\u4f4e\u7aef\u624b\u673a\u4e0a\u7684\u771f\u5b9e\u82e6\u96be\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u771f\u5b9e\u4e16\u754c\u7684\u5b9e\u65f6\u6355\u83b7 (RUM)<\/p>\n<p>Next.js \u63d0\u4f9b\u4e86\u4e00\u4e2a\u5185\u7f6e\u7684\u751f\u547d\u5468\u671f\u94a9\u5b50\u00a0useReportWebVitals&#xff0c;\u8ba9\u6211\u4eec\u80fd\u591f\u5c06\u6bcf\u4e00\u4e2a\u771f\u5b9e\u7528\u6237\u7684\u6307\u6807\u4e0a\u62a5\u7ed9\u5206\u6790\u5e73\u53f0\u3002<\/p>\n<p>\/\/ app\/layout.tsx (\u4ec5\u9650 Client Component)<br \/>\n&#034;use client&#034;<br \/>\nimport { useReportWebVitals } from &#039;next\/web-vitals&#039;<\/p>\n<p>export function WebVitals() {<br \/>\n  useReportWebVitals((metric) &#061;&gt; {<br \/>\n    \/\/ \u5c06\u6570\u636e\u53d1\u9001\u5230 Google Analytics, Vercel Speed Insights \u6216\u81ea\u5b9a\u4e49 API<br \/>\n    console.log(metric)<br \/>\n  })<br \/>\n}<\/p>\n<p>\u53ea\u6709\u770b\u5230\u771f\u5b9e\u7528\u6237\u5728\u5f31\u7f51\u73af\u5883\u4e0b\u7684\u60e8\u70c8\u6570\u636e&#xff0c;\u4f60\u624d\u4f1a\u771f\u6b63\u7406\u89e3\u6027\u80fd\u4f18\u5316\u7684\u7d27\u8feb\u6027\u3002<\/p>\n<p>\u4e09\u3001 \u8c03\u4f18\u7684\u827a\u672f&#xff1a;\u4ece\u6beb\u79d2\u7ea7\u635f\u8017\u4e2d\u593a\u56de\u6027\u80fd<\/p>\n<p>\u5f53\u6211\u4eec\u62ff\u5230\u4e86\u201c\u8bca\u65ad\u4e66\u201d&#xff0c;\u63a5\u4e0b\u6765\u7684\u624b\u672f\u9700\u8981\u6781\u5176\u7cbe\u51c6&#xff1a;<\/p>\n<p>1. \u9488\u5bf9 LCP&#xff1a;\u9884\u52a0\u8f7d\u4e0e\u8fb9\u7f18\u4fa7\u5206\u53d1<\/p>\n<ul>\n<li>\n<p>Priority \u5c5e\u6027&#xff1a;\u4e3a\u9996\u5c4f\u56fe\u7247\u5f3a\u5236\u5f00\u542f\u00a0priority\u3002<\/p>\n<\/li>\n<li>\n<p>\u6d41\u5f0f\u4f20\u8f93 (Streaming)&#xff1a;\u5229\u7528 8.3 \u8282\u7684\u6280\u672f&#xff0c;\u5148\u6d41\u5f0f\u8f93\u51fa HTML \u5934\u90e8&#xff0c;\u8ba9\u6d4f\u89c8\u5668\u5c3d\u65e9\u53d1\u73b0\u5e76\u4e0b\u8f7d\u5173\u952e\u8d44\u6e90&#xff08;CSS\/JS&#xff09;\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u9488\u5bf9 FID&#xff1a;\u62c6\u89e3\u957f\u4efb\u52a1 (TBT \u4f18\u5316)<\/p>\n<ul>\n<li>\n<p>\u52a8\u6001\u5bfc\u5165 (next\/dynamic)&#xff1a;\u5c06\u90a3\u4e9b\u4e0d\u5f71\u54cd\u9996\u5c4f\u7684\u91cd\u578b\u7ec4\u4ef6&#xff08;\u5982\u590d\u6742\u7684\u8bc4\u8bba\u7cfb\u7edf\u3001\u7b2c\u4e09\u65b9\u5730\u56fe&#xff09;\u8fdb\u884c\u61d2\u52a0\u8f7d\u3002<\/p>\n<\/li>\n<li>\n<p>Web Workers&#xff1a;\u5c06\u8ba1\u7b97\u5bc6\u96c6\u578b\u903b\u8f91\u4ece\u4e3b\u7ebf\u7a0b\u5265\u79bb\u3002<\/p>\n<\/li>\n<\/ul>\n<p>3. \u9488\u5bf9 CLS&#xff1a;\u786e\u5b9a\u6027\u7684\u5bb9\u5668<\/p>\n<ul>\n<li>\n<p>Aspect Ratio&#xff1a;\u59cb\u7ec8\u4e3a\u56fe\u50cf\u548c\u89c6\u9891\u9884\u7559\u5bbd\u9ad8\u6bd4\u5360\u4f4d\u3002<\/p>\n<\/li>\n<li>\n<p>next\/font&#xff1a;\u5229\u7528\u6211\u4eec\u5728 7.3 \u8282\u5b66\u5230\u7684\u5b57\u4f53\u5bf9\u9f50\u6280\u672f&#xff0c;\u6d88\u9664\u7cfb\u7edf\u5b57\u4f53\u66ff\u6362\u4e3a\u81ea\u5b9a\u4e49\u5b57\u4f53\u65f6\u7684\u77ac\u95f4\u4f4d\u79fb\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u56db\u3001 \u4e13\u5bb6\u89c6\u70b9&#xff1a;\u4e0d\u8981\u843d\u5165\u201c\u8fc7\u5ea6\u4f18\u5316\u201d\u7684\u9677\u9631<\/p>\n<p>\u4f5c\u4e3a\u9876\u7ea7\u5de5\u7a0b\u5e08&#xff0c;\u6211\u4eec\u9700\u8981\u4fdd\u6301\u4e00\u79cd\u201c\u6027\u80fd\u7406\u6027\u201d&#xff1a;<\/p>\n<li>\n<p>\u6743\u8861\u4e1a\u52a1\u4e0e\u901f\u5ea6&#xff1a;\u5982\u679c\u4e00\u4e2a\u91cd\u578b\u7684\u8425\u9500\u8ffd\u8e2a\u811a\u672c\u5fc5\u987b\u5b58\u5728&#xff0c;\u90a3\u5c31\u901a\u8fc7\u00a0next\/script\u00a0\u7684\u00a0worker\u00a0\u6a21\u5f0f\u53bb\u52a0\u8f7d\u5b83&#xff0c;\u800c\u4e0d\u662f\u76f2\u76ee\u5730\u4e3a\u4e86\u5206\u6570\u800c\u5220\u6389\u4e1a\u52a1\u9700\u6c42\u3002<\/p>\n<\/li>\n<li>\n<p>\u5173\u6ce8 75 \u5206\u4f4d (p75)&#xff1a;\u4e0d\u8981\u88ab\u6781\u4e2a\u522b\u7684\u7279\u6162\u6570\u636e\u5e26\u504f&#xff0c;\u91cd\u70b9\u5173\u6ce8 75% \u7684\u7528\u6237\u662f\u5426\u90fd\u80fd\u4eab\u53d7\u5230\u6d41\u7545\u7684\u4f53\u9a8c\u3002<\/p>\n<\/li>\n<li>\n<p>\u9884\u7b97\u673a\u5236 (Performance Budgets)&#xff1a;\u5728 CI\/CD \u6d41\u6c34\u7ebf\u4e2d\u8bbe\u7f6e\u9608\u503c\u3002\u5982\u679c\u67d0\u6b21\u63d0\u4ea4\u5bfc\u81f4\u6253\u5305\u540e\u7684 JS \u4f53\u79ef\u8d85\u8fc7\u4e86\u9884\u7b97&#xff0c;\u6216\u8005 Lighthouse \u5206\u6570\u4e0b\u964d&#xff0c;\u76f4\u63a5\u62d2\u7edd\u5408\u5e76\u3002<\/p>\n<\/li>\n<p>\u4e94\u3001 \u603b\u7ed3&#xff1a;\u901a\u5f80\u201c\u6781\u5883\u201d\u7684\u4fee\u884c<\/p>\n<p>\u672c\u8282\u7684\u6027\u80fd\u5ea6\u91cf&#xff0c;\u662f\u5168\u6808\u5f00\u53d1\u4ece\u201c\u611f\u6027\u7f8e\u5b66\u201d\u5411\u201c\u7406\u6027\u79d1\u5b66\u201d\u7684\u8de8\u8d8a\u3002<\/p>\n<p>\u5b83\u544a\u8bc9\u6211\u4eec&#xff1a;\u6027\u80fd\u4e0d\u662f\u7384\u5b66&#xff0c;\u800c\u662f\u6bcf\u4e00\u884c\u4ee3\u7801\u7684\u7d2f\u79ef\u503a\u52a1\u6216\u8d44\u4ea7\u3002\u00a0\u901a\u8fc7 LCP\u3001FID \u548c CLS \u8fd9\u4e09\u628a\u6807\u5c3a&#xff0c;\u6211\u4eec\u5c06\u865a\u65e0\u7f25\u7f08\u7684\u201c\u7528\u6237\u4f53\u9a8c\u201d\u91cf\u5316\u4e3a\u4e86\u53ef\u4ee5\u8ffd\u8e2a\u3001\u53ef\u4ee5\u4f18\u5316\u7684\u5de5\u7a0b\u76ee\u6807\u3002<\/p>\n<p>\u5f53\u4f60\u7684\u5e94\u7528\u5728\u5404\u79cd\u6781\u7aef\u73af\u5883\u4e0b\u4f9d\u7136\u80fd\u7a33\u5982\u6cf0\u5c71&#xff0c;\u5f53\u6bcf\u4e00\u4e2a\u50cf\u7d20\u7684\u5448\u73b0\u90fd\u7cbe\u51c6\u65e0\u8bef&#xff0c;\u4f60\u4fbf\u5728\u6027\u80fd\u7684\u6781\u5883\u4e2d\u4fee\u5f97\u5706\u6ee1\u3002\u8fd9\u79cd\u5bf9\u6781\u81f4\u7684\u8ffd\u6c42&#xff0c;\u6b63\u662f\u5168\u6808\u767b\u4ed9\u4e4b\u8def\u4e0a\u7684\u6700\u9ad8\u52cb\u7ae0\u3002<\/p>\n<p>\u6570\u636e\u5df2\u7ecf\u6e05\u6670&#xff0c;\u6027\u80fd\u5df2\u7ecf\u8fbe\u6807\u3002\u4f46\u5728\u8fd9\u4e2a\u77ac\u606f\u4e07\u53d8\u7684\u5f00\u53d1\u8282\u594f\u4e2d&#xff0c;\u5982\u4f55\u786e\u4fdd\u6bcf\u4e00\u4efd\u4f18\u5316\u90fd\u4e0d\u4f1a\u88ab\u672a\u6765\u7684\u4ee3\u7801\u7834\u574f&#xff1f;\u5982\u4f55\u8ba9\u6d4b\u8bd5\u4e0e\u90e8\u7f72\u50cf\u547c\u5438\u4e00\u6837\u81ea\u52a8\u8fdb\u884c&#xff1f;\u8fd9\u5c31\u662f\u6211\u4eec\u8981\u6500\u767b\u7684\u6700\u540e\u4e00\u5ea7\u9ad8\u5cf0\u2014\u2014CI\/CD \u5de5\u4f5c\u6d41&#xff1a;GitHub Actions \u81ea\u52a8\u5316\u6d4b\u8bd5\u4e0e\u90e8\u7f72\u3002\u60a8\u51c6\u5907\u597d\u8fce\u63a5\u5168\u6808\u5de5\u7a0b\u5316\u7684\u201c\u5927\u5706\u6ee1\u201d\u65f6\u523b\u4e86\u5417&#xff1f;<\/p>\n<h3>12.4 CI\/CD \u5de5\u4f5c\u6d41 \u2014\u2014 GitHub Actions \u81ea\u52a8\u5316\u6d4b\u8bd5\u4e0e\u90e8\u7f72&#xff1a;\u5de5\u7a0b\u5316\u7684\u201c\u5927\u5706\u6ee1\u201d<\/h3>\n<p>\u5982\u679c\u8bf4\u4ee3\u7801\u662f\u5e94\u7528\u7684\u201c\u8089\u8eab\u201d&#xff0c;\u6027\u80fd\u662f\u5e94\u7528\u7684\u201c\u6c14\u606f\u201d&#xff0c;\u90a3\u4e48\u00a0CI\/CD&#xff08;\u6301\u7eed\u96c6\u6210\u4e0e\u6301\u7eed\u90e8\u7f72&#xff09;\u00a0\u5c31\u662f\u5e94\u7528\u7684\u201c\u5143\u795e\u201d\u3002\u5728\u5168\u6808\u5f00\u53d1\u7684\u7ec8\u6781\u7248\u56fe\u91cc&#xff0c;\u4e00\u4e2a\u9876\u5c16\u7684\u5de5\u7a0b\u5e08\u4e0d\u5e94\u4eb2\u624b\u53bb\u6267\u884c\u90e8\u7f72&#xff0c;\u800c\u662f\u5e94\u8be5\u6784\u5efa\u4e00\u5957\u81ea\u8fd0\u884c\u3001\u81ea\u6821\u9a8c\u3001\u81ea\u6f14\u8fdb\u7684\u81ea\u52a8\u5316\u6d41\u6c34\u7ebf\u3002<\/p>\n<p>\u672c\u8282\u4f5c\u4e3a\u5168\u4e66\u7684\u7ec8\u7ae0&#xff0c;\u5c06\u5e26\u4f60\u9886\u7565\u00a0GitHub Actions\u00a0\u7684\u7985\u610f&#xff1a;\u5c06\u7e41\u7410\u7684\u6d4b\u8bd5\u3001\u6784\u5efa\u3001\u626b\u63cf\u4e0e\u5206\u53d1&#xff0c;\u51dd\u7ec3\u4e3a\u4e00\u7ec4 YAML \u811a\u672c\u3002\u5f53\u4f60\u5728\u672c\u5730\u6267\u884c\u00a0git push\u00a0\u7684\u90a3\u4e00\u523b&#xff0c;\u8fd9\u573a\u5173\u4e8e\u4ee3\u7801\u7684\u201c\u767b\u4ed9\u4e4b\u65c5\u201d\u4fbf\u81ea\u52a8\u5f00\u542f\u3002<\/p>\n<p>\u4e00\u3001 \u79e9\u5e8f\u7684\u771f\u8c1b&#xff1a;\u4e3a\u4ec0\u4e48\u9700\u8981 CI\/CD&#xff1f;<\/p>\n<p>\u5728\u4e1a\u4f59\u5f00\u53d1\u8005\u773c\u4e2d&#xff0c;\u90e8\u7f72\u662f\u624b\u52a8\u4e0a\u4f20\u6587\u4ef6&#xff1b;\u5728\u5168\u6808\u67b6\u6784\u5e08\u773c\u4e2d&#xff0c;\u90e8\u7f72\u662f\u4e00\u573a\u201c\u65e0\u611f\u77e5\u7684\u8d28\u91cf\u63a5\u529b\u201d\u3002<\/p>\n<p>1. \u5b88\u95e8\u5458\u6548\u5e94 (Continuous Integration)<\/p>\n<p>\u6bcf\u4e00\u4efd\u4ee3\u7801\u5728\u8fdb\u5165\u4e3b\u5e72\u5206\u652f\u524d&#xff0c;\u5fc5\u987b\u7ecf\u8fc7\u201c\u5730\u72f1\u5f0f\u201d\u7684\u81ea\u52a8\u5316\u5ba1\u67e5\u3002\u5355\u5143\u6d4b\u8bd5\u662f\u5426\u901a\u8fc7&#xff1f;\u7c7b\u578b\u68c0\u67e5\u662f\u5426\u6709\u6f0f\u6d1e&#xff1f;\u4ee3\u7801\u98ce\u683c\u662f\u5426\u7edf\u4e00&#xff1f;CI \u786e\u4fdd\u4e86\u6ca1\u6709\u4efb\u4f55\u4e00\u884c\u70c2\u4ee3\u7801\u80fd\u6c61\u67d3\u4f60\u7684\u751f\u4ea7\u73af\u5883\u3002<\/p>\n<p>2. \u53d1\u5e03\u7684\u786e\u5b9a\u6027 (Continuous Deployment)<\/p>\n<p>\u624b\u52a8\u90e8\u7f72\u610f\u5473\u7740\u4eba\u4e3a\u5931\u8bef\u3002\u901a\u8fc7 CD \u81ea\u52a8\u5316\u6d41\u6c34\u7ebf&#xff0c;\u90e8\u7f72\u8fc7\u7a0b\u53d8\u5f97\u53ef\u91cd\u590d\u3001\u53ef\u8ffd\u6eaf\u3001\u53ef\u56de\u6eda\u3002\u65e0\u8bba\u662f\u5728\u51cc\u6668\u4e09\u70b9\u8fd8\u662f\u4e1a\u52a1\u5dc5\u5cf0&#xff0c;\u7cfb\u7edf\u90fd\u80fd\u4ee5\u540c\u6837\u7684\u6807\u51c6\u6d41\u7a0b&#xff0c;\u5c06\u4ee3\u7801\u7a33\u5b9a\u5730\u63a8\u5411\u5168\u7403\u8282\u70b9\u3002<\/p>\n<p>\u4e8c\u3001 \u903b\u8f91\u7684\u9aa8\u67b6&#xff1a;GitHub Actions \u7684\u5de5\u4f5c\u6d41\u8bbe\u8ba1<\/p>\n<p>GitHub Actions \u7684\u7cbe\u5999\u4e4b\u5904\u5728\u4e8e\u5b83\u4e0e\u6e90\u7801\u5e93\u7684\u6df1\u5ea6\u878d\u5408\u3002\u901a\u8fc7\u5b9a\u4e49\u00a0workflows&#xff0c;\u4f60\u53ef\u4ee5\u7cbe\u51c6\u5730\u6355\u6349\u6bcf\u4e00\u4e2a\u5f00\u53d1\u52a8\u4f5c\u3002<\/p>\n<p>1. \u9636\u6bb5\u5316\u6d41\u6c34\u7ebf (Phased Pipeline)<\/p>\n<p>\u4e00\u4e2a\u6210\u719f\u7684 Next.js CI\/CD \u5de5\u4f5c\u6d41\u901a\u5e38\u5206\u4e3a\u4e09\u4e2a\u5173\u952e\u9636\u6bb5&#xff1a;<\/p>\n<ul>\n<li>\n<p>Lint &amp; Type Check&#xff1a;\u5229\u7528\u00a0next lint\u00a0\u548c\u00a0tsc&#xff0c;\u5728\u6beb\u79d2\u95f4\u67e5\u6740\u8bed\u6cd5\u9690\u60a3\u3002<\/p>\n<\/li>\n<li>\n<p>Automated Testing&#xff1a;\u8fd0\u884c Vitest \u5355\u5143\u6d4b\u8bd5\u6216 Playwright \u7aef\u5230\u7aef&#xff08;E2E&#xff09;\u6d4b\u8bd5\u3002<\/p>\n<\/li>\n<li>\n<p>Build &amp; Deploy&#xff1a;\u6267\u884c\u751f\u4ea7\u6784\u5efa\u3002\u53ea\u6709\u5f53\u524d\u4e24\u6b65\u5168\u7eff&#xff0c;\u624d\u4f1a\u89e6\u53d1\u5411 Vercel \u6216\u79c1\u6709 Docker \u4ed3\u5e93\u7684\u63a8\u9001\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u7f13\u5b58\u7684\u827a\u672f<\/p>\n<p>\u5728\u6d41\u6c34\u7ebf\u4e2d&#xff0c;\u65f6\u95f4\u5c31\u662f\u91d1\u94b1\u3002\u901a\u8fc7 GitHub Actions \u7684\u00a0cache\u00a0\u52a8\u4f5c&#xff0c;\u6211\u4eec\u53ef\u4ee5\u6301\u4e45\u5316\u00a0node_modules\u00a0\u548c\u00a0.next\/cache\u3002<\/p>\n<p>\u5229\u7528\u7f13\u5b58&#xff0c;\u53ef\u4ee5\u5c06\u539f\u672c 5 \u5206\u949f\u7684\u6784\u5efa\u8fc7\u7a0b\u538b\u7f29\u81f3 1 \u5206\u949f\u4ee5\u5185\u3002\u8fd9\u4e0d\u4ec5\u63d0\u5347\u4e86\u5f00\u53d1\u8005\u7684\u723d\u611f&#xff0c;\u66f4\u5728\u5927\u578b\u56e2\u961f\u4e2d\u6781\u5927\u5730\u964d\u4f4e\u4e86\u8d44\u6e90\u6d6a\u8d39\u3002<\/p>\n<p>\u4e09\u3001 \u5b9e\u6218&#xff1a;\u4e00\u4efd\u201c\u767b\u4ed9\u7ea7\u201d\u7684\u5de5\u4f5c\u6d41\u914d\u7f6e<\/p>\n<p>\u4ee5\u4e0b\u662f\u4e00\u4efd\u751f\u4ea7\u73af\u5883\u7ea7\u522b\u7684 GitHub Actions \u6a21\u7248&#xff0c;\u5b83\u662f\u81ea\u52a8\u5316\u54f2\u5b66\u7684\u5177\u4f53\u5b9e\u8df5&#xff1a;<\/p>\n<p>name: Production Deployment<\/p>\n<p>on:<br \/>\n  push:<br \/>\n    branches: [main]<\/p>\n<p>jobs:<br \/>\n  quality-gate:<br \/>\n    runs-on: ubuntu-latest<br \/>\n    steps:<br \/>\n      &#8211; uses: actions\/checkout&#064;v4<br \/>\n      &#8211; uses: actions\/setup-node&#064;v4<br \/>\n        with:<br \/>\n          node-version: 18<br \/>\n          cache: &#039;npm&#039;<\/p>\n<p>      &#8211; name: Install &amp; Lint<br \/>\n        run: |<br \/>\n          npm ci<br \/>\n          npm run lint<\/p>\n<p>      &#8211; name: Type Check<br \/>\n        run: npx tsc &#8211;noEmit<\/p>\n<p>      &#8211; name: Run Unit Tests<br \/>\n        run: npm test<\/p>\n<p>  deploy:<br \/>\n    needs: quality-gate<br \/>\n    runs-on: ubuntu-latest<br \/>\n    steps:<br \/>\n      &#8211; name: Deploy to Vercel<br \/>\n        uses: amondnet\/vercel-action&#064;v20<br \/>\n        with:<br \/>\n          vercel-token: ${{ secrets.VERCEL_TOKEN }}<br \/>\n          vercel-org-id: ${{ secrets.ORG_ID }}<br \/>\n          vercel-project-id: ${{ secrets.PROJECT_ID }}<br \/>\n          vercel-args: &#039;&#8211;prod&#039;<\/p>\n<p>\u56db\u3001 \u5b89\u5168\u7684\u6700\u540e\u9632\u7ebf&#xff1a;Secret \u4e0e\u73af\u5883\u9694\u79bb<\/p>\n<p>\u5728\u6d41\u6c34\u7ebf\u4e2d&#xff0c;\u5b89\u5168\u6027\u662f\u4e0d\u53ef\u903e\u8d8a\u7684\u7ea2\u7ebf\u3002<\/p>\n<ul>\n<li>\n<p>Secrets \u7ba1\u7406&#xff1a;\u6c38\u8fdc\u4e0d\u8981\u5728 YAML \u6587\u4ef6\u4e2d\u66b4\u9732\u4efb\u4f55 API Key\u3002\u5229\u7528 GitHub \u7684\u00a0Settings &gt; Secrets\u00a0\u5b58\u50a8\u52a0\u5bc6\u53d8\u91cf&#xff0c;\u5e76\u5728\u8fd0\u884c\u65f6\u901a\u8fc7\u00a0${{ secrets.XXX }}\u00a0\u6ce8\u5165\u3002<\/p>\n<\/li>\n<li>\n<p>\u5206\u652f\u7b56\u7565&#xff1a;\u901a\u8fc7 GitHub \u7684\u00a0Branch Protection Rules&#xff0c;\u5f3a\u5236\u8981\u6c42\u6240\u6709\u4ee3\u7801\u5fc5\u987b\u901a\u8fc7 CI \u6d41\u6c34\u7ebf\u4e14\u7ecf\u8fc7\u81f3\u5c11\u4e00\u4eba Review \u540e\u65b9\u53ef\u5408\u5e76\u3002\u8fd9\u79cd**\u201c\u5236\u5ea6\u4e0e\u6280\u672f\u7684\u5171\u8c0b\u201d**&#xff0c;\u662f\u751f\u4ea7\u4e8b\u6545\u7684\u7ec8\u6781\u8fc7\u6ee4\u5668\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e94\u3001 \u5168\u4e66\u603b\u7ed3&#xff1a;\u5168\u6808\u7684\u5f52\u5bbf\u4e0e\u65b0\u7684\u5f81\u7a0b<\/p>\n<p>\u81f3\u6b64&#xff0c;\u7b2c\u5341\u4e8c\u7ae0&#xff1a;\u5de5\u7a0b\u5316\u4e0e\u767b\u4ed9\u5df2\u5168\u90e8\u8bb2\u5b8c&#xff0c;\u800c\u4f60\u7684\u5168\u6808 Next.js \u65c5\u7a0b\u4e5f\u62b5\u8fbe\u4e86\u9876\u5cf0\u3002<\/p>\n<p>\u4ece\u7b2c\u4e00\u7ae0\u7684\u521d\u8bc6\u5168\u6808&#xff0c;\u5230\u7b2c\u4e03\u7ae0\u7684\u89c6\u89c9\u4fee\u884c&#xff0c;\u518d\u5230\u7b2c\u5341\u4e00\u7ae0\u7684\u5546\u4e1a\u5b9e\u6218&#xff0c;\u6700\u540e\u5230\u8fd9\u4e00\u7ae0\u7684\u81ea\u52a8\u5316\u767b\u4ed9\u3002\u6211\u4eec\u4e0d\u4ec5\u5b66\u4e60\u4e86\u5982\u4f55\u7f16\u5199\u4ee3\u7801&#xff0c;\u66f4\u5b66\u4e60\u4e86\u5982\u4f55\u6784\u5efa\u4e00\u4e2a\u5177\u5907\u5de5\u4e1a\u5f3a\u5ea6\u3001\u80fd\u591f\u81ea\u6211\u8fed\u4ee3\u3001\u4e14\u80fd\u7ecf\u53d7\u4f4f\u5343\u4e07\u7ea7\u6d41\u91cf\u8003\u9a8c\u7684\u73b0\u4ee3\u5e94\u7528\u3002<\/p>\n<p>\u201c\u5168\u6808\u201d\u4e0d\u662f\u6280\u80fd\u7684\u5806\u780c&#xff0c;\u800c\u662f\u4e00\u79cd\u201c\u7aef\u5230\u7aef\u201d\u89e3\u51b3\u95ee\u9898\u7684\u80fd\u529b\u3002<\/p>\n<p>\u5f53\u4f60\u80fd\u4ece\u6570\u636e\u5e93\u7684\u4e00\u4e2a\u5b57\u6bb5\u8bbe\u8ba1&#xff0c;\u8054\u60f3\u5230\u524d\u7aef\u7684\u72b6\u6001\u53d8\u5316&#xff0c;\u518d\u8054\u60f3\u5230\u8fb9\u7f18\u4fa7\u7684\u903b\u8f91\u62e6\u622a&#xff0c;\u6700\u540e\u901a\u8fc7 CI\/CD \u81ea\u52a8\u5316\u5730\u5c06\u8fd9\u4e00\u5207\u5b8c\u7f8e\u5448\u73b0\u7ed9\u5168\u7403\u7528\u6237\u65f6&#xff0c;\u4f60\u4fbf\u4e0d\u518d\u53ea\u662f\u4e00\u4e2a\u201c\u7a0b\u5e8f\u5458\u201d&#xff0c;\u800c\u662f\u4e00\u4f4d\u6570\u5b57\u4e16\u754c\u7684\u201c\u9020\u7269\u4e3b\u201d\u3002<\/p>\n<h2>\u7b2c13\u7ae0&#xff1a;\u8d85\u8d8a\u4ee3\u7801\u2014\u2014\u67b6\u6784\u5e08\u7684\u8fdb\u9636\u4e4b\u8def<\/h2>\n<ul>\n<li>\n<p>13.1 \u5fae\u524d\u7aef\u67b6\u6784&#xff1a;\u00a0\u5728\u5927\u578b\u4f01\u4e1a\u4e2d\u7ec4\u5408\u591a\u4e2a Next.js \u5e94\u7528<\/p>\n<\/li>\n<li>\n<p>13.2 \u79bb\u7ebf\u80fd\u529b&#xff1a;\u00a0PWA \u4e0e Service Worker \u7684\u96c6\u6210<\/p>\n<\/li>\n<li>\n<p>13.3 \u201c\u77e5\u884c\u5408\u4e00\u201d&#xff1a;\u00a0\u4fdd\u6301\u5bf9 React \u751f\u6001&#xff08;\u5982 React Forget \u7f16\u8bd1\u5668&#xff09;\u7684\u6301\u7eed\u654f\u9510<\/p>\n<\/li>\n<\/ul>\n<h3>13.1 \u5fae\u524d\u7aef\u67b6\u6784 \u2014\u2014 \u5728\u5927\u578b\u4f01\u4e1a\u4e2d\u7ec4\u5408\u591a\u4e2a Next.js \u5e94\u7528&#xff1a;\u5206\u6cbb\u7684\u827a\u672f<\/h3>\n<p>\u5982\u679c\u8bf4\u524d\u5341\u4e8c\u7ae0\u662f\u5728\u6559\u4f60\u5982\u4f55\u96d5\u7422\u4e00\u9897\u7480\u74a8\u7684\u660e\u73e0&#xff0c;\u90a3\u4e48\u7b2c\u5341\u4e09\u7ae0\u5219\u662f\u8981\u6559\u4f60\u5982\u4f55\u5c06\u65e0\u6570\u660e\u73e0\u9576\u5d4c\u6210\u9876\u738b\u51a0\u3002\u5728\u5927\u578b\u4f01\u4e1a\u7684\u590d\u6742\u8bed\u5883\u4e0b&#xff0c;\u4e00\u4e2a\u5355\u4f53\u5e94\u7528&#xff08;Monolith&#xff09;\u5373\u4fbf\u4f7f\u7528\u4e86 Next.js&#xff0c;\u6700\u7ec8\u4e5f\u4f1a\u56e0\u56e2\u961f\u89c4\u6a21\u7684\u6269\u5f20\u548c\u4e1a\u52a1\u903b\u8f91\u7684\u5806\u53e0\u800c\u53d8\u5f97\u5c3e\u5927\u4e0d\u6389\u3002<\/p>\n<p>\u5fae\u524d\u7aef&#xff08;Micro Frontends&#xff09;\u5e76\u975e\u4e00\u79cd\u6280\u672f&#xff0c;\u800c\u662f\u4e00\u573a\u201c\u4e3b\u6743\u5206\u5272\u201d\u7684\u8fd0\u52a8\u3002\u5b83\u5141\u8bb8\u6211\u4eec\u5c06\u4e00\u4e2a\u5e9e\u5927\u7684 Web \u5e94\u7528\u62c6\u5206\u4e3a\u82e5\u5e72\u4e2a\u72ec\u7acb\u5f00\u53d1\u3001\u72ec\u7acb\u90e8\u7f72\u3001\u72ec\u7acb\u6280\u672f\u6808\u7684\u5b50\u5e94\u7528&#xff0c;\u518d\u901a\u8fc7\u67d0\u79cd\u673a\u5236\u5c06\u5b83\u4eec\u65e0\u7f1d\u5730\u62fc\u88c5\u5728\u540c\u4e00\u4e2a URL \u4e0b\u3002\u5728 Next.js \u7684\u751f\u6001\u4e2d&#xff0c;\u8fd9\u610f\u5473\u7740\u6211\u4eec\u8981\u4ece\u201c\u5355\u4f53\u5168\u6808\u201d\u5411\u201c\u5206\u5e03\u5f0f\u5168\u6808\u201d\u8fdb\u9636\u3002<\/p>\n<p>\u4e00\u3001 \u67b6\u6784\u7684\u5bbf\u547d&#xff1a;\u4ece\u201c\u7e41\u8363\u201d\u8d70\u5411\u201c\u89e3\u6784\u201d<\/p>\n<p>\u5f53\u4f60\u7684\u56e2\u961f\u4ece 5 \u4eba\u6269\u5f20\u5230 50 \u4eba&#xff0c;\u5f53\u4f60\u7684\u4e1a\u52a1\u4ece\u201c\u5728\u7ebf\u5546\u57ce\u201d\u6269\u5c55\u5230\u201c\u5546\u57ce&#043;\u8bba\u575b&#043;\u5ba2\u670d\u4e2d\u5fc3&#043;\u6570\u636e\u770b\u677f\u201d\u65f6&#xff0c;\u5355\u4f53\u67b6\u6784\u7684\u5f0a\u7aef\u4fbf\u4f1a\u6d6e\u73b0&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u7f16\u8bd1\u5669\u68a6&#xff1a;\u6539\u52a8\u4e00\u884c\u4ee3\u7801&#xff0c;\u9700\u8981\u7b49\u5f85\u6574\u4e2a\u5de8\u578b\u5e94\u7528\u5b8c\u6210\u6784\u5efa\u3002<\/p>\n<\/li>\n<li>\n<p>\u90e8\u7f72\u6050\u60e7&#xff1a;\u4e3a\u4e86\u4fee\u590d\u201c\u5ba2\u670d\u4e2d\u5fc3\u201d\u7684\u4e00\u4e2a\u5c0f Bug&#xff0c;\u4e0d\u5f97\u4e0d\u91cd\u65b0\u53d1\u5e03\u5173\u4e4e\u547d\u8109\u7684\u201c\u652f\u4ed8\u7cfb\u7edf\u201d\u3002<\/p>\n<\/li>\n<li>\n<p>\u6280\u672f\u67b7\u9501&#xff1a;\u65b0\u56e2\u961f\u60f3\u5c1d\u8bd5\u66f4\u524d\u6cbf\u7684\u6280\u672f&#xff0c;\u5374\u88ab\u8001\u65e7\u7684\u4f9d\u8d56\u6811\u7262\u7262\u9501\u6b7b\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u5fae\u524d\u7aef\u7684\u6838\u5fc3\u4ef7\u503c&#xff0c;\u5c31\u662f\u5b9e\u73b0**\u201c\u89e3\u8026\u201d**\u3002\u5b83\u8ba9\u6bcf\u4e00\u4e2a\u5b50\u5e94\u7528\u90fd\u80fd\u62e5\u6709\u81ea\u5df1\u7684\u751f\u547d\u5468\u671f&#xff0c;\u800c Next.js \u51ed\u501f\u5176\u5f3a\u5927\u7684\u8def\u7531\u4e0e\u4e2d\u95f4\u4ef6\u80fd\u529b&#xff0c;\u6210\u4e3a\u4e86\u6784\u5efa\u5fae\u524d\u7aef\u57fa\u5ea7\u7684\u5929\u7136\u9996\u9009\u3002<\/p>\n<p>\u4e8c\u3001 Next.js \u4e2d\u7684\u5fae\u524d\u7aef\u8303\u5f0f&#xff1a;\u4e09\u79cd\u4e3b\u6d41\u8def\u5f84<\/p>\n<p>\u5728 Next.js \u7684\u5de5\u7a0b\u5b9e\u8df5\u4e2d&#xff0c;\u5b9e\u73b0\u5fae\u524d\u7aef\u901a\u5e38\u6709\u4e09\u79cd\u4f18\u96c5\u7684\u59ff\u52bf&#xff1a;<\/p>\n<p>1. \u8def\u7531\u5206\u53d1\u5f0f&#xff08;Multi-Zones&#xff09;&#xff1a;\u5b98\u65b9\u63a8\u8350\u7684\u201c\u9694\u79bb\u7f8e\u5b66\u201d<\/p>\n<p>\u8fd9\u662f Next.js \u5b98\u65b9\u652f\u6301\u7684\u539f\u751f\u5fae\u524d\u7aef\u65b9\u6848\u3002\u901a\u8fc7\u914d\u7f6e\u00a0next.config.js\u00a0\u4e2d\u7684\u00a0rewrites&#xff0c;\u4f60\u53ef\u4ee5\u5c06\u4e0d\u540c\u7684\u8def\u5f84\u91cd\u5b9a\u5411\u5230\u4e0d\u540c\u7684 Next.js \u90e8\u7f72\u5b9e\u4f8b\u3002<\/p>\n<ul>\n<li>\n<p>\u573a\u666f&#xff1a;\u4e3b\u7ad9\u8bbf\u95ee\u00a0\/&#xff0c;\u535a\u5ba2\u7cfb\u7edf\u8bbf\u95ee\u00a0\/blog&#xff0c;\u540e\u53f0\u7ba1\u7406\u8bbf\u95ee\u00a0\/admin\u3002<\/p>\n<\/li>\n<li>\n<p>\u4f18\u52bf&#xff1a;\u7edd\u5bf9\u7684\u9694\u79bb\u3002\u6bcf\u4e2a\u5b50\u5e94\u7528\u90fd\u662f\u72ec\u7acb\u7684 Git \u4ed3\u5e93\u3001\u72ec\u7acb\u7684 Vercel \u5b9e\u4f8b\u3002\u5b83\u4eec\u4e4b\u95f4\u4e92\u4e0d\u5e72\u6270&#xff0c;\u5374\u5728\u7528\u6237\u611f\u5b98\u4e2d\u6d51\u7136\u4e00\u4f53\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. Module Federation&#xff1a;\u8fd0\u884c\u65f6\u7684\u201c\u4ee3\u7801\u5171\u4eab\u201d<\/p>\n<p>\u501f\u52a9\u4e8e Webpack 5 \u7684\u00a0\u6a21\u5757\u8054\u90a6&#xff08;Module Federation&#xff09;&#xff0c;\u4e0d\u540c\u7684 Next.js \u5e94\u7528\u53ef\u4ee5\u5728\u8fd0\u884c\u65f6\u5171\u4eab\u7ec4\u4ef6\u6216\u903b\u8f91\u3002<\/p>\n<ul>\n<li>\n<p>\u573a\u666f&#xff1a;\u4e3b\u5e94\u7528\u5b9e\u65f6\u8c03\u7528\u6765\u81ea\u201c\u7ec4\u4ef6\u5e93\u5e94\u7528\u201d\u7684\u5bfc\u822a\u680f&#xff0c;\u6216\u6765\u81ea\u201c\u7528\u6237\u4e2d\u5fc3\u201d\u7684\u4fa7\u8fb9\u680f\u3002<\/p>\n<\/li>\n<li>\n<p>\u4f18\u52bf&#xff1a;\u6253\u7834\u4e86\u9759\u6001\u6253\u5305\u7684\u754c\u9650\u3002\u5b50\u5e94\u7528\u66f4\u65b0\u4e86\u7ec4\u4ef6&#xff0c;\u4e3b\u5e94\u7528\u65e0\u9700\u91cd\u65b0\u6784\u5efa\u5373\u53ef\u81ea\u52a8\u611f\u77e5\u3002<\/p>\n<\/li>\n<\/ul>\n<p>3. \u7ec4\u5408\u5f0f\u4e2d\u95f4\u4ef6&#xff08;Edge Middleware Routing&#xff09;<\/p>\n<p>\u5229\u7528\u6211\u4eec\u5728\u524d\u9762\u7ae0\u8282\u5b66\u5230\u7684\u00a0Middleware\u3002\u5728\u8bf7\u6c42\u5230\u8fbe\u4e4b\u524d&#xff0c;\u6839\u636e Header\u3001Cookie \u6216\u8def\u5f84&#xff0c;\u5728\u8fb9\u7f18\u4fa7\u52a8\u6001\u51b3\u5b9a\u8f6c\u53d1\u7ed9\u54ea\u4e00\u4e2a\u5fae\u524d\u7aef\u5b9e\u4f8b\u3002\u8fd9\u79cd\u65b9\u6848\u5177\u5907\u6781\u9ad8\u7684\u7075\u6d3b\u6027&#xff0c;\u5c24\u5176\u9002\u5408 A\/B \u6d4b\u8bd5\u548c\u7070\u5ea6\u53d1\u5e03\u3002<\/p>\n<p>\u4e09\u3001 \u4e13\u5bb6\u7ea7\u6311\u6218&#xff1a;\u5fae\u524d\u7aef\u4e2d\u7684\u201c\u5168\u6808\u5171\u9e23\u201d<\/p>\n<p>\u5fae\u524d\u7aef\u4e0d\u662f\u7b80\u5355\u7684\u9875\u9762\u5806\u780c&#xff0c;\u5b83\u9762\u4e34\u7740\u5168\u6808\u7ef4\u5ea6\u7684\u201c\u4e8c\u6b21\u5f00\u53d1\u201d\u6311\u6218&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u5168\u5c40\u72b6\u6001\u7684\u201c\u5927\u4e00\u7edf\u201d&#xff1a; \u5f53\u7528\u6237\u4ece\u201c\u5546\u57ce\u201d\u8fdb\u5165\u201c\u5ba2\u670d\u201d&#xff0c;\u5982\u4f55\u4fdd\u6301\u8d2d\u7269\u8f66\u6570\u5b57\u7684\u4e00\u81f4&#xff1f;\u6211\u4eec\u901a\u5e38\u5229\u7528\u00a0Custom Events\u00a0\u6216\u57fa\u4e8e\u00a0Redis \u7684\u670d\u52a1\u7aef Session\u3002\u5728\u5fae\u524d\u7aef\u4e2d&#xff0c;\u72b6\u6001\u4e0d\u518d\u5b58\u50a8\u5728\u5185\u5b58\u91cc&#xff0c;\u800c\u662f\u5728\u201c\u5171\u8bc6\u201d\u91cc\u3002<\/p>\n<\/li>\n<li>\n<p>\u6837\u5f0f\u7684\u201c\u9694\u79bb\u4e0e\u5171\u751f\u201d&#xff1a; \u5982\u4f55\u9632\u6b62\u5b50\u5e94\u7528 A \u7684 CSS \u6c61\u67d3\u4e86\u5b50\u5e94\u7528 B&#xff1f;Tailwind CSS\u00a0\u7684\u7c7b\u540d\u9694\u79bb\u548c\u00a0CSS Modules\u00a0\u5728\u8fd9\u91cc\u6210\u4e3a\u4e86\u6551\u547d\u7a3b\u8349\u3002\u66f4\u9ad8\u7ea7\u7684\u65b9\u6848\u662f\u91c7\u7528\u00a0Shadow DOM&#xff0c;\u5728\u7269\u7406\u5c42\u9762\u4e0a\u5207\u65ad\u6837\u5f0f\u7684\u6e17\u900f\u3002<\/p>\n<\/li>\n<li>\n<p>\u516c\u5171\u4f9d\u8d56\u7684\u201c\u53bb\u5197\u4f59\u201d&#xff1a; \u6bcf\u4e00\u4e2a\u5b50\u5e94\u7528\u90fd\u6253\u5305\u4e00\u4efd React \u663e\u7136\u662f\u6d6a\u8d39\u7684\u3002\u901a\u8fc7\u6784\u5efa\u914d\u7f6e&#xff0c;\u5c06 React \u7b49\u6838\u5fc3\u5e93\u8bbe\u4e3a External&#xff08;\u5916\u90e8\u4f9d\u8d56&#xff09;&#xff0c;\u7531\u57fa\u5ea7\u5e94\u7528\u7edf\u4e00\u63d0\u4f9b&#xff0c;\u662f\u4f18\u5316\u5fae\u524d\u7aef\u6027\u80fd\u7684\u5fc5\u7ecf\u4e4b\u8def\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u56db\u3001 \u67b6\u6784\u5e08\u7684\u6743\u8861&#xff1a;\u4e0d\u8981\u4e3a\u4e86\u201c\u62c6\u201d\u800c\u201c\u62c6\u201d<\/p>\n<p>\u4f5c\u4e3a\u8fdb\u9636\u4e4b\u8def\u4e0a\u7684\u67b6\u6784\u5e08&#xff0c;\u5fc5\u987b\u4fdd\u6301\u514b\u5236&#xff1a;<\/p>\n<li>\n<p>\u7c92\u5ea6\u63a7\u5236&#xff1a;\u5fae\u524d\u7aef\u7684\u62c6\u5206\u7c92\u5ea6\u5e94\u57fa\u4e8e**\u201c\u56e2\u961f\u8fb9\u754c\u201d**\u800c\u975e\u201c\u7ec4\u4ef6\u8fb9\u754c\u201d\u3002\u5982\u679c\u4e24\u4e2a\u529f\u80fd\u7531\u540c\u4e00\u4e2a\u5c0f\u7ec4\u7ef4\u62a4&#xff0c;\u5f3a\u884c\u62c6\u5206\u53ea\u4f1a\u589e\u52a0\u8054\u8c03\u7684\u75db\u82e6\u3002<\/p>\n<\/li>\n<li>\n<p>\u57fa\u7840\u8bbe\u65bd\u6210\u672c&#xff1a;\u5fae\u524d\u7aef\u610f\u5473\u7740\u4f60\u9700\u8981\u591a\u5957 CI\/CD\u3001\u591a\u5957\u76d1\u63a7\u3001\u591a\u5957\u73af\u5883\u53d8\u91cf\u3002\u5982\u679c\u4f60\u7684\u56e2\u961f\u89c4\u6a21\u4e0d\u8db3\u4ee5\u8986\u76d6\u8fd9\u4e9b\u8fd0\u7ef4\u6210\u672c&#xff0c;\u5355\u4f53\u67b6\u6784\u4f9d\u7136\u662f\u4f60\u7684\u6700\u4f73\u9009\u62e9\u3002<\/p>\n<\/li>\n<li>\n<p>\u4e00\u81f4\u6027\u4f53\u9a8c&#xff1a;\u5fae\u524d\u7aef\u6700\u5fcc\u8bb3\u7684\u662f\u201c\u62fc\u63a5\u611f\u201d\u3002\u4e00\u5957\u7edf\u4e00\u7684\u00a0Design System&#xff08;\u8bbe\u8ba1\u7cfb\u7edf&#xff09;\u00a0\u662f\u5fae\u524d\u7aef\u6210\u529f\u7684\u5148\u51b3\u6761\u4ef6&#xff0c;\u786e\u4fdd\u65e0\u8bba\u7528\u6237\u8df3\u5230\u54ea\u4e2a\u5b50\u5e94\u7528&#xff0c;\u89c6\u89c9\u8bed\u8a00\u59cb\u7ec8\u5982\u4e00\u3002<\/p>\n<\/li>\n<p>\u4e94\u3001 \u603b\u7ed3&#xff1a;\u4ece\u201c\u5de5\u5320\u201d\u5230\u201c\u5efa\u7b51\u5e08\u201d<\/p>\n<p>\u672c\u8282\u7684\u5fae\u524d\u7aef\u4e4b\u65c5&#xff0c;\u6807\u5fd7\u7740\u4f60\u4ece\u4e00\u540d\u201c\u4ee3\u7801\u7f16\u5199\u8005\u201d\u6b63\u5f0f\u8fc8\u5411\u4e86\u201c\u7cfb\u7edf\u67b6\u6784\u5e08\u201d\u3002<\/p>\n<p>\u5fae\u524d\u7aef\u4e0d\u4ec5\u662f\u6280\u672f\u7684\u9009\u578b&#xff0c;\u66f4\u662f\u4e00\u79cd\u5173\u4e8e**\u201c\u7ec4\u7ec7\u6548\u7387\u201d**\u7684\u54f2\u5b66\u3002\u5b83\u627f\u8ba4\u4e86\u590d\u6742\u6027\u7684\u4e0d\u53ef\u907f\u514d&#xff0c;\u5e76\u8bd5\u56fe\u901a\u8fc7\u5206\u800c\u6cbb\u4e4b\u7684\u667a\u6167&#xff0c;\u5728\u5e9e\u5927\u7684\u4f01\u4e1a\u7ea7\u8f6f\u4ef6\u4e2d\u4fdd\u7559\u654f\u6377\u4e0e\u521b\u65b0\u7684\u706b\u79cd\u3002<\/p>\n<p>\u201c\u67b6\u6784\u201d\u7684\u672c\u8d28&#xff0c;\u662f\u5728\u7ea6\u675f\u4e2d\u5bfb\u627e\u81ea\u7531\u3002\u00a0\u5f53\u4f60\u80fd\u5728 Next.js \u7684\u5e95\u5ea7\u4e0a&#xff0c;\u4f18\u96c5\u5730\u7f16\u7ec7\u8d77\u4e00\u4e2a\u4e2a\u72ec\u7acb\u7684\u5b50\u5e94\u7528&#xff0c;\u8ba9\u5b83\u4eec\u65e2\u80fd\u72ec\u7acb\u6f14\u8fdb&#xff0c;\u53c8\u80fd\u534f\u540c\u4f5c\u6218\u65f6&#xff0c;\u4f60\u4fbf\u638c\u63e1\u4e86\u9a7e\u9a6d\u8d85\u5927\u578b\u5168\u6808\u9879\u76ee\u7684\u6700\u9ad8\u827a\u672f\u3002<\/p>\n<p>\u5927\u53a6\u7684\u6846\u67b6\u5df2\u7ecf\u642d\u5efa&#xff0c;\u5206\u5e03\u5f0f\u7684\u529b\u91cf\u5df2\u7ecf\u89c9\u9192\u3002\u4f46\u4e00\u4e2a\u4f1f\u5927\u7684\u5e94\u7528\u4e0d\u4ec5\u8981\u5728\u201c\u8fde\u7ebf\u201d\u65f6\u5f3a\u5927&#xff0c;\u66f4\u8981\u5728\u201c\u65ad\u7f51\u201d\u65f6\u575a\u97e7\u3002\u5982\u4f55\u8d4b\u4e88\u4f60\u7684 Next.js \u5e94\u7528\u79bb\u7ebf\u751f\u5b58\u7684\u80fd\u529b&#xff1f;\u5982\u4f55\u8ba9\u5b83\u50cf\u539f\u751f App \u4e00\u6837\u5e38\u9a7b\u7528\u6237\u7684\u624b\u673a\u5c4f\u5e55&#xff1f;\u8fd9\u5c31\u662f\u4e0b\u4e00\u8282\u6211\u4eec\u8981\u653b\u514b\u7684\u9886\u5730\u2014\u2014\u79bb\u7ebf\u80fd\u529b&#xff1a;PWA \u4e0e Service Worker \u7684\u96c6\u6210\u3002<\/p>\n<h3>13.2 \u79bb\u7ebf\u80fd\u529b \u2014\u2014 PWA \u4e0e Service Worker \u7684\u96c6\u6210&#xff1a;\u8d4b\u4e88 Web \u5e94\u7528\u201c\u6c38\u6052\u7684\u751f\u547d\u529b\u201d<\/h3>\n<p>\u5982\u679c\u8bf4\u5fae\u524d\u7aef\u662f\u5728\u7a7a\u95f4\u7ef4\u5ea6\u4e0a\u6269\u5f20\u5e94\u7528\u7684\u7248\u56fe&#xff0c;\u90a3\u4e48\u00a0PWA&#xff08;Progressive Web Apps&#xff0c;\u6e10\u8fdb\u5f0f Web \u5e94\u7528&#xff09;\u00a0\u5c31\u662f\u5728\u65f6\u95f4\u4e0e\u73af\u5883\u7684\u7ef4\u5ea6\u4e0a&#xff0c;\u8d4b\u4e88\u5e94\u7528\u4e00\u79cd\u201c\u8de8\u8d8a\u9e3f\u6c9f\u201d\u7684\u97e7\u6027\u3002<\/p>\n<p>\u957f\u671f\u4ee5\u6765&#xff0c;Web \u5e94\u7528\u4e00\u76f4\u88ab\u8bdf\u75c5\u4e3a\u201c\u6e29\u5ba4\u91cc\u7684\u82b1\u6735\u201d&#xff1a;\u4e00\u65e6\u65ad\u5f00\u7f51\u7edc&#xff0c;\u5b83\u4fbf\u77ac\u95f4\u67af\u7aed&#xff0c;\u53ea\u5269\u4e0b\u4e00\u7247\u7a7a\u767d\u7684\u62a5\u9519\u3002\u800c 13.2 \u8282\u6240\u63a2\u8ba8\u7684&#xff0c;\u6b63\u662f\u5982\u4f55\u901a\u8fc7\u00a0Service Worker\u00a0\u8fd9\u5c42\u201c\u6570\u5b57\u9694\u819c\u201d&#xff0c;\u5728\u6d4f\u89c8\u5668\u4e0e\u7f51\u7edc\u4e4b\u95f4\u5efa\u7acb\u4e00\u4e2a\u667a\u80fd\u7684\u8c03\u5ea6\u7ad9\u3002\u8ba9\u4f60\u7684 Next.js \u5e94\u7528\u4e0d\u4ec5\u80fd\u50cf\u539f\u751f App \u4e00\u6837\u5b89\u88c5\u5230\u4e3b\u5c4f\u5e55&#xff0c;\u66f4\u80fd\u5728\u5730\u94c1\u3001\u7535\u68af\u3001\u751a\u81f3\u8352\u90ca\u91ce\u5916\u7684\u79bb\u7ebf\u73af\u5883\u4e2d&#xff0c;\u4f9d\u7136\u4fdd\u6301\u4f18\u96c5\u7684\u53ef\u7528\u6027\u3002<\/p>\n<p>\u4e00\u3001 \u7834\u8327\u6210\u8776&#xff1a;\u4ece\u201c\u7f51\u7ad9\u201d\u5230\u201c\u5e94\u7528\u201d\u7684\u8dc3\u8fc1<\/p>\n<p>PWA \u7684\u6838\u5fc3\u7406\u5ff5&#xff0c;\u662f\u6d88\u9664 Web \u4e0e Native&#xff08;\u539f\u751f&#xff09;\u4e4b\u95f4\u7684\u4e0d\u5e73\u7b49\u6761\u7ea6\u3002\u5b83\u901a\u8fc7\u4e09\u6839\u652f\u67f1\u652f\u6491\u8d77\u4e00\u79cd\u5168\u65b0\u7684\u4f53\u9a8c&#xff1a;<\/p>\n<li>\n<p>\u53ef\u5b89\u88c5\u6027 (Installable)&#xff1a;\u901a\u8fc7\u00a0manifest.json&#xff0c;\u7528\u6237\u53ef\u4ee5\u5c06\u4f60\u7684\u535a\u5ba2\u6216\u5546\u57ce\u201c\u6dfb\u52a0\u81f3\u684c\u9762\u201d\u3002\u5b83\u4e0d\u518d\u6709\u7e41\u7410\u7684\u6d4f\u89c8\u5668\u5730\u5740\u680f&#xff0c;\u800c\u662f\u62e5\u6709\u72ec\u7acb\u7684\u56fe\u6807\u548c\u542f\u52a8\u52a8\u753b\u3002<\/p>\n<\/li>\n<li>\n<p>\u53ef\u9760\u6027 (Reliable)&#xff1a;\u65e0\u8bba\u7f51\u7edc\u72b6\u51b5\u5982\u4f55&#xff0c;\u5373\u4fbf\u662f\u6781\u6162\u7684 2G \u6216\u662f\u79bb\u7ebf&#xff08;Offline&#xff09;&#xff0c;\u5e94\u7528\u90fd\u80fd\u77ac\u95f4\u542f\u52a8&#xff0c;\u4e0d\u518d\u663e\u793a\u201c\u5c0f\u6050\u9f99\u201d\u3002<\/p>\n<\/li>\n<li>\n<p>\u54cd\u5e94\u6027 (Capable)&#xff1a;\u5229\u7528\u00a0Push API\u00a0\u63a8\u9001\u901a\u77e5&#xff0c;\u5229\u7528\u00a0Background Sync\u00a0\u5728\u7f51\u7edc\u6062\u590d\u540e\u81ea\u52a8\u63d0\u4ea4\u79bb\u7ebf\u65f6\u7684\u64cd\u4f5c\u3002<\/p>\n<\/li>\n<p>\u4e8c\u3001 \u5e55\u540e\u529f\u81e3&#xff1a;Service Worker \u7684\u751f\u547d\u5468\u671f\u4e0e\u7b56\u7565<\/p>\n<p>Service Worker\u00a0\u662f PWA \u7684\u7075\u9b42\u3002\u5b83\u662f\u4e00\u4e2a\u72ec\u7acb\u4e8e\u7f51\u9875\u4e3b\u7ebf\u7a0b\u4e4b\u5916\u7684\u811a\u672c&#xff0c;\u5145\u5f53\u7740\u4ee3\u7406\u670d\u52a1\u5668\u7684\u89d2\u8272\u3002<\/p>\n<p>\u5728 Next.js \u4e2d\u96c6\u6210 Service Worker&#xff0c;\u672c\u8d28\u4e0a\u662f\u5728\u5b9a\u4e49\u4e00\u5957\u7f13\u5b58\u62e6\u622a\u7b97\u6cd5\u3002\u901a\u5e38\u6211\u4eec\u4f1a\u91c7\u7528\u4ee5\u4e0b\u51e0\u79cd\u7ecf\u5178\u7684\u7f13\u5b58\u7b56\u7565&#xff1a;<\/p>\n<ul>\n<li>\n<p>Cache First (\u7f13\u5b58\u4f18\u5148)&#xff1a;\u9002\u7528\u4e8e\u9759\u6001\u8d44\u6e90&#xff08;\u5b57\u4f53\u3001\u56fe\u7247\u3001CSS&#xff09;\u3002\u6d4f\u89c8\u5668\u5148\u53bb\u7f13\u5b58\u627e&#xff0c;\u627e\u4e0d\u5230\u518d\u53bb\u7f51\u7edc\u4e0b\u8f7d\u3002\u8fd9\u8ba9\u9875\u9762\u52a0\u8f7d\u5feb\u5982\u95ea\u7535\u3002<\/p>\n<\/li>\n<li>\n<p>Stale-While-Revalidate (\u8fc7\u671f\u5373\u66f4\u65b0)&#xff1a;\u6700\u9002\u5408 Next.js \u5185\u5bb9\u7684\u7b56\u7565\u3002\u4f18\u5148\u7ed9\u7528\u6237\u770b\u65e7\u7684\u7f13\u5b58\u5185\u5bb9\u4ee5\u4fdd\u8bc1\u901f\u5ea6&#xff0c;\u540c\u65f6\u5728\u540e\u53f0\u9759\u9ed8\u8bf7\u6c42\u65b0\u6570\u636e\u5e76\u66f4\u65b0\u7f13\u5b58&#xff0c;\u786e\u4fdd\u201c\u4e0b\u6b21\u4e00\u5b9a\u662f\u6700\u65b0\u7684\u201d\u3002<\/p>\n<\/li>\n<li>\n<p>Network First (\u7f51\u7edc\u4f18\u5148)&#xff1a;\u9002\u7528\u4e8e\u5bf9\u65f6\u6548\u6027\u8981\u6c42\u6781\u9ad8\u7684 API \u8bf7\u6c42&#xff08;\u5982\u4f59\u989d\u3001\u5b9e\u65f6\u5e93\u5b58&#xff09;\u3002\u53ea\u6709\u5728\u7f51\u7edc\u5f7b\u5e95\u6302\u6389\u65f6&#xff0c;\u624d\u5c55\u793a\u4e0a\u6b21\u7f13\u5b58\u7684\u65e7\u6570\u636e\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e09\u3001 \u6df1\u5ea6\u96c6\u6210&#xff1a;\u5728 Next.js \u4e2d\u542f\u7528 PWA<\/p>\n<p>\u5728 App Router \u67b6\u6784\u4e0b&#xff0c;\u6211\u4eec\u901a\u5e38\u4f7f\u7528\u00a0next-pwa\u00a0\u6216\u66f4\u73b0\u4ee3\u7684\u7ec4\u4ef6\u5316\u65b9\u6848\u6765\u7b80\u5316\u914d\u7f6e\u3002<\/p>\n<p>1. \u58f0\u660e\u6e05\u5355 (Manifest)<\/p>\n<p>\u5728\u00a0public\u00a0\u76ee\u5f55\u4e0b\u521b\u5efa\u00a0manifest.json&#xff0c;\u5b9a\u4e49\u5e94\u7528\u7684\u8eab\u4efd&#xff1a;<\/p>\n<p>{<br \/>\n  &#034;name&#034;: &#034;Next.js \u5168\u6808\u7ec8\u6781\u5e73\u53f0&#034;,<br \/>\n  &#034;short_name&#034;: &#034;NextApp&#034;,<br \/>\n  &#034;start_url&#034;: &#034;\/&#034;,<br \/>\n  &#034;display&#034;: &#034;standalone&#034;,<br \/>\n  &#034;background_color&#034;: &#034;#ffffff&#034;,<br \/>\n  &#034;theme_color&#034;: &#034;#000000&#034;,<br \/>\n  &#034;icons&#034;: [ &#8230; ]<br \/>\n}<\/p>\n<p>2. \u914d\u7f6e Service Worker \u7b56\u7565<\/p>\n<p>\u5229\u7528 Workbox \u63d2\u4ef6&#xff0c;\u6211\u4eec\u53ef\u4ee5\u7cbe\u51c6\u63a7\u5236\u54ea\u4e9b\u8def\u7531\u9700\u8981\u79bb\u7ebf\u652f\u6301&#xff1a;<\/p>\n<p>\/\/ next.config.js<br \/>\nconst withPWA &#061; require(&#039;next-pwa&#039;)({<br \/>\n  dest: &#039;public&#039;,<br \/>\n  disable: process.env.NODE_ENV &#061;&#061;&#061; &#039;development&#039;,<br \/>\n  register: true,<br \/>\n  skipWaiting: true,<br \/>\n});<\/p>\n<p>module.exports &#061; withPWA({<br \/>\n  \/\/ \u4f60\u7684\u5176\u4ed6 Next.js \u914d\u7f6e<br \/>\n});<\/p>\n<p>\u56db\u3001 \u4e13\u5bb6\u7ea7\u6311\u6218&#xff1a;\u5904\u7406\u79bb\u7ebf\u72b6\u6001\u4e0b\u7684\u201c\u6570\u636e\u9e3f\u6c9f\u201d<\/p>\n<p>\u771f\u6b63\u7684 PWA \u4e13\u5bb6\u4e0d\u4ec5\u5173\u6ce8\u9875\u9762\u80fd\u663e\u793a&#xff0c;\u66f4\u5173\u6ce8\u6570\u636e\u7684\u6700\u7ec8\u4e00\u81f4\u6027\u3002<\/p>\n<ul>\n<li>\n<p>\u79bb\u7ebf\u5b58\u50a8 (IndexedDB)&#xff1a; \u5f53\u7528\u6237\u5728\u79bb\u7ebf\u72b6\u6001\u4e0b\u70b9\u51fb\u4e86\u201c\u6536\u85cf\u5546\u54c1\u201d\u6216\u201c\u63d0\u4ea4\u8bc4\u8bba\u201d&#xff0c;\u4f60\u4e0d\u80fd\u62a5\u9519\u3002\u4f60\u5e94\u8be5\u5229\u7528\u00a0IndexedDB\u00a0\u5c06\u8fd9\u4e9b\u64cd\u4f5c\u6682\u5b58\u5728\u672c\u5730\u3002<\/p>\n<\/li>\n<li>\n<p>\u540e\u53f0\u540c\u6b65 (Background Sync)&#xff1a; \u5229\u7528 Service Worker \u7684\u00a0sync\u00a0\u4e8b\u4ef6\u3002\u5f53\u7528\u6237\u7684\u7f51\u7edc\u6062\u590d\u65f6&#xff0c;\u6d4f\u89c8\u5668\u4f1a\u81ea\u52a8\u5728\u540e\u53f0\u5524\u9192 Service Worker&#xff0c;\u5c06 IndexedDB \u4e2d\u79ef\u538b\u7684\u8bf7\u6c42\u91cd\u65b0\u53d1\u9001\u7ed9\u670d\u52a1\u5668\u3002\u8fd9\u79cd**\u201c\u5f02\u6b65\u91cd\u8bd5\u201d**\u673a\u5236&#xff0c;\u662f\u6784\u5efa\u575a\u97e7\u5168\u6808\u7cfb\u7edf\u7684\u7ec8\u6781\u4f53\u73b0\u3002<\/p>\n<\/li>\n<li>\n<p>\u79bb\u7ebf\u9875\u9762\u7684\u4f18\u96c5\u964d\u7ea7&#xff1a; \u5982\u679c\u7528\u6237\u5c1d\u8bd5\u8bbf\u95ee\u4e00\u4e2a\u4ece\u672a\u88ab\u7f13\u5b58\u8fc7\u7684\u9875\u9762&#xff0c;\u4e0d\u8981\u8ba9\u6d4f\u89c8\u5668\u663e\u793a\u9ed8\u8ba4\u7684\u8fde\u63a5\u5931\u8d25\u3002\u4f60\u5e94\u8be5\u63d0\u4f9b\u4e00\u4e2a\u4e13\u95e8\u7684\u00a0offline.html&#xff0c;\u544a\u8bc9\u7528\u6237&#xff1a;\u201c\u5f53\u524d\u5904\u4e8e\u79bb\u7ebf\u72b6\u6001&#xff0c;\u4f46\u4f60\u4f9d\u7136\u53ef\u4ee5\u9605\u8bfb\u5df2\u4e0b\u8f7d\u7684\u6587\u7ae0\u201d\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e94\u3001 \u67b6\u6784\u5e08\u7684\u89c6\u89d2&#xff1a;\u6027\u80fd\u4e0e\u5b58\u50a8\u7684\u6743\u8861<\/p>\n<p>\u79bb\u7ebf\u80fd\u529b\u662f\u4e00\u628a\u53cc\u5203\u5251&#xff0c;\u67b6\u6784\u5e08\u5fc5\u987b\u65f6\u523b\u4fdd\u6301\u8b66\u60d5&#xff1a;<\/p>\n<li>\n<p>\u7f13\u5b58\u81a8\u80c0 (Cache Bloat)&#xff1a; \u4e0d\u8981\u8bd5\u56fe\u7f13\u5b58\u6574\u4e2a\u7f51\u7ad9\u3002\u8fc7\u5927\u7684\u7f13\u5b58\u4f1a\u6324\u5360\u7528\u6237\u7684\u624b\u673a\u7a7a\u95f4&#xff0c;\u751a\u81f3\u5bfc\u81f4\u6d4f\u89c8\u5668\u5f3a\u5236\u6e05\u7406\u3002<\/p>\n<\/li>\n<li>\n<p>\u7248\u672c\u63a7\u5236\u4e0e\u201c\u7f13\u5b58\u4e2d\u6bd2\u201d&#xff1a; \u5982\u679c Service Worker \u7684\u7f13\u5b58\u903b\u8f91\u5199\u9519&#xff0c;\u7528\u6237\u53ef\u80fd\u4f1a\u6c38\u8fdc\u770b\u5230\u65e7\u9875\u9762&#xff0c;\u751a\u81f3\u8fde\u66f4\u65b0\u4ee3\u7801\u90fd\u65e0\u6cd5\u89e6\u8fbe\u3002\u5fc5\u987b\u5efa\u7acb\u4e25\u683c\u7684\u00a0Version Hash\u00a0\u673a\u5236\u3002<\/p>\n<\/li>\n<li>\n<p>\u7528\u6237\u9690\u79c1\u4e0e\u5b89\u5168&#xff1a; Service Worker \u53ea\u80fd\u5728\u00a0HTTPS\u00a0\u73af\u5883\u4e0b\u8fd0\u884c\u3002\u5b83\u62e5\u6709\u62e6\u622a\u6240\u6709\u8bf7\u6c42\u7684\u6743\u529b&#xff0c;\u8fd9\u610f\u5473\u7740\u5b83\u4e5f\u662f\u5b89\u5168\u9632\u62a4\u7684\u6700\u524d\u7ebf\u3002<\/p>\n<\/li>\n<p>\u516d\u3001 \u603b\u7ed3&#xff1a;\u901a\u5f80\u201c\u65e0\u6240\u4e0d\u5728\u201d\u7684 Web<\/p>\n<p>\u672c\u8282\u7684\u610f\u4e49\u5728\u4e8e\u6253\u7834\u4e86 Web \u7684\u5730\u7406\u754c\u9650\u3002<\/p>\n<p>\u901a\u8fc7 PWA&#xff0c;\u4f60\u7684 Next.js \u5e94\u7528\u4e0d\u518d\u662f\u4e00\u4e2a\u88ab\u52a8\u7b49\u5f85\u70b9\u51fb\u7684\u7f51\u9875&#xff0c;\u800c\u662f\u4e00\u4e2a\u4e3b\u52a8\u5360\u636e\u7528\u6237\u8bbe\u5907\u3001\u5177\u5907\u81ea\u6108\u80fd\u529b\u3001\u80fd\u5728\u6781\u7aef\u73af\u5883\u4e0b\u751f\u5b58\u7684\u5f3a\u529b\u5e94\u7528\u3002<\/p>\n<p>\u201c\u79bb\u7ebf\u201d\u5e76\u975e\u4e00\u79cd\u7f3a\u5931&#xff0c;\u800c\u662f\u4e00\u79cd\u8bbe\u8ba1\u3002\u00a0\u5f53\u4f60\u80fd\u591f\u638c\u63a7\u7f13\u5b58\u7684\u5f8b\u52a8&#xff0c;\u8ba9\u6570\u636e\u5728\u79bb\u7ebf\u4e0e\u5728\u7ebf\u4e4b\u95f4\u65e0\u7f1d\u6d41\u8f6c\u65f6&#xff0c;\u4f60\u4fbf\u8d85\u8d8a\u4e86\u4ee3\u7801\u672c\u8eab&#xff0c;\u5f00\u59cb\u4ece\u201c\u5f00\u53d1\u8005\u201d\u5411\u201c\u4f53\u9a8c\u67b6\u6784\u5e08\u201d\u6f14\u8fdb\u3002\u8fd9\u79cd\u8d4b\u4e88\u5e94\u7528\u6c38\u6052\u751f\u547d\u529b\u7684\u80fd\u529b&#xff0c;\u6b63\u662f\u5168\u6808\u767b\u4ed9\u4e4b\u8def\u4e0a\u7684\u5173\u952e\u57fa\u77f3\u3002<\/p>\n<p>\u5e94\u7528\u5df2\u7ecf\u8db3\u591f\u575a\u97e7&#xff0c;\u65e0\u8bba\u8eab\u5904\u4f55\u5730&#xff0c;\u5b83\u90fd\u80fd\u7a33\u5982\u6cf0\u5c71\u3002\u4f46\u5728\u6280\u672f\u4e16\u754c\u91cc&#xff0c;\u9759\u6b62\u5373\u662f\u9000\u5316\u3002\u4f5c\u4e3a\u67b6\u6784\u5e08&#xff0c;\u5982\u4f55\u5728\u9ad8\u5f3a\u5ea6\u7684\u5de5\u4f5c\u4e2d\u4fdd\u6301\u5bf9 React \u751f\u6001\u6700\u524d\u6cbf\u8109\u52a8\u7684\u6355\u6349&#xff1f;\u5982\u4f55\u8ba9\u4f60\u7684\u8ba4\u77e5\u59cb\u7ec8\u5904\u4e8e\u201c\u7f16\u8bd1\u5668\u7ea7\u201d\u7684\u6df1\u5ea6&#xff1f;\u8fd9\u5c31\u662f\u672c\u4e66\u7684\u6700\u540e\u4e00\u8bfe\u2014\u2014\u201c\u77e5\u884c\u5408\u4e00\u201d&#xff1a;\u4fdd\u6301\u5bf9 React \u751f\u6001&#xff08;\u5982 React Forget \u7f16\u8bd1\u5668&#xff09;\u7684\u6301\u7eed\u654f\u9510\u3002\u60a8\u51c6\u5907\u597d\u8fce\u63a5\u6700\u540e\u7684\u601d\u60f3\u5347\u534e\u4e86\u5417&#xff1f;<\/p>\n<h3>13.3 \u201c\u77e5\u884c\u5408\u4e00\u201d \u2014\u2014 \u4fdd\u6301\u5bf9 React \u751f\u6001\u7684\u6301\u7eed\u654f\u9510&#xff1a;\u67b6\u6784\u5e08\u7684\u7ec8\u8eab\u4fee\u884c<\/h3>\n<p>\u5982\u679c\u8bf4\u672c\u8282\u662f\u7a7a\u95f4\u7684\u535a\u5f08&#xff0c;13.2 \u8282\u662f\u73af\u5883\u7684\u6297\u4e89&#xff0c;\u90a3\u4e48\u4f5c\u4e3a\u5168\u4e66\u7ec8\u7ae0\u7684\u6700\u540e\u5c0f\u8282&#xff0c;\u5219\u662f\u5173\u4e8e\u65f6\u95f4\u4e0e\u8ba4\u77e5\u7684\u9a6c\u62c9\u677e\u3002<\/p>\n<p>\u5728\u5168\u6808\u5f00\u53d1\u7684\u9886\u57df&#xff0c;\u6280\u672f\u66f4\u8fed\u7684\u534a\u8870\u671f\u6781\u77ed\u3002\u4eca\u5929\u4f60\u5f15\u4ee5\u4e3a\u50b2\u7684\u00a0useMemo\u00a0\u4f18\u5316&#xff0c;\u53ef\u80fd\u5728\u660e\u5929\u5c31\u4f1a\u88ab\u65b0\u7684\u7f16\u8bd1\u5668\u53d6\u4ee3&#xff1b;\u4eca\u5929\u4f60\u89c6\u4e3a\u572d\u81ec\u7684\u6e32\u67d3\u6a21\u5f0f&#xff0c;\u53ef\u80fd\u5728\u540e\u5929\u5c31\u4f1a\u88ab\u66f4\u6fc0\u8fdb\u7684\u63d0\u6848\u98a0\u8986\u3002\u67b6\u6784\u5e08\u4e0e\u9ad8\u7ea7\u5f00\u53d1\u8005\u7684\u672c\u8d28\u533a\u522b&#xff0c;\u4e0d\u5728\u4e8e\u638c\u63e1\u4e86\u591a\u5c11\u73b0\u6709\u7684 API&#xff0c;\u800c\u5728\u4e8e\u80fd\u5426\u5728\u6280\u672f\u6d6a\u6f6e\u6d8c\u8d77\u4e8e\u5fae\u672b\u4e4b\u65f6&#xff0c;\u4fbf\u6d1e\u5bdf\u5176\u80cc\u540e\u7684\u6f14\u8fdb\u903b\u8f91\u3002\u00a0\u672c\u8282\u6211\u4eec\u5c06\u4ee5 React Forget \u4e3a\u5207\u5165\u70b9&#xff0c;\u63a2\u8ba8\u5982\u4f55\u5728\u65e5\u65b0\u6708\u5f02\u7684\u751f\u6001\u4e2d\u4fdd\u6301\u201c\u77e5\u884c\u5408\u4e00\u201d\u7684\u9510\u5ea6\u3002<\/p>\n<p>\u4e00\u3001 \u7f16\u8bd1\u5668\u7684\u89c9\u9192&#xff1a;\u4ece\u201c\u624b\u52a8\u6321\u201d\u5230\u201c\u81ea\u52a8\u9a7e\u9a76\u201d\u7684\u8fdb\u5316<\/p>\n<p>\u957f\u671f\u4ee5\u6765&#xff0c;React \u5f00\u53d1\u8005\u4e00\u76f4\u6df1\u9677\u5728\u201c\u624b\u52a8\u4f18\u5316\u201d\u7684\u6ce5\u6f6d\u4e2d\u3002\u4e3a\u4e86\u907f\u514d\u4e0d\u5fc5\u8981\u7684\u91cd\u7ed8&#xff0c;\u6211\u4eec\u4e0d\u5f97\u4e0d\u5c0f\u5fc3\u7ffc\u7ffc\u5730\u5305\u88f9\u00a0useMemo\u3001useCallback\u00a0\u548c\u00a0React.memo\u3002\u8fd9\u4e0d\u4ec5\u589e\u52a0\u4e86\u5fc3\u667a\u8d1f\u62c5&#xff0c;\u66f4\u8ba9\u4ee3\u7801\u5145\u6ee1\u4e86\u673a\u68b0\u7684\u3001\u975e\u4e1a\u52a1\u903b\u8f91\u7684\u566a\u97f3\u3002<\/p>\n<p>1. React Forget (React Compiler) \u7684\u54f2\u5b66<\/p>\n<p>React Forget&#xff08;\u73b0\u5df2\u6b63\u5f0f\u547d\u540d\u4e3a React Compiler&#xff09;\u7684\u51fa\u73b0&#xff0c;\u6807\u5fd7\u7740 React \u4ece\u4e00\u4e2a\u201c\u7eaf\u8fd0\u884c\u65f6\u5e93\u201d\u5411\u201c\u7f16\u8bd1\u9a71\u52a8\u6846\u67b6\u201d\u7684\u6218\u7565\u8f6c\u578b\u3002<\/p>\n<ul>\n<li>\n<p>\u6838\u5fc3\u610f\u56fe&#xff1a;\u901a\u8fc7\u9759\u6001\u5206\u6790&#xff0c;\u81ea\u52a8\u5b9e\u73b0\u7ec6\u7c92\u5ea6\u7684\u8bb0\u5fc6\u5316&#xff08;Memoization&#xff09;\u3002\u5b83\u4e0d\u518d\u9700\u8981\u5f00\u53d1\u8005\u53bb\u601d\u8003\u201c\u8fd9\u4e2a\u51fd\u6570\u662f\u5426\u9700\u8981\u7f13\u5b58\u201d&#xff0c;\u800c\u662f\u7531\u7f16\u8bd1\u5668\u5728\u6784\u5efa\u9636\u6bb5\u6ce8\u5165\u4f18\u5316\u903b\u8f91\u3002<\/p>\n<\/li>\n<li>\n<p>\u67b6\u6784\u542f\u793a&#xff1a;\u8fd9\u544a\u8bc9\u6211\u4eec&#xff0c;\u672a\u6765\u7684\u5168\u6808\u67b6\u6784\u5c06\u8d8a\u6765\u8d8a\u503e\u5411\u4e8e**\u201c\u96f6\u5fc3\u667a\u8d1f\u62c5\u201d**\u3002\u4f18\u79c0\u7684\u67b6\u6784\u5e08\u5e94\u5f53\u9884\u5224\u8fd9\u79cd\u8d8b\u52bf&#xff0c;\u5728\u7f16\u5199\u4ee3\u7801\u65f6\u4fdd\u6301\u903b\u8f91\u7684\u7eaf\u7cb9\u6027&#xff0c;\u4ee5\u4fbf\u672a\u6765\u80fd\u65e0\u7f1d\u63a5\u5165\u81ea\u52a8\u5316\u7684\u6027\u80fd\u52a0\u6301\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u4e8c\u3001 \u654f\u9510\u5ea6\u7684\u5206\u5c42&#xff1a;\u67b6\u6784\u5e08\u7684\u201c\u60c5\u62a5\u7f51\u201d<\/p>\n<p>\u4fdd\u6301\u654f\u9510\u5e76\u975e\u610f\u5473\u7740\u76f2\u76ee\u8ffd\u9010\u6bcf\u4e00\u4e2a GitHub \u4e0a\u7684\u65b0\u9879\u76ee&#xff0c;\u800c\u662f\u4e00\u573a\u6709\u8282\u594f\u7684\u6df1\u5ea6\u89c2\u5bdf\u3002<\/p>\n<p>1. \u6838\u5fc3\u63d0\u6848\u7684\u5e95\u5c42\u903b\u8f91<\/p>\n<p>\u67b6\u6784\u5e08\u5e94\u5173\u6ce8\u00a0React RFCs (Request for Comments)\u3002\u6bcf\u4e00\u4e2a\u65b0\u7279\u6027\u7684\u63a8\u51fa&#xff08;\u5982 Server Components \u6216 Actions&#xff09;&#xff0c;\u5176\u80cc\u540e\u90fd\u662f\u4e3a\u4e86\u89e3\u51b3\u7279\u5b9a\u7684\u5206\u5e03\u5f0f\u7cfb\u7edf\u77db\u76fe\u3002<\/p>\n<ul>\n<li>\n<p>\u77e5\u5176\u7136&#xff1a;\u77e5\u9053\u5982\u4f55\u4f7f\u7528\u65b0 API\u3002<\/p>\n<\/li>\n<li>\n<p>\u77e5\u5176\u6240\u4ee5\u7136&#xff1a;\u7406\u89e3\u8be5\u7279\u6027\u662f\u4e3a\u4e86\u89e3\u51b3\u7f51\u7edc IO \u7684\u74f6\u9888&#xff0c;\u8fd8\u662f\u4e3a\u4e86\u7edf\u4e00\u670d\u52a1\u7aef\u4e0e\u5ba2\u6237\u7aef\u7684\u884c\u4e3a\u6a21\u5f0f\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u751f\u6001\u7684\u5782\u76f4\u6574\u5408<\/p>\n<p>\u5173\u6ce8 Next.js \u7684\u6f14\u8fdb\u4e0d\u4ec5\u8981\u770b\u6846\u67b6\u672c\u8eab&#xff0c;\u8fd8\u8981\u770b\u5b83\u5982\u4f55\u4e0e\u00a0V8 \u5f15\u64ce\u3001Turbopack \u7f16\u8bd1\u94fe\u3001\u751a\u81f3\u00a0WebAssembly\u00a0\u8fdb\u884c\u6574\u5408\u3002\u654f\u9510\u7684\u67b6\u6784\u5e08\u4f1a\u610f\u8bc6\u5230&#xff0c;\u6027\u80fd\u7684\u4e0b\u4e00\u6b21\u98de\u8dc3\u53ef\u80fd\u4e0d\u5728 JavaScript \u5c42\u9762&#xff0c;\u800c\u662f\u5728\u5e95\u5c42\u5de5\u5177\u94fe\u7684\u91cd\u6784\u3002<\/p>\n<p>\u4e09\u3001 \u5b9e\u8df5\u4e2d\u7684\u201c\u77e5\u884c\u5408\u4e00\u201d&#xff1a;\u5728\u4fdd\u5b88\u4e0e\u6fc0\u8fdb\u95f4\u5e73\u8861<\/p>\n<p>\u201c\u77e5\u201d\u662f\u9884\u5224&#xff0c;\u201c\u884c\u201d\u662f\u843d\u5730\u3002\u67b6\u6784\u5e08\u7684\u8fdb\u9636\u4e4b\u8def&#xff0c;\u5c31\u662f\u5728\u4e00\u7247\u6df7\u6c8c\u4e2d\u627e\u5230\u90a3\u6761\u6700\u7a33\u5065\u7684\u8def\u5f84\u3002<\/p>\n<ul>\n<li>\n<p>\u5b9e\u9a8c\u6027\u7279\u6027\u7684\u53d7\u63a7\u5c1d\u8bd5&#xff1a; \u5728\u975e\u6838\u5fc3\u4e1a\u52a1\u6216\u4e2a\u4eba\u9879\u76ee\u4e2d\u5148\u884c\u8bd5\u7528 React \u7684 Canary \u7248\u672c\u3002\u8fd9\u79cd\u201c\u524d\u54e8\u6218\u201d\u80fd\u8ba9\u4f60\u5728\u6280\u672f\u6b63\u5f0f\u6210\u719f\u65f6&#xff0c;\u62e5\u6709\u8fdc\u8d85\u540c\u884c\u7684\u8fc1\u79fb\u901f\u5ea6\u548c\u907f\u5751\u7ecf\u9a8c\u3002<\/p>\n<\/li>\n<li>\n<p>\u6280\u672f\u503a\u52a1\u7684\u52a8\u6001\u6e05\u507f&#xff1a; \u5f53\u610f\u8bc6\u5230\u539f\u6709\u7684\u72b6\u6001\u7ba1\u7406\u65b9\u6848&#xff08;\u5982\u91cd\u578b Redux&#xff09;\u5df2\u4e0d\u7b26\u5408\u73b0\u4ee3\u5168\u6808\u7684\u201c\u8f7b\u91cf\u5316\u3001\u6d41\u5f0f\u201d\u8d8b\u52bf\u65f6&#xff0c;\u5e94\u6709\u8ba1\u5212\u5730\u63a8\u52a8\u5411 Zustand \u6216 Server Actions \u7684\u6f14\u8fdb\u3002\u4e0d\u8fdb\u5219\u9000&#xff0c;\u662f\u8f6f\u4ef6\u67b6\u6784\u7684\u7269\u7406\u5b9a\u5f8b\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u56db\u3001 \u7ec8\u6781\u8fdb\u9636&#xff1a;\u6784\u5efa\u81ea\u5df1\u7684\u201c\u77e5\u8bc6\u7f16\u8bd1\u5668\u201d<\/p>\n<p>\u4f5c\u4e3a\u672c\u4e66\u7684\u6700\u540e\u4e00\u8bfe&#xff0c;\u6211\u60f3\u4e0e\u4f60\u5206\u4eab\u67b6\u6784\u5e08\u6700\u6838\u5fc3\u7684\u5143\u80fd\u529b&#xff1a;\u5c06\u788e\u7247\u5316\u7684\u4fe1\u606f\u5347\u534e\u4e3a\u4f53\u7cfb\u5316\u7684\u9884\u5224\u3002<\/p>\n<li>\n<p>\u7b2c\u4e00\u6027\u539f\u7406\u601d\u8003&#xff1a; \u6bcf\u5f53\u4e00\u4e2a\u65b0\u6280\u672f\u51fa\u73b0&#xff0c;\u95ee\u81ea\u5df1&#xff1a;\u5b83\u89e3\u51b3\u4e86\u4ec0\u4e48\u672c\u8d28\u95ee\u9898&#xff1f;\u5b83\u662f\u8ba9\u4ee3\u7801\u66f4\u7b80\u6d01\u4e86&#xff0c;\u8fd8\u662f\u8ba9\u8fd0\u884c\u66f4\u5feb\u4e86&#xff1f;\u5982\u679c\u5b83\u53ea\u662f\u6362\u6c64\u4e0d\u6362\u836f\u7684\u8bed\u6cd5\u7cd6&#xff0c;\u90a3\u4e48\u5b83\u7684\u4f18\u5148\u7ea7\u5c31\u8be5\u964d\u4f4e\u3002<\/p>\n<\/li>\n<li>\n<p>\u8de8\u754c\u5438\u6536&#xff1a; \u770b React \u7684\u6f14\u8fdb&#xff0c;\u6709\u65f6\u8981\u8df3\u51fa React\u3002\u53bb\u770b\u770b Rust \u793e\u533a\u5982\u4f55\u5904\u7406\u5e76\u53d1&#xff0c;\u53bb\u770b\u770b\u540e\u7aef\u5fae\u670d\u52a1\u5982\u4f55\u5904\u7406\u6570\u636e\u4e00\u81f4\u6027\u3002\u5168\u6808\u7684\u9b45\u529b\u5728\u4e8e&#xff0c;\u4e0d\u540c\u9886\u57df\u7684\u9876\u5cf0\u5f80\u5f80\u662f\u76f8\u901a\u7684\u3002<\/p>\n<\/li>\n<li>\n<p>\u4ece\u4f7f\u7528\u8005\u53d8\u4e3a\u8f93\u51fa\u8005&#xff1a; \u5f53\u4f60\u5f00\u59cb\u5728\u56e2\u961f\u5185\u90e8\u5206\u4eab\u67b6\u6784\u601d\u8003&#xff0c;\u751a\u81f3\u5728\u793e\u533a\u8d21\u732e\u4ee3\u7801\u6216\u6587\u6863\u65f6&#xff0c;\u4f60\u7684\u8ba4\u77e5\u4f1a\u7ecf\u5386\u4e8c\u6b21\u5347\u534e\u3002\u6559\u5b66\u76f8\u957f&#xff0c;\u662f\u901a\u5f80\u201c\u5927\u5706\u6ee1\u201d\u5883\u754c\u7684\u552f\u4e00\u6377\u5f84\u3002<\/p>\n<\/li>\n<p>\u4e94\u3001 \u5168\u4e66\u603b\u7ed3&#xff1a;\u5168\u6808\u4e4b\u5dc5&#xff0c;\u5c71\u8272\u7a7a\u8499<\/p>\n<p>\u81f3\u6b64&#xff0c;\u672c\u4e66\u7684\u5168\u90e8\u7ae0\u8282\u5df2\u544a\u4e00\u6bb5\u843d\u3002<\/p>\n<p>\u4ece\u6700\u521d\u7684Web\u5f00\u53d1\u9886\u57df\u601d\u60f3\u66d9\u5149&#xff0c;\u5e76\u6301\u7eed\u8fdb\u9636\u524d\u7aef\u6280\u672f\u7684\u4e07\u5343\u672f\u6cd5&#xff0c;\u518d\u5230\u6700\u540e\u5de5\u7a0b\u4e0e\u67b6\u6784\u7684\u767b\u5802\u5165\u5ba4&#xff0c;\u6211\u4eec\u4e00\u8def\u8d70\u8fc7&#xff1a;<\/p>\n<ul>\n<li>\n<p>\u6570\u636e\u4e4b\u9aa8&#xff08;SSG\/ISR\/RSC&#xff09;&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u89c6\u89c9\u4e4b\u9b42&#xff08;Image\/Font\/Layout&#xff09;&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u5168\u6808\u4e4b\u6865&#xff08;API Routes\/Middleware&#xff09;&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u5b89\u5168\u4e4b\u76fe&#xff08;Auth\/RBAC\/Defenses&#xff09;&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u5b9e\u6218\u4e4b\u5203&#xff08;\u535a\u5ba2\/\u7535\u5546\u7cfb\u7edf&#xff09;&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u5de5\u7a0b\u4e4b\u7ffc&#xff08;Docker\/CI\/CD\/Metrics&#xff09;&#xff1b;<\/p>\n<\/li>\n<li>\n<p>\u8d85\u8d8a\u4e4b\u5883&#xff08;\u5fae\u524d\u7aef\/PWA\/\u6301\u7eed\u654f\u9510&#xff09;\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u8fd9\u4e0d\u4ec5\u4ec5\u662f\u4e00\u6b21\u6280\u672f\u7684\u5b66\u4e60&#xff0c;\u66f4\u662f\u4e00\u573a\u601d\u7ef4\u7684\u6d17\u793c\u3002\u4f60\u5df2\u7ecf\u638c\u63e1\u4e86\u5f53\u4eca Web \u5f00\u53d1\u9886\u57df\u6700\u5f3a\u5927\u3001\u6700\u5148\u8fdb\u7684\u6b66\u5668\u5e93\u3002\u4f46\u8bf7\u8bb0\u4f4f&#xff0c;Next.js \u53ea\u662f\u4e00\u4e2a\u5de5\u5177&#xff0c;React \u53ea\u662f\u4e00\u4e2a\u8f7d\u4f53&#xff0c;\u771f\u6b63\u7684\u6838\u5fc3\u662f\u90a3\u4e2a\u5750\u5728\u5c4f\u5e55\u524d\u3001\u62e5\u6709\u65e0\u9650\u521b\u9020\u529b\u4e0e\u4e25\u8c28\u903b\u8f91\u7684\u4f60\u3002<\/p>\n<h2>\u9644\u5f55<\/h2>\n<h3>\u9644\u5f55 A&#xff1a;\u201c\u5185\u529f\u5fc3\u6cd5\u201d \u2014\u2014 JavaScript\/TypeScript \u6838\u5fc3\u6982\u5ff5\u56de\u987e<\/h3>\n<p>\u5728\u5168\u6808\u5f00\u53d1\u7684\u4e07\u4e08\u9ad8\u697c\u4e0b&#xff0c;\u5e95\u5c42\u7684\u7f16\u7a0b\u8303\u5f0f\u662f\u652f\u6491\u4e00\u5207\u7684\u57fa\u77f3\u3002\u5982\u679c\u8bf4 Next.js \u662f\u7cbe\u5999\u7684\u62db\u5f0f&#xff0c;\u90a3\u4e48\u00a0JavaScript \u7684\u5f02\u6b65\u5904\u7406\u4e0e\u00a0TypeScript \u7684\u7c7b\u578b\u7cfb\u7edf\u5c31\u662f\u6df1\u539a\u7684\u5185\u529f\u3002\u6ca1\u6709\u624e\u5b9e\u7684\u5185\u529f&#xff0c;\u518d\u534e\u4e3d\u7684\u6846\u67b6\u4e5f\u4e0d\u8fc7\u662f\u7a7a\u4e2d\u697c\u9601\u3002<\/p>\n<p>1. \u5f02\u6b65\u5904\u7406&#xff1a;\u4e0e\u65f6\u95f4\u7684\u827a\u672f\u535a\u5f08<\/p>\n<p>\u5168\u6808\u5f00\u53d1\u7684\u672c\u8d28\u662f\u5904\u7406\u5ef6\u8fdf\u3002\u65e0\u8bba\u662f\u8bf7\u6c42\u6570\u636e\u5e93\u8fd8\u662f\u8c03\u7528 AI \u63a5\u53e3&#xff0c;\u5f00\u53d1\u8005\u5fc5\u987b\u7cbe\u901a\u00a0Promise\u00a0\u4e0e\u00a0async\/await\u3002<\/p>\n<ul>\n<li>\n<p>\u5e76\u53d1\u7684\u5e73\u8861&#xff1a;\u4e0d\u8981\u8ba9\u8bf7\u6c42\u6392\u961f\u3002\u5b66\u4f1a\u4f7f\u7528\u00a0Promise.all()\u00a0\u540c\u65f6\u5f00\u542f\u591a\u4e2a\u4efb\u52a1&#xff0c;\u5c06\u4e32\u884c\u7684\u7b49\u5f85\u8f6c\u5316\u4e3a\u5e76\u884c\u7684\u5954\u6d41\u3002<\/p>\n<\/li>\n<li>\n<p>\u5f02\u5e38\u7684\u6355\u83b7&#xff1a;\u5f02\u6b65\u4e16\u754c\u91cc&#xff0c;\u9519\u8bef\u662f\u5e38\u6001\u3002\u5229\u7528\u00a0try&#8230;catch\u00a0\u9501\u4f4f\u4e0d\u786e\u5b9a\u6027&#xff0c;\u786e\u4fdd\u6bcf\u4e00\u4e2a\u00a0await\u00a0\u90fd\u6709\u5176\u907f\u98ce\u6e2f\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u89e3\u6784\u4e0e\u5c55\u5f00&#xff1a;\u4ee3\u7801\u7684\u201c\u6781\u7b80\u4e3b\u4e49\u201d<\/p>\n<p>\u5728\u5904\u7406\u590d\u6742\u7684 Props \u4e0e API \u54cd\u5e94\u65f6&#xff0c;\u89e3\u6784\u8d4b\u503c (Destructuring)\u00a0\u662f\u6297\u51fb\u5197\u4f59\u7684\u5229\u5668\u3002<\/p>\n<ul>\n<li>\n<p>\u4f18\u96c5\u7684\u63d0\u53d6&#xff1a;\u4ece\u5de8\u5927\u7684\u5bf9\u8c61\u4e2d\u7cbe\u51c6\u6458\u53d6\u6240\u9700\u5b57\u6bb5&#xff0c;\u8ba9\u4ee3\u7801\u544a\u522b\u00a0data.user.profile.name\u00a0\u7684\u81c3\u80bf\u3002<\/p>\n<\/li>\n<li>\n<p>\u7075\u6d3b\u7684\u91cd\u7ec4&#xff1a;\u5229\u7528\u5c55\u5f00\u8fd0\u7b97\u7b26\u00a0&#8230;\u00a0\u5b9e\u73b0\u5bf9\u8c61\u4e0e\u6570\u7ec4\u7684\u4e0d\u53ef\u53d8\u66f4\u65b0&#xff08;Immutability&#xff09;&#xff0c;\u8fd9\u662f React \u72b6\u6001\u7ba1\u7406\u7684\u6838\u5fc3\u5f8b\u52a8\u3002<\/p>\n<\/li>\n<\/ul>\n<p>3. \u6cdb\u578b (Generics)&#xff1a;\u7c7b\u578b\u7684\u201c\u4e07\u80fd\u6a21\u677f\u201d<\/p>\n<p>TypeScript \u7684\u771f\u8c1b\u4e0d\u5728\u4e8e\u9650\u5236&#xff0c;\u800c\u5728\u4e8e\u62bd\u8c61\u3002<\/p>\n<ul>\n<li>\n<p>\u6cdb\u578b\u7684\u529b\u91cf&#xff1a;\u5f53\u4f60\u5728\u7f16\u5199\u4e00\u4e2a\u5168\u6808\u7684\u00a0ApiResponse&lt;T&gt;\u00a0\u5305\u88c5\u5668\u65f6&#xff0c;\u6cdb\u578b\u5141\u8bb8\u4f60\u5b9a\u4e49\u4e00\u5957\u903b\u8f91&#xff0c;\u5374\u80fd\u5b8c\u7f8e\u9002\u914d\u4ece\u201c\u7528\u6237\u5217\u8868\u201d\u5230\u201c\u8ba2\u5355\u8be6\u60c5\u201d\u7684\u4efb\u4f55\u6570\u636e\u7ed3\u6784\u3002<\/p>\n<\/li>\n<li>\n<p>\u7c7b\u578b\u63a8\u65ad&#xff1a;\u8ba9\u4ee3\u7801\u5728\u7f16\u5199\u65f6\u5c31\u5177\u5907\u201c\u9884\u77e5\u672a\u6765\u201d\u7684\u80fd\u529b&#xff0c;\u5c06 bug \u627c\u6740\u5728\u7f16\u8bd1\u9636\u6bb5\u3002<\/p>\n<\/li>\n<\/ul>\n<h3>\u9644\u5f55 B&#xff1a;\u201c\u638c\u4e2d\u5b9d\u5178\u201d \u2014\u2014 Next.js \u5e38\u7528 API \u901f\u67e5\u8868<\/h3>\n<p>\u5728\u5b9e\u6218\u4e2d&#xff0c;\u901f\u5ea6\u5373\u751f\u547d\u3002\u8fd9\u4efd\u901f\u67e5\u8868\u662f\u4f60\u5f81\u6218\u5168\u6808\u6c99\u573a\u65f6\u7684\u968f\u8eab\u9526\u56ca\u3002<\/p>\n<table>\n<tr>\n<td>\u5206\u7c7b<\/td>\n<td>API \/ \u6587\u4ef6\u7ea6\u5b9a<\/td>\n<td>\u6838\u5fc3\u7528\u9014<\/td>\n<\/tr>\n<tbody>\n<tr>\n<td>\u8def\u7531<\/td>\n<td>layout.tsx<\/td>\n<td>\u5b9a\u4e49\u6301\u4e45\u5316\u5e03\u5c40\u4e0e\u5171\u4eab\u72b6\u6001<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>page.tsx<\/td>\n<td>\u8def\u7531\u5165\u53e3&#xff0c;\u81ea\u52a8\u6620\u5c04\u4e3a URL \u8def\u5f84<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>loading.tsx<\/td>\n<td>\u57fa\u4e8e Suspense \u7684\u81ea\u52a8\u52a0\u8f7d\u72b6\u6001<\/td>\n<\/tr>\n<tr>\n<td>\u6570\u636e<\/td>\n<td>fetch(url, { next: { revalidate: 3600 } })<\/td>\n<td>\u5f00\u542f ISR&#xff08;\u589e\u91cf\u9759\u6001\u518d\u751f&#xff09;<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>server-only<\/td>\n<td>\u7269\u7406\u9694\u79bb&#xff0c;\u786e\u4fdd\u4ee3\u7801\u4ec5\u5728\u670d\u52a1\u7aef\u8fd0\u884c<\/td>\n<\/tr>\n<tr>\n<td>\u4ea4\u4e92<\/td>\n<td>&#034;use client&#034;<\/td>\n<td>\u58f0\u660e\u5ba2\u6237\u7aef\u8fb9\u754c&#xff0c;\u542f\u7528 Hook<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>&#034;use server&#034;<\/td>\n<td>\u58f0\u660e Server Action&#xff0c;\u6253\u901a\u524d\u540e\u7aef\u901a\u8baf<\/td>\n<\/tr>\n<tr>\n<td>\u5143\u6570\u636e<\/td>\n<td>export const metadata<\/td>\n<td>\u9759\u6001\/\u52a8\u6001 SEO \u914d\u7f6e<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h3>\u9644\u5f55 C&#xff1a;\u201c\u8de8\u8d8a\u9e3f\u6c9f\u201d \u2014\u2014 \u4ece Pages Router \u8fc1\u79fb\u81f3 App Router \u6307\u5357<\/h3>\n<p>\u5982\u679c\u4f60\u6b63\u5e26\u7740\u65e7\u65f6\u4ee3\u7684\u884c\u56ca&#xff08;Pages Router&#xff09;\u6b65\u5165\u65b0\u7eaa\u5143&#xff08;App Router&#xff09;&#xff0c;\u8fd9\u573a\u8fc1\u79fb\u4e0d\u4ec5\u662f\u76ee\u5f55\u7ed3\u6784\u7684\u66f4\u8fed&#xff0c;\u66f4\u662f\u6e32\u67d3\u8303\u5f0f\u7684\u91cd\u5851\u3002<\/p>\n<p>1. \u76ee\u5f55\u7684\u8fc1\u5f99<\/p>\n<ul>\n<li>\n<p>\u4ece\u00a0pages\/\u00a0\u5230\u00a0app\/&#xff1a;\u5c06\u00a0pages\/about.tsx\u00a0\u8f6c\u6362\u4e3a\u00a0app\/about\/page.tsx\u3002<\/p>\n<\/li>\n<li>\n<p>\u7ec4\u4ef6\u9ed8\u8ba4\u5316&#xff1a;\u5728 App Router \u4e2d&#xff0c;\u6240\u6709\u7ec4\u4ef6\u9ed8\u8ba4\u90fd\u662f\u00a0Server Components\u3002\u4f60\u9700\u8981\u91cd\u65b0\u5ba1\u89c6\u4f60\u7684\u4ee3\u7801&#xff0c;\u5c06\u6d89\u53ca\u00a0useState\u00a0\u6216\u6d4f\u89c8\u5668 API \u7684\u90e8\u5206\u6807\u8bb0\u4e3a\u00a0&#034;use client&#034;\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u6570\u636e\u83b7\u53d6\u7684\u6d85\u69c3<\/p>\n<ul>\n<li>\n<p>\u544a\u522b\u00a0getServerSideProps&#xff1a;\u5728\u65b0\u65f6\u4ee3&#xff0c;\u76f4\u63a5\u5728\u7ec4\u4ef6\u5185\u90e8\u4f7f\u7528\u5f02\u6b65\u7684\u00a0fetch\u00a0\u6216\u6570\u636e\u5e93\u8c03\u7528\u3002<\/p>\n<\/li>\n<li>\n<p>\u903b\u8f91\u4e0b\u6c89&#xff1a;\u4e0d\u8981\u518d\u5728\u9875\u9762\u9876\u90e8\u4e00\u6b21\u6027\u6293\u53d6\u6240\u6709\u6570\u636e\u3002\u5229\u7528 React Suspense&#xff0c;\u8ba9\u6bcf\u4e2a\u7ec4\u4ef6\u8d1f\u8d23\u81ea\u5df1\u7684\u6570\u636e&#xff0c;\u201c\u5206\u6ce2\u5230\u8d27\u201d\u624d\u662f App Router \u7684\u7cbe\u9ad3\u3002<\/p>\n<\/li>\n<\/ul>\n<h3>\u9644\u5f55 D&#xff1a;\u201c\u5168\u6808\u6b66\u5668\u5e93\u201d \u2014\u2014 \u5f00\u53d1\u8005\u5de5\u5177\u7bb1\u4e0e\u5f00\u6e90\u8d44\u6e90<\/h3>\n<p>\u5168\u6808\u67b6\u6784\u5e08\u7684\u5353\u8d8a&#xff0c;\u90e8\u5206\u6e90\u4e8e\u5bf9\u4ed6\u624b\u4e2d\u5de5\u5177\u7684\u7eaf\u719f\u8fd0\u7528\u3002<\/p>\n<p>1. \u57fa\u7840\u8bbe\u65bd\u4e0e\u6570\u636e\u5e93<\/p>\n<ul>\n<li>\n<p>Supabase \/ Convex&#xff1a;Serverless \u65f6\u4ee3\u7684\u201c\u540e\u7aef\u5373\u670d\u52a1\u201d&#xff0c;\u8ba9\u4f60\u5728\u5206\u949f\u7ea7\u5efa\u7acb\u5177\u5907\u5b9e\u65f6\u80fd\u529b\u7684\u6570\u636e\u5e93\u3002<\/p>\n<\/li>\n<li>\n<p>Upstash&#xff1a;\u4e3a Serverless \u73af\u5883\u4f18\u5316\u7684 Redis&#xff0c;\u89e3\u51b3\u6d41\u5f0f\u4f20\u8f93\u4e2d\u7684\u72b6\u6001\u6301\u4e45\u5316\u3002<\/p>\n<\/li>\n<\/ul>\n<p>2. \u754c\u9762\u4e0e\u4ea4\u4e92<\/p>\n<ul>\n<li>\n<p>Shadcn UI&#xff1a;\u4e0d\u4ec5\u662f\u7ec4\u4ef6\u5e93&#xff0c;\u66f4\u662f\u5168\u6808\u9879\u76ee\u7684\u5ba1\u7f8e\u5e95\u7ebf\u3002<\/p>\n<\/li>\n<li>\n<p>Lucide React&#xff1a;\u8f7b\u91cf\u7ea7\u3001\u4e00\u81f4\u6027\u6781\u5f3a\u7684\u56fe\u6807\u5e93&#xff0c;\u4e3a\u4f60\u7684\u5e94\u7528\u753b\u9f99\u70b9\u775b\u3002<\/p>\n<\/li>\n<\/ul>\n<p>3. \u5f00\u53d1\u5229\u5668<\/p>\n<ul>\n<li>\n<p>Zod&#xff1a;\u5168\u6808\u6821\u9a8c\u7684\u5b9a\u6d77\u795e\u9488\u3002\u4e00\u4efd Schema&#xff0c;\u540c\u65f6\u5b88\u62a4 API \u5165\u53c2\u3001\u8868\u5355\u6821\u9a8c\u4e0e\u6570\u636e\u5e93\u6a21\u578b\u3002<\/p>\n<\/li>\n<li>\n<p>React Scan \/ Sentry&#xff1a;\u4ece\u6e32\u67d3\u74f6\u9888\u5230\u8fd0\u884c\u65f6\u5d29\u6e83&#xff0c;\u5168\u65b9\u4f4d\u6d1e\u5bdf\u4f60\u7684\u5e94\u7528\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u7ed3\u8bed&#xff1a;\u201c\u5168\u6808\u201d\u4ece\u6765\u4e0d\u662f\u4e00\u79cd\u7ec8\u6781\u72b6\u6001&#xff0c;\u800c\u662f\u4e00\u79cd\u6301\u7eed\u5b66\u4e60\u3001\u4e0d\u65ad\u8de8\u754c\u7684\u59ff\u6001\u3002 \u5f53\u4f60\u5408\u4e0a\u8fd9\u672c\u4e66&#xff0c;\u63a8\u5f00\u5b9e\u9a8c\u5ba4\u7684\u5927\u95e8&#xff0c;\u53bb\u9762\u5bf9\u771f\u5b9e\u7528\u6237\u7684\u53cd\u9988&#xff0c;\u53bb\u8fce\u63a5\u90a3\u4e9b\u672a\u66fe\u9884\u89c1\u7684 Bug \u65f6&#xff0c;\u4f60\u624d\u771f\u6b63\u5f00\u59cb\u4e66\u5199\u5c5e\u4e8e\u4f60\u81ea\u5df1\u7684\u201c\u5168\u6808\u4f20\u5947\u201d\u3002<\/p>\n<p>\u67b6\u6784\u5e08\u7684\u8fdb\u9636\u4e4b\u8def&#xff0c;\u6ca1\u6709\u7ec8\u70b9\u3002\u6bcf\u4e00\u884c\u65b0\u5199\u7684\u4ee3\u7801&#xff0c;\u6bcf\u4e00\u4e2a\u89e3\u51b3\u7684 Bug&#xff0c;\u6bcf\u4e00\u6b21\u5bf9\u65b0\u7279\u6027\u7684\u6df1\u601d&#xff0c;\u90fd\u662f\u4f60\u901a\u5f80\u201c\u767b\u4ed9\u201d\u5883\u754c\u7684\u53f0\u9636\u3002<\/p>\n<p>\u4ee3\u7801\u5df2\u6536\u7b14&#xff0c;\u5f81\u9014\u6b63\u5f00\u542f\u3002<\/p>\n<p>\u613f\u4f60\u5728\u672a\u6765\u7684\u5f00\u53d1\u751f\u6daf\u4e2d&#xff0c;\u65e2\u6709\u201c\u5fc3\u5982\u53d1\u4e1d\u201d\u7684\u4e25\u8c28&#xff0c;\u53c8\u6709\u201c\u6c14\u541e\u4e07\u91cc\u201d\u7684\u67b6\u6784\u80f8\u6000\u3002\u5728\u5168\u6808\u7684\u661f\u8fb0\u5927\u6d77\u91cc&#xff0c;\u53bb\u521b\u9020\u90a3\u4e9b\u771f\u6b63\u6539\u53d8\u4e16\u754c\u7684\u4f5c\u54c1\u5427&#xff01;<\/p>\n<p>\u200b<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u200b\u76ee\u5f55<br \/>\n\u7b2c\u4e00\u90e8\u5206&#xff1a;\u601d\u60f3\u4e0e\u57fa\u77f3\u2014\u2014\u4e07\u6cd5\u5f52\u5b97&#xff0c;\u7b51\u57fa\u95ee\u9053<br \/>\n\u7b2c1\u7ae0&#xff1a;Web \u7684\u8f6e\u56de\u4e0e\u8fdb\u5316\u2014\u2014Next.js \u7684\u4e16\u754c\u89c2 1.1 \u4f55\u4e3a\u5168\u6808&#xff1f;\u00a0\u4ece\u201c\u524d\u540e\u7aef\u5206\u79bb\u201d\u5230\u201c\u5168\u6808\u540c\u6784\u201d\u7684\u54f2\u5b66\u56de\u5f52  1.2 Web \u6e32\u67d3\u7b80\u53f2&#xff1a;\u00a0\u4ece PHP\/JSP \u5230 SPA&#xff0c;\u518d\u5230 SSR\/SSG \u7684\u6f14\u8fdb\u903b\u8f91  1.3 \u4e3a\u4f55\u662f Next.js&#xff1f;\u00a0\u201c\u751f\u4ea7\u73af\u5883\u5c31\u7eea\u201d\u7684 Node.js \u6846\u67b6\u6807\u6746  1.4 \u7834\u9664\u8ff7\u601d&amp;#xff<\/p>\n","protected":false},"author":2,"featured_media":66605,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[81,50,188],"topic":[],"class_list":["post-66607","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-python","tag-50","tag-188"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Next.js\u5168\u6808\u5f00\u53d1\uff1a\u4ece\u5165\u95e8\u5230\u7cbe\u901a - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/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.wsisp.com\/helps\/66607.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Next.js\u5168\u6808\u5f00\u53d1\uff1a\u4ece\u5165\u95e8\u5230\u7cbe\u901a - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u200b\u76ee\u5f55 \u7b2c\u4e00\u90e8\u5206&#xff1a;\u601d\u60f3\u4e0e\u57fa\u77f3\u2014\u2014\u4e07\u6cd5\u5f52\u5b97&#xff0c;\u7b51\u57fa\u95ee\u9053 \u7b2c1\u7ae0&#xff1a;Web \u7684\u8f6e\u56de\u4e0e\u8fdb\u5316\u2014\u2014Next.js \u7684\u4e16\u754c\u89c2 1.1 \u4f55\u4e3a\u5168\u6808&#xff1f;\u00a0\u4ece\u201c\u524d\u540e\u7aef\u5206\u79bb\u201d\u5230\u201c\u5168\u6808\u540c\u6784\u201d\u7684\u54f2\u5b66\u56de\u5f52 1.2 Web \u6e32\u67d3\u7b80\u53f2&#xff1a;\u00a0\u4ece PHP\/JSP \u5230 SPA&#xff0c;\u518d\u5230 SSR\/SSG \u7684\u6f14\u8fdb\u903b\u8f91 1.3 \u4e3a\u4f55\u662f Next.js&#xff1f;\u00a0\u201c\u751f\u4ea7\u73af\u5883\u5c31\u7eea\u201d\u7684 Node.js \u6846\u67b6\u6807\u6746 1.4 \u7834\u9664\u8ff7\u601d&amp;#xff\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/66607.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-26T16:05:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/01\/20260126160512-697790b866aa4.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"69 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/66607.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/66607.html\",\"name\":\"Next.js\u5168\u6808\u5f00\u53d1\uff1a\u4ece\u5165\u95e8\u5230\u7cbe\u901a - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-01-26T16:05:13+00:00\",\"dateModified\":\"2026-01-26T16:05:13+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/66607.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/66607.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/66607.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Next.js\u5168\u6808\u5f00\u53d1\uff1a\u4ece\u5165\u95e8\u5230\u7cbe\u901a\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Next.js\u5168\u6808\u5f00\u53d1\uff1a\u4ece\u5165\u95e8\u5230\u7cbe\u901a - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","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.wsisp.com\/helps\/66607.html","og_locale":"zh_CN","og_type":"article","og_title":"Next.js\u5168\u6808\u5f00\u53d1\uff1a\u4ece\u5165\u95e8\u5230\u7cbe\u901a - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u200b\u76ee\u5f55 \u7b2c\u4e00\u90e8\u5206&#xff1a;\u601d\u60f3\u4e0e\u57fa\u77f3\u2014\u2014\u4e07\u6cd5\u5f52\u5b97&#xff0c;\u7b51\u57fa\u95ee\u9053 \u7b2c1\u7ae0&#xff1a;Web \u7684\u8f6e\u56de\u4e0e\u8fdb\u5316\u2014\u2014Next.js \u7684\u4e16\u754c\u89c2 1.1 \u4f55\u4e3a\u5168\u6808&#xff1f;\u00a0\u4ece\u201c\u524d\u540e\u7aef\u5206\u79bb\u201d\u5230\u201c\u5168\u6808\u540c\u6784\u201d\u7684\u54f2\u5b66\u56de\u5f52 1.2 Web \u6e32\u67d3\u7b80\u53f2&#xff1a;\u00a0\u4ece PHP\/JSP \u5230 SPA&#xff0c;\u518d\u5230 SSR\/SSG \u7684\u6f14\u8fdb\u903b\u8f91 1.3 \u4e3a\u4f55\u662f Next.js&#xff1f;\u00a0\u201c\u751f\u4ea7\u73af\u5883\u5c31\u7eea\u201d\u7684 Node.js \u6846\u67b6\u6807\u6746 1.4 \u7834\u9664\u8ff7\u601d&amp;#xff","og_url":"https:\/\/www.wsisp.com\/helps\/66607.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-01-26T16:05:13+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/01\/20260126160512-697790b866aa4.png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"69 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/66607.html","url":"https:\/\/www.wsisp.com\/helps\/66607.html","name":"Next.js\u5168\u6808\u5f00\u53d1\uff1a\u4ece\u5165\u95e8\u5230\u7cbe\u901a - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-01-26T16:05:13+00:00","dateModified":"2026-01-26T16:05:13+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/66607.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/66607.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/66607.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"Next.js\u5168\u6808\u5f00\u53d1\uff1a\u4ece\u5165\u95e8\u5230\u7cbe\u901a"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/66607","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=66607"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/66607\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/66605"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=66607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=66607"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=66607"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=66607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}