var Component=(()=>{var c=Object.create;var e=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var D=(h,s)=>()=>(s||h((s={exports:{}}).exports,s),s.exports),o=(h,s)=>{for(var l in s)e(h,l,{get:s[l],enumerable:!0})},k=(h,s,l,a)=>{if(s&&typeof s=="object"||typeof s=="function")for(let n of E(s))!y.call(h,n)&&n!==l&&e(h,n,{get:()=>s[n],enumerable:!(a=p(s,n))||a.enumerable});return h};var m=(h,s,l)=>(l=h!=null?c(g(h)):{},k(s||!h||!h.__esModule?e(l,"default",{value:h,enumerable:!0}):l,h)),C=h=>k(e({},"__esModule",{value:!0}),h);var d=D((A,r)=>{r.exports=_jsx_runtime});var N={};o(N,{default:()=>F});var i=m(d());function t(h){let s={code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...h.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.h2,{id:"\u6838\u5FC3\u6982\u5FF5",children:"\u6838\u5FC3\u6982\u5FF5"}),` `,(0,i.jsx)(s.h3,{id:"\u6587\u4EF6\u7CFB\u7EDF\u8DEF\u7531",children:"\u6587\u4EF6\u7CFB\u7EDF\u8DEF\u7531"}),` `,(0,i.jsx)(s.p,{children:"Next.js \u4F7F\u7528\u57FA\u4E8E\u6587\u4EF6\u7CFB\u7EDF\u7684\u8DEF\u7531\uFF0C\u8FD9\u610F\u5473\u7740\uFF1A"}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"pages"})," \u76EE\u5F55\u4E0B\u7684\u6587\u4EF6\u4F1A\u81EA\u52A8\u6210\u4E3A\u8DEF\u7531"]}),` `,(0,i.jsxs)(s.li,{children:["\u652F\u6301\u52A8\u6001\u8DEF\u7531\uFF08\u5982 ",(0,i.jsx)(s.code,{children:"[id].js"})," \u6216 ",(0,i.jsx)(s.code,{children:"[...slug].js"}),"\uFF09"]}),` `,(0,i.jsx)(s.li,{children:"\u652F\u6301\u5D4C\u5957\u8DEF\u7531\uFF08\u901A\u8FC7\u76EE\u5F55\u7ED3\u6784\uFF09"}),` `]}),` `,(0,i.jsxs)(s.p,{children:["\u5728 Next.js 13+ \u7684 App Router \u4E2D\uFF0C\u8DEF\u7531\u5B9A\u4E49\u5728 ",(0,i.jsx)(s.code,{children:"app"}),` \u76EE\u5F55\u4E2D\uFF0C\u901A\u8FC7\u6587\u4EF6\u5939\u7ED3\u6784\u548C `,(0,i.jsx)(s.code,{children:"page.tsx"})," \u6587\u4EF6\u6765\u5B9A\u4E49\u8DEF\u7531\u3002"]}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"app/page.tsx"})," -> ",(0,i.jsx)(s.code,{children:"/"})," (\u6839\u8DEF\u7531)"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"app/dashboard/page.tsx"})," -> ",(0,i.jsx)(s.code,{children:"/dashboard"})]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"app/products/[id]/page.tsx"})," -> ",(0,i.jsx)(s.code,{children:"/products/:id"})," (\u52A8\u6001\u8DEF\u7531)"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"app/blog/[...slug]/page.tsx"})," -> ",(0,i.jsx)(s.code,{children:"/blog/:slug*"})," (Catch-all \u8DEF\u7531)"]}),` `]}),` `,(0,i.jsx)(s.h3,{id:"\u6E32\u67D3\u7B56\u7565\u6982\u89C8",children:"\u6E32\u67D3\u7B56\u7565\u6982\u89C8"}),` `,(0,i.jsx)(s.p,{children:"Next.js \u63D0\u4F9B\u4E86\u7075\u6D3B\u7684\u9875\u9762\u6E32\u67D3\u65B9\u5F0F\uFF0C\u60A8\u53EF\u4EE5\u6839\u636E\u5185\u5BB9\u7279\u6027\u548C\u6027\u80FD\u9700\u6C42\u9009\u62E9\u6700\u5408\u9002\u7684\u7B56\u7565\u3002\u8FD9\u4E9B\u7B56\u7565\u51B3\u5B9A\u4E86\u9875\u9762\u7684 HTML \u662F\u4F55\u65F6\u4EE5\u53CA\u5728\u54EA\u91CC\u751F\u6210\u7684\u3002"}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[` `,(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:`\u9759\u6001\u751F\u6210 (Static Generation - SSG)`}),"\uFF1A\u5728\u6784\u5EFA\u9879\u76EE\u65F6\u751F\u6210\u9875\u9762\u7684 HTML\u3002\u9002\u7528\u4E8E\u5185\u5BB9\u4E0D\u7ECF\u5E38\u53D8\u5316\u4E14\u5BF9\u52A0\u8F7D\u901F\u5EA6\u8981\u6C42\u6781\u9AD8\u7684\u9875\u9762\uFF08\u5982\u535A\u5BA2\u3001\u8425\u9500\u9875\u9762\uFF09\u3002\u6784\u5EFA\u5B8C\u6210\u540E\uFF0C\u751F\u6210\u7684\u9759\u6001\u6587\u4EF6\u53EF\u4EE5\u76F4\u63A5\u901A\u8FC7 CDN \u5206\u53D1\uFF0C\u63D0\u4F9B\u6781\u5FEB\u7684\u8BBF\u95EE\u901F\u5EA6\u3002"]}),` `]}),` `,(0,i.jsxs)(s.li,{children:[` `,(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:`\u670D\u52A1\u7AEF\u6E32\u67D3 (Server-Side Rendering - SSR)`}),"\uFF1A\u5728\u7528\u6237\u8BF7\u6C42\u9875\u9762\u65F6\uFF0C\u670D\u52A1\u5668\u5B9E\u65F6\u751F\u6210\u9875\u9762\u7684 HTML \u5E76\u53D1\u9001\u7ED9\u6D4F\u89C8\u5668\u3002\u9002\u7528\u4E8E\u9700\u8981\u5C55\u793A\u5B9E\u65F6\u6570\u636E\u6216\u4E2A\u6027\u5316\u5185\u5BB9\u7684\u9875\u9762\uFF08\u5982\u7528\u6237\u4EEA\u8868\u76D8\u3001\u7535\u5546\u8D2D\u7269\u8F66\uFF09\u3002\u867D\u7136\u6BCF\u6B21\u8BF7\u6C42\u90FD\u9700\u8981\u670D\u52A1\u5668\u5904\u7406\uFF0C\u4F46\u9996\u4E2A\u5B57\u8282\u52A0\u8F7D\u65F6\u95F4\uFF08TTFB\uFF09\u901A\u5E38\u4F18\u4E8E\u5BA2\u6237\u7AEF\u6E32\u67D3\u3002"]}),` `]}),` `,(0,i.jsxs)(s.li,{children:[` `,(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:`\u589E\u91CF\u9759\u6001\u518D\u751F\u6210 (Incremental Static Regeneration - ISR)`}),"\uFF1ASSG \u7684\u4E00\u4E2A\u589E\u5F3A\u6A21\u5F0F\u3002\u5141\u8BB8\u60A8\u5728\u5E94\u7528\u6784\u5EFA\u540E\uFF0C\u5728\u6D41\u91CF\u5230\u6765\u65F6\u6309\u9700\u6216\u5B9A\u65F6\u5730\u91CD\u65B0\u751F\u6210\u90E8\u5206\u9759\u6001\u9875\u9762\u3002\u8FD9\u7ED3\u5408\u4E86 SSG \u7684\u9AD8\u6027\u80FD\u548C SSR \u7684\u6570\u636E\u65B0\u9C9C\u5EA6\uFF0C\u65E0\u9700\u5B8C\u5168\u91CD\u5EFA\u6574\u4E2A\u7F51\u7AD9\u3002"]}),` `]}),` `,(0,i.jsxs)(s.li,{children:[` `,(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:`\u5BA2\u6237\u7AEF\u6E32\u67D3 (Client-Side Rendering - CSR)`}),"\uFF1A\u9875\u9762\u521D\u59CB\u52A0\u8F7D\u65F6\u53EA\u53D1\u9001\u4E00\u4E2A\u6700\u5C0F\u5316\u7684 HTML \u9AA8\u67B6\u548C JavaScript \u6587\u4EF6\u5230\u6D4F\u89C8\u5668\uFF0C\u6570\u636E\u83B7\u53D6\u548C\u9875\u9762\u5185\u5BB9\u7684\u6E32\u67D3\u4E3B\u8981\u5728\u6D4F\u89C8\u5668\u7AEF\u901A\u8FC7 JavaScript \u6267\u884C\u3002\u9002\u7528\u4E8E\u7528\u6237\u767B\u5F55\u540E\u7684\u79C1\u6709\u9875\u9762\u6216\u9AD8\u5EA6\u52A8\u6001\u7684\u5E94\u7528\u90E8\u5206\uFF0C\u4F46\u53EF\u80FD\u4F1A\u5F71\u54CD\u9996\u5C4F\u52A0\u8F7D\u6027\u80FD\u548C SEO\u3002"]}),` `]}),` `]}),` `,(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"\u603B\u7ED3"}),"\uFF1A\u7406\u89E3\u8FD9\u4E9B\u6E32\u67D3\u7B56\u7565\u662F\u4F18\u5316 Next.js \u5E94\u7528\u6027\u80FD\u7684\u5173\u952E\u3002\u60A8\u53EF\u4EE5\u6839\u636E\u4E0D\u540C\u9875\u9762\u7684\u9700\u6C42\uFF0C\u5728\u540C\u4E00\u4E2A\u5E94\u7528\u4E2D\u6DF7\u5408\u4F7F\u7528\u8FD9\u4E9B\u7B56\u7565\u3002"]}),` `,(0,i.jsx)(s.h2,{id:"\u9879\u76EE\u7ED3\u6784\u548C\u7EA6\u5B9A",children:"\u9879\u76EE\u7ED3\u6784\u548C\u7EA6\u5B9A"}),` `,(0,i.jsx)(s.p,{children:"\u826F\u597D\u7684\u9879\u76EE\u7ED3\u6784\u6709\u52A9\u4E8E\u56E2\u961F\u534F\u4F5C\u548C\u957F\u671F\u7EF4\u62A4\u3002Next.js \u9879\u76EE\u901A\u5E38\u9075\u5FAA\u4E00\u5957\u6807\u51C6\u7684\u76EE\u5F55\u7ED3\u6784\u548C\u6587\u4EF6\u547D\u540D\u7EA6\u5B9A\u3002"}),` `,(0,i.jsx)(s.p,{children:"\u4EE5\u4E0B\u662F\u4E00\u4E9B\u5E38\u89C1\u7684\u76EE\u5F55\u548C\u6587\u4EF6\u53CA\u5176\u63A8\u8350\u7528\u9014\uFF08\u6DB5\u76D6 Pages Router \u548C App Router\uFF09\uFF1A"}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[` `,(0,i.jsxs)(s.p,{children:[(0,i.jsxs)(s.strong,{children:[(0,i.jsx)(s.code,{children:"app/"})," (App Router)"]}),"\uFF1A"]}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u7528\u9014"}),`\uFF1ANext.js 13+ \u5F15\u5165\u7684\u65B0\u7684\u8DEF\u7531\u548C\u6E32\u67D3\u6A21\u578B\u3002\u5728\u8BE5\u76EE\u5F55\u4E0B\u901A\u8FC7\u6587\u4EF6\u5939\u7ED3\u6784\u5B9A\u4E49\u8DEF\u7531\uFF0C\u5E76\u4F7F\u7528 `,(0,i.jsx)(s.code,{children:"page.tsx"})," \u6216 ",(0,i.jsx)(s.code,{children:"route.ts"}),` \u6587\u4EF6\u521B\u5EFA\u9875\u9762\u6216 API \u8DEF\u7531\u3002\u652F\u6301\u5E03\u5C40 (`,(0,i.jsx)(s.code,{children:"layout.tsx"}),")\u3001\u52A0\u8F7D\u72B6\u6001 (",(0,i.jsx)(s.code,{children:"loading.tsx"}),")\u3001\u9519\u8BEF\u5904\u7406 (",(0,i.jsx)(s.code,{children:"error.tsx"}),") \u7B49\u6587\u4EF6\u7EA6\u5B9A\u3002"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u793A\u4F8B"}),"\uFF1A",` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"app/page.tsx"}),": \u7F51\u7AD9\u9996\u9875\u3002"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"app/dashboard/layout.tsx"}),": \u4EEA\u8868\u76D8\u9875\u9762\u7684\u5E03\u5C40\u3002"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"app/products/[id]/page.tsx"}),": \u5355\u4E2A\u4EA7\u54C1\u8BE6\u60C5\u9875\u3002"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"app/api/users/route.ts"}),": \u7528\u6237 API \u7AEF\u70B9\u3002"]}),` `]}),` `]}),` `]}),` `]}),` `,(0,i.jsxs)(s.li,{children:[` `,(0,i.jsxs)(s.p,{children:[(0,i.jsxs)(s.strong,{children:[(0,i.jsx)(s.code,{children:"pages/"})," (Pages Router)"]}),"\uFF1A"]}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u7528\u9014"}),`\uFF1ANext.js \u4F20\u7EDF\u7684\u57FA\u4E8E\u6587\u4EF6\u7CFB\u7EDF\u7684\u8DEF\u7531\u76EE\u5F55\u3002\u8BE5\u76EE\u5F55\u4E0B\u5BFC\u51FA\u4E00\u4E2A React \u7EC4\u4EF6\u7684 `,(0,i.jsx)(s.code,{children:".js"}),", ",(0,i.jsx)(s.code,{children:".jsx"}),", ",(0,i.jsx)(s.code,{children:".ts"}),", \u6216 ",(0,i.jsx)(s.code,{children:".tsx"})," \u6587\u4EF6\u90FD\u4F1A\u81EA\u52A8\u6210\u4E3A\u5E94\u7528\u7684\u4E00\u4E2A\u9875\u9762\u8DEF\u7531\u3002"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u793A\u4F8B"}),"\uFF1A",` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"pages/index.js"}),": \u7F51\u7AD9\u9996\u9875\u3002"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"pages/about.tsx"}),": \u5173\u4E8E\u9875\u9762\u3002"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"pages/posts/[slug].js"}),": \u52A8\u6001\u535A\u5BA2\u6587\u7AE0\u9875\u9762\u3002"]}),` `]}),` `]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u7279\u6B8A\u6587\u4EF6"}),"\uFF1A",` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"pages/_app.js"}),` / `,(0,i.jsx)(s.code,{children:"_app.tsx"}),": \u7528\u4E8E\u521D\u59CB\u5316\u6240\u6709\u9875\u9762\uFF0C\u53EF\u4EE5\u7528\u6765\u6DFB\u52A0\u5168\u5C40 CSS\u3001Provider \u7B49\u3002"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"pages/_document.js"}),` / `,(0,i.jsx)(s.code,{children:"_document.tsx"}),": \u7528\u4E8E\u5B9A\u5236\u5E94\u7528\u7684 HTML \u9AA8\u67B6 (",(0,i.jsx)(s.code,{children:""}),", ",(0,i.jsx)(s.code,{children:""})," \u7B49)\u3002"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"pages/404.tsx"}),": \u81EA\u5B9A\u4E49 404 \u9519\u8BEF\u9875\u9762\u3002"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"pages/500.tsx"}),": \u81EA\u5B9A\u4E49 500 \u9519\u8BEF\u9875\u9762\u3002"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"pages/api/"}),": \u8BE5\u76EE\u5F55\u4E0B\u7684\u6587\u4EF6\u88AB\u89C6\u4E3A API \u8DEF\u7531\uFF0C\u7528\u4E8E\u6784\u5EFA\u540E\u7AEF API \u7AEF\u70B9\u3002"]}),` `]}),` `]}),` `]}),` `]}),` `,(0,i.jsxs)(s.li,{children:[` `,(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:(0,i.jsx)(s.code,{children:"public/"})}),"\uFF1A"]}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u7528\u9014"}),"\uFF1A\u5B58\u653E\u9759\u6001\u8D44\u6E90\uFF0C\u5982\u56FE\u7247 (",(0,i.jsx)(s.code,{children:".jpg"}),`, `,(0,i.jsx)(s.code,{children:".png"}),")\u3001\u5B57\u4F53\u3001",(0,i.jsx)(s.code,{children:"favicon.ico"}),"\u3001",(0,i.jsx)(s.code,{children:"manifest.json"}),`\u3002\u8FD9\u4E9B\u6587\u4EF6\u5728\u6784\u5EFA\u540E\u4F1A\u88AB\u76F4\u63A5\u63D0\u4F9B\u670D\u52A1\uFF0C\u53EF\u4EE5\u901A\u8FC7\u6839\u8DEF\u5F84\u8BBF\u95EE\uFF08\u4F8B\u5982 `,(0,i.jsx)(s.code,{children:"/favicon.ico"}),"\uFF09\u3002"]}),` `]}),` `]}),` `,(0,i.jsxs)(s.li,{children:[` `,(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:(0,i.jsx)(s.code,{children:"components/"})}),"\uFF1A"]}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u7528\u9014"}),"\uFF1A\u5B58\u653E\u53EF\u91CD\u7528\u7684 React \u7EC4\u4EF6\u3002\u5EFA\u8BAE\u6839\u636E\u529F\u80FD\u6216\u4E1A\u52A1\u903B\u8F91\u7EC4\u7EC7\u5B50\u76EE\u5F55\u3002"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u793A\u4F8B"}),"\uFF1A",(0,i.jsx)(s.code,{children:"components/Layout/"}),", ",(0,i.jsx)(s.code,{children:"components/Button/"}),", ",(0,i.jsx)(s.code,{children:"components/forms/"}),"\u3002"]}),` `]}),` `]}),` `,(0,i.jsxs)(s.li,{children:[` `,(0,i.jsxs)(s.p,{children:[(0,i.jsxs)(s.strong,{children:[(0,i.jsx)(s.code,{children:"lib/"})," \u6216 ",(0,i.jsx)(s.code,{children:"utils/"})]}),"\uFF1A"]}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u7528\u9014"}),"\uFF1A\u5B58\u653E\u901A\u7528\u5DE5\u5177\u51FD\u6570\u3001\u6570\u636E\u83B7\u53D6\u903B\u8F91\uFF08\u4E0D\u76F4\u63A5\u4E0E\u9875\u9762\u6216 API \u8DEF\u7531\u8026\u5408\uFF09\u3001\u5E38\u91CF\u3001\u7C7B\u578B\u5B9A\u4E49\u7B49\u4E0E UI \u6216\u8DEF\u7531\u65E0\u5173\u7684\u8F85\u52A9\u4EE3\u7801\u3002"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u793A\u4F8B"}),"\uFF1A",(0,i.jsx)(s.code,{children:"lib/api.ts"})," (\u6570\u636E\u83B7\u53D6\u51FD\u6570), ",(0,i.jsx)(s.code,{children:"utils/formatters.ts"})," (\u683C\u5F0F\u5316\u51FD\u6570)\u3002"]}),` `]}),` `]}),` `,(0,i.jsxs)(s.li,{children:[` `,(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:(0,i.jsx)(s.code,{children:"styles/"})}),"\uFF1A"]}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u7528\u9014"}),"\uFF1A\u5B58\u653E\u5E94\u7528\u5168\u5C40\u6837\u5F0F\u6587\u4EF6 (",(0,i.jsx)(s.code,{children:"globals.css"}),`) \u6216\u4F7F\u7528 CSS Modules \u7684\u7EC4\u4EF6\u6837\u5F0F\u6587\u4EF6\u3002\u5982\u679C\u4F7F\u7528 Tailwind CSS\uFF0C\u901A\u5E38\u4E5F\u4F1A\u5728\u8FD9\u91CC\u5BFC\u5165 Tailwind \u6307\u4EE4\u3002`]}),` `]}),` `]}),` `,(0,i.jsxs)(s.li,{children:[` `,(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:(0,i.jsx)(s.code,{children:"hooks/"})}),"\uFF1A"]}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u7528\u9014"}),"\uFF1A\u5B58\u653E\u81EA\u5B9A\u4E49 React Hooks\uFF0C\u7528\u4E8E\u5C01\u88C5\u7EC4\u4EF6\u903B\u8F91\u3002"]}),` `]}),` `]}),` `,(0,i.jsxs)(s.li,{children:[` `,(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:(0,i.jsx)(s.code,{children:"types/"})}),"\uFF1A"]}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u7528\u9014"}),"\uFF1A\u5B58\u653E TypeScript \u7684\u5168\u5C40\u7C7B\u578B\u5B9A\u4E49\u3002"]}),` `]}),` `]}),` `,(0,i.jsxs)(s.li,{children:[` `,(0,i.jsxs)(s.p,{children:[(0,i.jsxs)(s.strong,{children:[(0,i.jsx)(s.code,{children:"next.config.js"})," / ",(0,i.jsx)(s.code,{children:"next.config.mjs"})]}),"\uFF1A"]}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u7528\u9014"}),"\uFF1ANext.js \u7684\u6838\u5FC3\u914D\u7F6E\u6587\u4EF6\uFF0C\u7528\u4E8E\u8FDB\u884C\u5404\u79CD\u81EA\u5B9A\u4E49\u8BBE\u7F6E\uFF0C\u5982\u73AF\u5883\u53D8\u91CF\u3001\u91CD\u5199\u3001\u91CD\u5B9A\u5411\u3001\u56FE\u7247\u4F18\u5316\u914D\u7F6E\u3001Webpack \u914D\u7F6E\u7B49\u3002"]}),` `]}),` `]}),` `,(0,i.jsxs)(s.li,{children:[` `,(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:(0,i.jsx)(s.code,{children:"package.json"})}),"\uFF1A"]}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u7528\u9014"}),"\uFF1A\u9879\u76EE\u7684\u5305\u7BA1\u7406\u6587\u4EF6\uFF0C\u8BB0\u5F55\u9879\u76EE\u4F9D\u8D56\u3001\u811A\u672C\u547D\u4EE4\u3001\u9879\u76EE\u4FE1\u606F\u7B49\u3002"]}),` `]}),` `]}),` `]}),` `,(0,i.jsx)(s.p,{children:"\u9075\u5FAA\u8FD9\u4E9B\u7EA6\u5B9A\u53EF\u4EE5\u63D0\u9AD8\u4EE3\u7801\u7684\u53EF\u8BFB\u6027\u548C\u53EF\u7EF4\u62A4\u6027\uFF0C\u5C24\u5176\u662F\u5728\u56E2\u961F\u534F\u4F5C\u65F6\u3002"}),` `,(0,i.jsx)(s.h2,{id:"\u4E3B\u8981\u7279\u6027",children:"\u4E3B\u8981\u7279\u6027"}),` `,(0,i.jsx)(s.h3,{id:"\u6570\u636E\u83B7\u53D6",children:"\u6570\u636E\u83B7\u53D6"}),` `,(0,i.jsx)(s.p,{children:"Next.js \u63D0\u4F9B\u4E86\u7075\u6D3B\u7684\u6570\u636E\u83B7\u53D6\u65B9\u5F0F\uFF0C\u652F\u6301\u5728\u4E0D\u540C\u6E32\u67D3\u7B56\u7565\u4E0B\u9884\u53D6\u6216\u8BF7\u6C42\u6570\u636E\u3002"}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsxs)(s.strong,{children:[(0,i.jsx)(s.code,{children:"getStaticProps"}),` (\u9759\u6001\u751F\u6210 SSG)`]}),`\uFF1A\u5728\u6784\u5EFA\u65F6\u8FD0\u884C\uFF0C\u7528\u4E8E\u9884\u53D6\u9875\u9762\u6240\u9700\u7684\u9759\u6001\u6570\u636E\u3002\u7ED3\u5408 `,(0,i.jsx)(s.code,{children:"getStaticPaths"})," \u7528\u4E8E\u52A8\u6001\u8DEF\u7531\u7684\u9759\u6001\u751F\u6210\u3002"]}),` `]}),` `,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:"shiki shiki-themes github-light-default github-dark-default",style:{"--shiki-light":"#1f2328","--shiki-dark":"#e6edf3","--shiki-light-bg":"#ffffff","--shiki-dark-bg":"#0d1117"},tabIndex:"0","data-lang":"typescript",children:(0,i.jsxs)(s.code,{children:[(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// pages/posts/[id].tsx"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" Layout "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" '../../components/layout'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { getAllPostIds, getPostData } "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" '../../lib/posts'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"; "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// \u5047\u8BBE\u8FD9\u4E9B\u51FD\u6570\u5DF2\u9002\u914D TypeScript"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { GetStaticProps, GetStaticPaths } "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" 'next'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// \u5B9A\u4E49\u9875\u9762 props \u7684\u7C7B\u578B"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"type"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" PostProps"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" postData"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// \u5047\u8BBE postData \u7684\u7ED3\u6784"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" id"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" string"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" title"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" string"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" date"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" string"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" contentHtml"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" string"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" };"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"};"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"export"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" getStaticProps"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" GetStaticProps"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"<"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"PostProps"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"> "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" async"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ({ "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"params"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }) "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"=>"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:" // params \u4E5F\u4F1A\u6709\u7C7B\u578B\u63D0\u793A"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" postData"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" await"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" getPostData"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"(params?.id "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"as"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" string"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"); "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// \u786E\u4FDD id \u662F string \u7C7B\u578B"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:" // \u5982\u679C\u627E\u4E0D\u5230\u6570\u636E\uFF0C\u8FD4\u56DE notFound"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" if"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"!"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"postData) {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { notFound: "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"true"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" };"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" props: {"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" postData,"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" },"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:" // \u53EF\u9009\uFF1A\u914D\u7F6E ISR\uFF0C\u6BCF\u9694 60 \u79D2\u91CD\u65B0\u9A8C\u8BC1"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" revalidate: "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"60"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:","})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" };"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"};"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"export"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" getStaticPaths"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" GetStaticPaths"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" async"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" () "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"=>"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" paths"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" getAllPostIds"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"(); "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// \u83B7\u53D6\u6240\u6709\u52A8\u6001\u8DEF\u7531\u7684\u53EF\u80FD\u8DEF\u5F84"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" paths, "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// paths \u683C\u5F0F\u5E94\u4E3A [{ params: { id: '...' } }, ...]"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" fallback: "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"false"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:", "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// fallback: false \u8868\u793A getStaticPaths \u672A\u8FD4\u56DE\u7684\u8DEF\u5F84\u4F1A\u6E32\u67D3 404"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:" // fallback: 'blocking' \u6216 true \u53EF\u7528\u4E8E\u5904\u7406\u672A\u9884\u6E32\u67D3\u7684\u8DEF\u5F84"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" };"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"};"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"export"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" default"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" function"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" Post"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"({ postData }"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" PostProps) "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"{"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"Layout"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"h1"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">{postData.title}"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:""})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"div"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">{postData.date}"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:""})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"div dangerouslySetInnerHTML"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"{{ "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"__html"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:": postData.contentHtml }} "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"/>"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" "})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" );"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})})]})})}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsxs)(s.strong,{children:[(0,i.jsx)(s.code,{children:"getServerSideProps"}),` (\u670D\u52A1\u7AEF\u6E32\u67D3 SSR)`]}),"\uFF1A\u5728\u6BCF\u6B21\u8BF7\u6C42\u9875\u9762\u65F6\u5728\u670D\u52A1\u5668\u7AEF\u8FD0\u884C\uFF0C\u7528\u4E8E\u83B7\u53D6\u9700\u8981\u5B9E\u65F6\u66F4\u65B0\u7684\u6570\u636E\u3002"]}),` `]}),` `,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:"shiki shiki-themes github-light-default github-dark-default",style:{"--shiki-light":"#1f2328","--shiki-dark":"#e6edf3","--shiki-light-bg":"#ffffff","--shiki-dark-bg":"#0d1117"},tabIndex:"0","data-lang":"typescript",children:(0,i.jsxs)(s.code,{children:[(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// pages/dashboard.tsx"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { GetServerSideProps } "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" 'next'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// \u5B9A\u4E49\u9875\u9762 props \u7684\u7C7B\u578B"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"type"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" DashboardProps"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" data"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"?:"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"value"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" string"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }; "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// \u5047\u8BBE\u6570\u636E\u7684\u7ED3\u6784"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" error"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"?:"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" string"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"};"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"export"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" getServerSideProps"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" GetServerSideProps"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"<"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"DashboardProps"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"> "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" async"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"context"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:") "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"=>"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" try"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" res"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" await"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" fetch"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"`https://api.example.com/realtime-data`"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"); "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// \u793A\u4F8B API \u5730\u5740"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" if"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"!"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"res.ok) {"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:" // \u5904\u7406 HTTP \u9519\u8BEF"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { props: { error: "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"`\u83B7\u53D6\u6570\u636E\u5931\u8D25: ${"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"res"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"status"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"}`"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" } };"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" data"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" await"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" res."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"json"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"();"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" if"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"!"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"data) {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { notFound: "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"true"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }; "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// \u5982\u679C API \u8FD4\u56DE\u7A7A\u6570\u636E\uFF0C\u8FD4\u56DE 404"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" props: { data }, "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// \u5C06\u6570\u636E\u4F5C\u4E3A props \u4F20\u9012\u7ED9\u9875\u9762\u7EC4\u4EF6"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" };"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" } "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"catch"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"error"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" any"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:") {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" console."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"error"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'getServerSideProps \u51FA\u9519:'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:", error);"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { props: { error: error.message "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"||"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" '\u670D\u52A1\u5668\u5185\u90E8\u9519\u8BEF'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" } }; "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// \u6355\u83B7\u5176\u4ED6\u9519\u8BEF"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"};"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"function"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" Dashboard"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"({ "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"data"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:", "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"error"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" DashboardProps"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:") {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" if"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" (error) {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"div"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"h1"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">\u52A0\u8F7D\u6570\u636E\u51FA\u9519"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:""})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"p"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">{error}"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:""})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" "})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" );"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" if"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"!"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"data) {"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:" // This case should ideally be handled by notFound in getServerSideProps"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:" // but added as a fallback for robustness."})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"div"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">\u52A0\u8F7D\u4E2D\u6216\u65E0\u6570\u636E"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"..."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"div"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"h1"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">\u7528\u6237\u4EEA\u8868\u76D8"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:""})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"p"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"\u52A0\u8F7D\u7684\u6570\u636E"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"data"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"value"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" "})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" );"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"export"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" default"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" Dashboard;"})]})]})})}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u5BA2\u6237\u7AEF\u6E32\u67D3 (CSR)"}),"\uFF1A\u5728\u7EC4\u4EF6\u5185\u90E8\u4F7F\u7528 ",(0,i.jsx)(s.code,{children:"useEffect"}),` \u6216\u6570\u636E\u8BF7\u6C42\u5E93 (\u5982 SWR, React Query) \u5728\u6D4F\u89C8\u5668\u7AEF\u83B7\u53D6\u6570\u636E\u3002\u9002\u7528\u4E8E\u9700\u8981\u7528\u6237\u4EA4\u4E92\u540E\u624D\u52A0\u8F7D\u6570\u636E\u6216\u5BF9 SEO \u4E0D\u654F\u611F\u7684\u9875\u9762\u90E8\u5206\u3002`]}),` `]}),` `,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:"shiki shiki-themes github-light-default github-dark-default",style:{"--shiki-light":"#1f2328","--shiki-dark":"#e6edf3","--shiki-light-bg":"#ffffff","--shiki-dark-bg":"#0d1117"},tabIndex:"0","data-lang":"typescript",children:(0,i.jsxs)(s.code,{children:[(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// components/ClientDataFetcher.tsx"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { useState, useEffect } "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" 'react'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"type"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" UserData"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"name"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" string"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"; "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"email"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" string"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }; "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// \u5B9A\u4E49\u6570\u636E\u7C7B\u578B"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"function"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" ClientDataFetcher"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"() {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ["}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"userData"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:", "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"setUserData"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"] "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" useState"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"<"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"UserData"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" |"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" null"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"null"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:");"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ["}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"isLoading"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:", "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"setIsLoading"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"] "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" useState"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"true"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:");"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ["}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"error"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:", "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"setError"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"] "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" useState"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"<"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"string"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" |"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" null"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"null"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:");"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" useEffect"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"(() "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"=>"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" async"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" function"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" fetchData"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"() {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" try"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" res"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" await"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" fetch"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'/api/current-user'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"); "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// \u793A\u4F8B API \u8DEF\u7531"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" if"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"!"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"res.ok) {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" throw"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" new"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" Error"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"`Failed to fetch: ${"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"res"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"status"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"}`"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:");"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" data"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" UserData"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" await"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" res."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"json"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"();"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" setUserData"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"(data);"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" } "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"catch"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"err"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" any"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:") {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" setError"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"(err.message "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"||"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" 'Error fetching data'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:");"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" } "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"finally"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" setIsLoading"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"false"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:");"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" fetchData"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"();"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }, []);"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" if"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" (isLoading) "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"p"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">\u52A0\u8F7D\u6570\u636E\u4E2D"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"..."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" if"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" (error) "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"p"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">\u52A0\u8F7D\u6570\u636E\u51FA\u9519: {error}"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:""}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" if"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"!"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"userData) "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"p"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">\u65E0\u7528\u6237\u6570\u636E\u3002"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:""}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"div"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"h2"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"\u7528\u6237\u6570\u636E"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"CSR"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:")"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:""})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"p"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"\u59D3\u540D"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"userData"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"name"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"p"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"\u90AE\u7BB1"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"userData"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"email"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" "})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" );"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"export"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" default"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ClientDataFetcher;"})]})]})})}),` `,(0,i.jsxs)(s.p,{children:["*App Router \u4E2D\u7684\u6570\u636E\u83B7\u53D6\u65B9\u5F0F (\u5982 ",(0,i.jsx)(s.code,{children:"fetch"}),` API \u7684\u6269\u5C55, React Server Components) \u8BF7\u53C2\u8003\u7B2C\u4E00\u7BC7\u7684\u6E32\u67D3\u7B56\u7565\u6982\u89C8\u548C\u76F8\u5173\u6587\u6863\u3002`]}),` `,(0,i.jsx)(s.h3,{id:"\u56FE\u7247\u4F18\u5316",children:"\u56FE\u7247\u4F18\u5316"}),` `,(0,i.jsxs)(s.p,{children:["\u4F7F\u7528 ",(0,i.jsx)(s.code,{children:"next/image"}),` \u7EC4\u4EF6\u662F Next.js \u4E2D\u4F18\u5316\u56FE\u7247\u8D44\u6E90\u7684\u63A8\u8350\u65B9\u5F0F\u3002\u5B83\u63D0\u4F9B\u4E86\u81EA\u52A8\u4F18\u5316\u3001\u61D2\u52A0\u8F7D\u548C\u54CD\u5E94\u5F0F\u56FE\u7247\u7B49\u529F\u80FD\uFF0C\u663E\u8457\u63D0\u5347\u9875\u9762\u52A0\u8F7D\u6027\u80FD\u3002`]}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u81EA\u52A8\u4F18\u5316"}),"\uFF1ANext.js \u4F1A\u6839\u636E\u7528\u6237\u8BBE\u5907\u548C\u6D4F\u89C8\u5668\u81EA\u52A8\u8C03\u6574\u56FE\u7247\u5927\u5C0F\u3001\u683C\u5F0F\uFF08\u5982\u8F6C\u6362\u4E3A WebP\uFF09\uFF0C\u5E76\u5EF6\u8FDF\u52A0\u8F7D\u5C4F\u5E55\u5916\u7684\u56FE\u7247\u3002"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u54CD\u5E94\u5F0F"}),"\uFF1A\u53EF\u4EE5\u8F7B\u677E\u5904\u7406\u4E0D\u540C\u5C4F\u5E55\u5C3A\u5BF8\u4E0B\u7684\u56FE\u7247\u3002"]}),` `]}),` `,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:"shiki shiki-themes github-light-default github-dark-default",style:{"--shiki-light":"#1f2328","--shiki-dark":"#e6edf3","--shiki-light-bg":"#ffffff","--shiki-dark-bg":"#0d1117"},tabIndex:"0","data-lang":"typescript",children:(0,i.jsxs)(s.code,{children:[(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// components/OptimizedImage.tsx"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" Image "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" 'next/image'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" profilePic "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" '../public/profile.jpg'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"; "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// \u5BFC\u5165\u672C\u5730\u56FE\u7247"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"function"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" OptimizedImage"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"() {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"div"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"h2"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">\u56FE\u7247\u4F18\u5316\u793A\u4F8B"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:""})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"/* \u4F7F\u7528\u672C\u5730\u5BFC\u5165\u7684\u56FE\u7247 */"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"Image"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" src"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"{profilePic}"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" alt"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:'"\u672C\u5730\u56FE\u7247\u793A\u4F8B"'})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" width"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"{"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"500"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"} "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// \u539F\u59CB\u56FE\u7247\u7684\u5BBD\u5EA6"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" height"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"{"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"500"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"} "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// \u539F\u59CB\u56FE\u7247\u7684\u9AD8\u5EA6"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" placeholder"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:'"blur"'}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:" // \u52A0\u8F7D\u65F6\u663E\u793A\u6A21\u7CCA\u6548\u679C (\u5BF9\u4E8E\u672C\u5730\u56FE\u7247\u81EA\u52A8\u652F\u6301)"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" />"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"/* \u4F7F\u7528\u8FDC\u7A0B\u56FE\u7247 */"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"Image"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" src"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:'"https://via.placeholder.com/600/92c952"'}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:" // \u8FDC\u7A0B\u56FE\u7247\u5730\u5740"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" alt"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:'"\u8FDC\u7A0B\u56FE\u7247\u793A\u4F8B"'})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" width"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"{"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"600"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" height"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"{"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"400"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:" // \u6CE8\u610F\uFF1A\u4F7F\u7528\u8FDC\u7A0B\u56FE\u7247\u9700\u8981\u5728 next.config.js \u4E2D\u914D\u7F6E allowed domains"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" />"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" "})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" );"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"export"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" default"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" OptimizedImage;"})]})]})})}),` `,(0,i.jsxs)(s.p,{children:[(0,i.jsxs)(s.strong,{children:["\u914D\u7F6E\u8FDC\u7A0B\u56FE\u7247 (",(0,i.jsx)(s.code,{children:"next.config.js"}),")"]}),"\uFF1A"]}),` `,(0,i.jsxs)(s.p,{children:["\u5982\u679C\u60A8\u4F7F\u7528\u8FDC\u7A0B\u56FE\u7247\uFF0C\u5FC5\u987B\u5728 ",(0,i.jsx)(s.code,{children:"next.config.js"}),` \u4E2D\u914D\u7F6E\u5141\u8BB8\u7684\u56FE\u7247\u6E90\u57DF\u540D\uFF0C\u4EE5\u4FDD\u969C\u5B89\u5168\u6027\u3002`]}),` `,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:"shiki shiki-themes github-light-default github-dark-default",style:{"--shiki-light":"#1f2328","--shiki-dark":"#e6edf3","--shiki-light-bg":"#ffffff","--shiki-dark-bg":"#0d1117"},tabIndex:"0","data-lang":"javascript",children:(0,i.jsxs)(s.code,{children:[(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// next.config.js"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"/** "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"@type"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" {import('next').NextConfig}"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:" */"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" nextConfig"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" images: {"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" domains: ["}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'via.placeholder.com'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:", "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'your-image-domain.com'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"], "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// \u6DFB\u52A0\u60A8\u7684\u56FE\u7247\u57DF\u540D"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" },"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"module"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"exports"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" nextConfig"})]})]})})}),` `,(0,i.jsx)(s.h3,{id:"api-\u8DEF\u7531",children:"API \u8DEF\u7531"}),` `,(0,i.jsx)(s.p,{children:"API \u8DEF\u7531\u5141\u8BB8\u60A8\u5728 Next.js \u9879\u76EE\u5185\u90E8\u521B\u5EFA\u65E0\u670D\u52A1\u5668\u7684 API \u7AEF\u70B9\u3002\u8FD9\u4E9B\u7AEF\u70B9\u8FD0\u884C\u5728\u670D\u52A1\u5668\u7AEF\uFF0C\u53EF\u4EE5\u7528\u4E8E\u5904\u7406\u8868\u5355\u63D0\u4EA4\u3001\u6570\u636E\u5E93\u4EA4\u4E92\u3001\u8C03\u7528\u7B2C\u4E09\u65B9\u670D\u52A1\u7B49\u3002"}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u521B\u5EFA"}),"\uFF1A\u5728 ",(0,i.jsx)(s.code,{children:"pages/api"}),` \u76EE\u5F55\u4E0B\u521B\u5EFA\u6587\u4EF6 (\u4F8B\u5982 `,(0,i.jsx)(s.code,{children:"pages/api/hello.ts"}),")\u3002\u5BFC\u51FA\u4E00\u4E2A default \u51FD\u6570\uFF0C\u8BE5\u51FD\u6570\u63A5\u6536 ",(0,i.jsx)(s.code,{children:"req"}),` (NextApiRequest) \u548C `,(0,i.jsx)(s.code,{children:"res"})," (NextApiResponse) \u5BF9\u8C61\u3002"]}),` `]}),` `,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:"shiki shiki-themes github-light-default github-dark-default",style:{"--shiki-light":"#1f2328","--shiki-dark":"#e6edf3","--shiki-light-bg":"#ffffff","--shiki-dark-bg":"#0d1117"},tabIndex:"0","data-lang":"typescript",children:(0,i.jsxs)(s.code,{children:[(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// pages/api/hello.ts"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" type"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { NextApiRequest, NextApiResponse } "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" 'next'"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"type"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" Data"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" text"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" string"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"export"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" default"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" function"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" handler"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"("})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" req"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" NextApiRequest,"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" res"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" NextApiResponse,"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:") "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"{"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:" // \u5904\u7406\u4E0D\u540C\u7684 HTTP \u65B9\u6CD5"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" if"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" (req.method "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"==="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" 'GET'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:") {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" res."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"status"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"200"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:")."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"json"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"({ text: "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'Hello from API Route'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" })"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" } "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"else"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" if"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" (req.method "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"==="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" 'POST'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:") {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"name"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" } "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" req.body "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// \u5047\u8BBE POST \u8BF7\u6C42\u4F53\u4E2D\u6709 name \u5B57\u6BB5"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" res."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"status"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"200"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:")."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"json"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"({ text: "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"`Hello, ${"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"name"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"}!`"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" })"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" } "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"else"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:" // \u5904\u7406\u4E0D\u5141\u8BB8\u7684 HTTP \u65B9\u6CD5"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" res."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"setHeader"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'Allow'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:", ["}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'GET'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:", "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'POST'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"])"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" res."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"status"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"405"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:")."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"end"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"`Method ${"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"req"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"method"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"} Not Allowed`"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:")"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})})]})})}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u5728\u5BA2\u6237\u7AEF\u8C03\u7528"}),"\uFF1A\u60A8\u53EF\u4EE5\u4F7F\u7528\u6807\u51C6\u7684 ",(0,i.jsx)(s.code,{children:"fetch"}),` API \u6216 axios \u7B49\u5E93\u4ECE\u524D\u7AEF\u9875\u9762\u8C03\u7528 API \u8DEF\u7531\u3002`]}),` `]}),` `,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:"shiki shiki-themes github-light-default github-dark-default",style:{"--shiki-light":"#1f2328","--shiki-dark":"#e6edf3","--shiki-light-bg":"#ffffff","--shiki-dark-bg":"#0d1117"},tabIndex:"0","data-lang":"typescript",children:(0,i.jsxs)(s.code,{children:[(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// pages/index.tsx (\u5BA2\u6237\u7AEF\u8C03\u7528\u793A\u4F8B)"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { useState } "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" 'react'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"function"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" HomePage"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"() {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ["}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"message"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:", "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"setMessage"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"] "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" useState"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"''"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:");"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" fetchHello"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" async"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" () "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"=>"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" res"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" await"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" fetch"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'/api/hello'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:");"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" data"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" await"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" res."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"json"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"();"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" setMessage"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"(data.text);"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" };"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" postHello"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" async"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" () "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"=>"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" res"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" await"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" fetch"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'/api/hello'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:", {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" method: "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'POST'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:","})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" headers: { "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'Content-Type'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:": "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'application/json'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" },"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" body: "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"JSON"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"stringify"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"({ name: "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'Next.js User'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }),"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" });"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" data"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" await"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" res."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"json"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"();"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" setMessage"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"(data.text);"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" };"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"div"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"h1"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"API"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" \u8DEF\u7531\u793A\u4F8B"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:""})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"button onClick"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"{fetchHello}"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:">"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"Fetch "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"GET"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" /"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"api"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"/"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"hello"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:""})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"button onClick"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"{postHello}"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:">"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"Fetch "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"POST"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" /"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"api"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"/"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"hello"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:""})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"p"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"\u6D88\u606F"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"message"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" "})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" );"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"export"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" default"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" HomePage;"})]})]})})}),` `,(0,i.jsxs)(s.p,{children:["*App Router \u4E2D\u7684 API \u8DEF\u7531\u901A\u8FC7\u521B\u5EFA ",(0,i.jsx)(s.code,{children:"route.ts"}),` \u6587\u4EF6\u5B9E\u73B0\uFF0C\u8BF7\u53C2\u8003 Next.js \u5B98\u65B9\u6587\u6863\u4E86\u89E3\u66F4\u591A\u8BE6\u60C5\u3002`]}),` `,(0,i.jsx)(s.h2,{id:"\u6700\u4F73\u5B9E\u8DF5",children:"\u6700\u4F73\u5B9E\u8DF5"}),` `,(0,i.jsx)(s.h3,{id:"\u6027\u80FD\u4F18\u5316",children:"\u6027\u80FD\u4F18\u5316"}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsxs)(s.strong,{children:["\u4EE3\u7801\u5206\u5272 (",(0,i.jsx)(s.code,{children:"next/dynamic"}),")"]}),"\uFF1ANext.js \u9ED8\u8BA4\u4F1A\u81EA\u52A8\u5BF9 ",(0,i.jsx)(s.code,{children:"pages"})," \u6216 ",(0,i.jsx)(s.code,{children:"app"}),` \u76EE\u5F55\u4E0B\u7684\u4EE3\u7801\u8FDB\u884C\u5206\u5272\u3002\u5BF9\u4E8E\u975E\u5173\u952E\u6216\u5728\u7279\u5B9A\u6761\u4EF6\u4E0B\u624D\u6E32\u67D3\u7684\u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u4F7F\u7528 `,(0,i.jsx)(s.code,{children:"next/dynamic"}),` \u8FDB\u884C\u52A8\u6001\u5BFC\u5165\uFF0C\u5B9E\u73B0\u66F4\u7EC6\u7C92\u5EA6\u7684\u4EE3\u7801\u5206\u5272\uFF0C\u51CF\u5C11\u521D\u59CB\u52A0\u8F7D\u7684 JavaScript \u4F53\u79EF\u3002`]}),` `]}),` `,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:"shiki shiki-themes github-light-default github-dark-default",style:{"--shiki-light":"#1f2328","--shiki-dark":"#e6edf3","--shiki-light-bg":"#ffffff","--shiki-dark-bg":"#0d1117"},tabIndex:"0","data-lang":"typescript",children:(0,i.jsxs)(s.code,{children:[(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// components/HeavyComponent.tsx (\u4E00\u4E2A\u5047\u8BBE\u7684\u52A0\u8F7D\u8F83\u6162\u7684\u7EC4\u4EF6)"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { useEffect } "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" 'react'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"function"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" HeavyComponent"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"() {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" useEffect"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"(() "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"=>"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" console."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"log"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'HeavyComponent \u5DF2\u52A0\u8F7D'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:");"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }, []);"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"div"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">\u6211\u662F\u4E00\u4E2A\u52A8\u6001\u52A0\u8F7D\u7684\u7EC4\u4EF6"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:""}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"export"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" default"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" HeavyComponent;"})]})]})})}),` `,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:"shiki shiki-themes github-light-default github-dark-default",style:{"--shiki-light":"#1f2328","--shiki-dark":"#e6edf3","--shiki-light-bg":"#ffffff","--shiki-dark-bg":"#0d1117"},tabIndex:"0","data-lang":"typescript",children:(0,i.jsxs)(s.code,{children:[(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// pages/some-page.tsx (\u4F7F\u7528 next/dynamic)"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" dynamic "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" 'next/dynamic'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// \u52A8\u6001\u5BFC\u5165\u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u5728\u52A0\u8F7D\u65F6\u663E\u793A Loading \u72B6\u6001"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" DynamicHeavyComponent"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" dynamic"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"(() "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"=>"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'../components/HeavyComponent'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"), {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" loading"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:": () "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"=>"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"p"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">\u52A0\u8F7D HeavyComponent"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"..."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:","})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"});"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"function"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" SomePage"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"() {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"div"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"h1"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">\u52A8\u6001\u5BFC\u5165\u793A\u4F8B"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:""})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"DynamicHeavyComponent "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"/>"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" "})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" );"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"export"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" default"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" SomePage;"})]})]})})}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsxs)(s.strong,{children:["\u5BA2\u6237\u7AEF\u5BFC\u822A (",(0,i.jsx)(s.code,{children:"next/link"}),")"]}),"\uFF1A\u4F7F\u7528 ",(0,i.jsx)(s.code,{children:"next/link"}),` \u7EC4\u4EF6\u8FDB\u884C\u9875\u9762\u8DF3\u8F6C\u53EF\u4EE5\u5B9E\u73B0\u5BA2\u6237\u7AEF\u8DEF\u7531\uFF0C\u907F\u514D\u9875\u9762\u5B8C\u5168\u5237\u65B0\uFF0C\u63D0\u5347\u7528\u6237\u4F53\u9A8C\u548C\u5BFC\u822A\u901F\u5EA6\u3002Next.js \u4F1A\u5728\u94FE\u63A5\u8FDB\u5165\u89C6\u53E3\u65F6\u81EA\u52A8\u9884\u52A0\u8F7D\u94FE\u63A5\u7684\u8D44\u6E90\u3002`]}),` `]}),` `,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:"shiki shiki-themes github-light-default github-dark-default",style:{"--shiki-light":"#1f2328","--shiki-dark":"#e6edf3","--shiki-light-bg":"#ffffff","--shiki-dark-bg":"#0d1117"},tabIndex:"0","data-lang":"typescript",children:(0,i.jsxs)(s.code,{children:[(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// components/NavLink.tsx"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" Link "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" 'next/link'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { ReactNode } "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" 'react'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"interface"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" NavLinkProps"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" href"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" string"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" children"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" ReactNode"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"function"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" NavLink"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"({ "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"href"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:", "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"children"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" NavLinkProps"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:") {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:" // \u4F7F\u7528 \u7EC4\u4EF6\u8FDB\u884C\u5185\u90E8\u5BFC\u822A"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"Link href"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"{href}"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:">"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"/* \u5728 Next.js 13+ \u4E2D\uFF0C \u6807\u7B7E\u4E0D\u518D\u9700\u8981\u5305\u88F9\u5728 \u5185 */"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"children"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" "})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" );"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"export"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" default"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" NavLink;"})]})]})})}),` `,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:"shiki shiki-themes github-light-default github-dark-default",style:{"--shiki-light":"#1f2328","--shiki-dark":"#e6edf3","--shiki-light-bg":"#ffffff","--shiki-dark-bg":"#0d1117"},tabIndex:"0","data-lang":"typescript",children:(0,i.jsxs)(s.code,{children:[(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"// pages/index.tsx (\u4F7F\u7528 NavLink)"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" NavLink "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" '../components/NavLink'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:";"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"function"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" HomePage"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"() {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"div"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"h1"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">\u9996\u9875"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:""})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"p"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:">\u6B22\u8FCE\u6765\u5230 Next.js \u5B66\u4E60\u7B14\u8BB0\u3002"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:""})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"NavLink href"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:'"/about"'}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:">"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"\u5173\u4E8E\u6211\u4EEC"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:""}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"/* \u4F7F\u7528 NavLink \u8FDB\u884C\u9875\u9762\u8DF3\u8F6C */"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" "})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" );"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"export"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" default"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" HomePage;"})]})]})})}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u56FE\u7247\u4F18\u5316"}),"\uFF1A\u5982\u524D\u6240\u8FF0\uFF0C\u4F7F\u7528 ",(0,i.jsx)(s.code,{children:"next/image"})," \u662F\u5FC5\u4E0D\u53EF\u5C11\u7684\u6027\u80FD\u4F18\u5316\u624B\u6BB5\u3002"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"\u5408\u7406\u4F7F\u7528\u6E32\u67D3\u7B56\u7565"}),`\uFF1A\u6839\u636E\u9875\u9762\u5185\u5BB9\u9009\u62E9 SSG, SSR, ISR \u6216 CSR\uFF0C\u6700\u5927\u9650\u5EA6\u5730\u63D0\u5347\u6027\u80FD\u3002`]}),` `]})]})}function F(h={}){let{wrapper:s}=h.components||{};return s?(0,i.jsx)(s,{...h,children:(0,i.jsx)(t,{...h})}):t(h)}return C(N);})(); ;return Component;