1"use strict";(self.webpackChunkcode_fictionist=self.webpackChunkcode_fictionist||[]).push([[4518],{22767:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>o,contentTitle:()=>i,default:()=>h,frontMatter:()=>l,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"tech_articles/framework/React/Next/next_page","title":"Next - Page \u8207 Layout","description":"Layouts \u8207 pages","source":"@site/docs/tech_articles/04-framework/01-React/Next/03-next_page.mdx","sourceDirName":"tech_articles/04-framework/01-React/Next","slug":"/tech_articles/framework/React/Next/next_page","permalink":"/docs/tech_articles/framework/React/Next/next_page","draft":false,"unlisted":false,"tags":[{"inline":true,"label":"react","permalink":"/docs/tags/react"},{"inline":true,"label":"next","permalink":"/docs/tags/next"},{"inline":true,"label":"page","permalink":"/docs/tags/page"},{"inline":true,"label":"layout","permalink":"/docs/tags/layout"}],"version":"current","sidebarPosition":3,"frontMatter":{"title":"Next - Page \u8207 Layout","tags":["react","next","page","layout"]},"sidebar":"programSidebar","previous":{"title":"Next - \u6982\u89bd","permalink":"/docs/tech_articles/framework/React/Next/next_intro"},"next":{"title":"Next - database\u3001deploy","permalink":"/docs/tech_articles/framework/React/Next/next_database"}}');var a=s(74848),r=s(28453);const l={title:"Next - Page \u8207 Layout",tags:["react","next","page","layout"]},i=void 0,o={},c=[{value:"Layouts \u8207 pages",id:"layouts-\u8207-pages",level:2},{value:"pages \u8207\u5de2\u72c0\u8def\u7531",id:"pages-\u8207\u5de2\u72c0\u8def\u7531",level:3},{value:"\u65b0\u589e\u4e00\u500b\u9801\u9762",id:"\u65b0\u589e\u4e00\u500b\u9801\u9762",level:3},{value:"\u65b0\u589e\u4e00\u500b layout",id:"\u65b0\u589e\u4e00\u500b-layout",level:3},{value:"Root layout",id:"root-layout",level:3},{value:"\u8def\u7531\u5c0e\u822a",id:"\u8def\u7531\u5c0e\u822a",level:2},{value:"<code><Link></code> \u5143\u4ef6",id:"link-\u5143\u4ef6",level:3},{value:"\u986f\u793a active links (<code>usePathname()</code>)",id:"\u986f\u793a-active-links-usepathname",level:3},{value:"\u7d93\u7531\u51fd\u5f0f\u6539\u8b8a\u8def\u7531\uff0c\u9700\u4f7f\u7528 <code>useRouter</code> hook\uff1a",id:"\u7d93\u7531\u51fd\u5f0f\u6539\u8b8a\u8def\u7531\u9700\u4f7f\u7528-userouter-hook",level:3},{value:"\u8def\u7531\u7a2e\u985e",id:"\u8def\u7531\u7a2e\u985e",level:2},{value:"\u52d5\u614b\u8def\u7531",id:"\u52d5\u614b\u8def\u7531",level:3},{value:"\u57fa\u672c\u6b3e",id:"\u57fa\u672c\u6b3e",level:4},{value:"Catch-all Segments",id:"catch-all-segments",level:4},{value:"Optional Catch-all Segments",id:"optional-catch-all-segments",level:4},{value:"\u5e73\u884c\u8def\u7531",id:"\u5e73\u884c\u8def\u7531",level:3},{value:"\u6514\u622a\u8def\u7531",id:"\u6514\u622a\u8def\u7531",level:3},{value:"\u5e73\u884c\u8def\u7531\u8207\u6514\u622a\u8def\u7531\u5dee\u5225\u5728\u54ea\uff1f",id:"\u5e73\u884c\u8def\u7531\u8207\u6514\u622a\u8def\u7531\u5dee\u5225\u5728\u54ea",level:4},{value:"Middleware",id:"middleware",level:2}];function d(e){const n={admonition:"admonition",blockquote:"blockquote",br:"br",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.h2,{id:"layouts-\u8207-pages",children:"Layouts \u8207 pages"}),"\n",(0,a.jsx)(n.h3,{id:"pages-\u8207\u5de2\u72c0\u8def\u7531",children:"pages \u8207\u5de2\u72c0\u8def\u7531"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-xml",children:"---| app/\n------| /app/dashboard/\n---------| /app/dashboard/invoices\n"})}),"\n",(0,a.jsxs)(n.p,{children:["\u6bcf\u500b ",(0,a.jsx)(n.strong,{children:"page.tsx"})," \u90fd\u4ee3\u8868\u4e00\u500b\u9801\u9762\uff0c\u5982 ",(0,a.jsx)(n.strong,{children:"/app/page.tsx"})," \u4ee3\u8868\u4e3b\u9801\uff0c\u5c0d\u61c9\u7684\u8def\u7531\u662f ",(0,a.jsx)(n.strong,{children:"/"}),"\u3002",(0,a.jsx)(n.br,{}),"\n","\u540c\u7406\uff0c\u5728 ",(0,a.jsx)(n.strong,{children:"dashboard"})," \u8cc7\u6599\u593e\u4e2d\u4e5f\u5efa\u7acb\u4e00\u500b ",(0,a.jsx)(n.strong,{children:"page.tsx"}),"\uff0c\u5c31\u53ef\u4ee5\u5f62\u6210\u8def\u7531 ",(0,a.jsx)(n.strong,{children:"/dashboard"}),"\u3002",(0,a.jsx)(n.br,{}),"\n","\u5728 ",(0,a.jsx)(n.strong,{children:"invoices"})," \u4e2d\u53c8\u5efa\u7acb\u4e00\u500b ",(0,a.jsx)(n.strong,{children:"page.tsx"})," \u5c31\u6703\u5f62\u6210\u5de2\u72c0\u8def\u7531 ",(0,a.jsx)(n.strong,{children:"/dashboard/invoices"}),"\u3002"]}),"\n",(0,a.jsx)(n.h3,{id:"\u65b0\u589e\u4e00\u500b\u9801\u9762",children:"\u65b0\u589e\u4e00\u500b\u9801\u9762"}),"\n",(0,a.jsxs)(n.p,{children:["\u5be6\u4f5c\u5728 ",(0,a.jsx)(n.strong,{children:"/app"})," \u4e0b\u9762\u65b0\u589e\u4e00\u500b\u8cc7\u6599\u593e ",(0,a.jsx)(n.strong,{children:"dashboard"})," \u4e26\u5728\u5176\u4e2d\u65b0\u589e ",(0,a.jsx)(n.strong,{children:"page.tsx"}),"\uff0c\u9019\u6a23\u5c31\u53ef\u4ee5\u5f62\u6210 ",(0,a.jsx)(n.strong,{children:"/dashboard"})," \u9019\u500b\u8def\u7531\u8207\u9801\u9762\uff1a"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",metastring:"title='/app/dashboard/page.tsx'",children:"export default function Page() {\n return <p>Dashboard Page</p>;\n}\n"})}),"\n",(0,a.jsx)(n.h3,{id:"\u65b0\u589e\u4e00\u500b-layout",children:"\u65b0\u589e\u4e00\u500b layout"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-xml",children:"---| app/\n------| /app/dashboard/\n---------| /app/dashboard/invoices\n---------| /app/dashboard/customers\n"})}),"\n",(0,a.jsxs)(n.p,{children:["\u4f9d\u5b98\u65b9\u7bc4\u4f8b\uff0c\u82e5\u5728 ",(0,a.jsx)(n.strong,{children:"dashboard"})," \u65b0\u589e\u4e00\u500b ",(0,a.jsx)(n.strong,{children:"layout.tsx"}),"\uff1a"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",metastring:"title='/app/dashboard/layout.tsx'",children:'import SideNav from \'@/app/ui/dashboard/sidenav\';\n \nexport default function Layout({ children }: { children: React.ReactNode }) {\n return (\n <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">\n <div className="w-full flex-none md:w-64">\n <SideNav />\n </div>\n <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>\n </div>\n );\n}\n'})}),"\n",(0,a.jsxs)(n.p,{children:["\u5247\u6b64\u4f48\u5c40\u5957\u7528\u5230 ",(0,a.jsx)(n.strong,{children:"dashboard"})," \u5f80\u4e0b\u5c64\u6b21\u7684\u9801\u9762\u8207\u4f48\u5c40\u3002"]}),"\n",(0,a.jsx)(n.h3,{id:"root-layout",children:"Root layout"}),"\n",(0,a.jsxs)(n.p,{children:["\u5728\u6700\u4e0a\u5c64\u7684 lauout\uff0c\u4e5f\u5c31\u662f ",(0,a.jsx)(n.strong,{children:"/app/layout.tsx"}),"\uff0c\u53c8\u53eb\u505a root layout\uff0c\u4ed6\u662f\u4e00\u500b",(0,a.jsx)(n.strong,{children:"\u5fc5\u9808"}),"\u5f97\u5b58\u5728\u7684\u4f48\u5c40\uff0c\u7528\u4f86\u8abf\u6574 ",(0,a.jsx)(n.code,{children:"<html>"})," \u8ddf ",(0,a.jsx)(n.code,{children:"<body>"}),"\u3002"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",metastring:"title='/app/layout.tsx'",children:"import '@/app/ui/global.css';\nimport { inter } from '@/app/ui/fonts';\n \nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n <html lang=\"en\">\n <body className={`${inter.className} antialiased`}>{children}</body>\n </html>\n );\n}\n"})}),"\n",(0,a.jsx)(n.hr,{}),"\n",(0,a.jsx)(n.h2,{id:"\u8def\u7531\u5c0e\u822a",children:"\u8def\u7531\u5c0e\u822a"}),"\n",(0,a.jsxs)(n.h3,{id:"link-\u5143\u4ef6",children:[(0,a.jsx)(n.code,{children:"<Link>"})," \u5143\u4ef6"]}),"\n",(0,a.jsxs)(n.p,{children:["Next \u63d0\u4f9b ",(0,a.jsx)(n.code,{children:"<Link>"})," \u5143\u4ef6\u4f86\u53d6\u4ee3 ",(0,a.jsx)(n.code,{children:"<a>"})," \u5728\u5ba2\u6236\u7aef\u505a\u8def\u7531\u5c0e\u822a\u3002"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",metastring:"title='/app/ui/dashboard/nav-links.tsx'",children:'import {\n UserGroupIcon,\n HomeIcon,\n DocumentDuplicateIcon,\n} from \'@heroicons/react/24/outline\';
1\n// highlight-next-line\nimport Link from \'next/link\';\n \n// ...\n \nexport default function NavLinks() {\n return (\n <>\n {links.map((link) => {\n const LinkIcon = link.icon;\n return (\n {/* highlight-start */}\n <Link\n key={link.name}\n href={link.href}\n className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"\n >\n <LinkIcon className="w-6" />\n <p className="hidden md:block">{link.name}</p>\n </Link>\n {/* highlight-end */}\n );\n })}\n </>\n );\n}\n'})}),"\n",(0,a.jsxs)(n.admonition,{type:"info",children:[(0,a.jsx)(n.p,{children:"\u6211\u89ba\u5f97\u5b98\u65b9\u8aaa\u7684\u9019\u4e00\u6bb5\u975e\u5e38\u6709\u8da3\uff1a"}),(0,a.jsxs)(n.blockquote,{children:["\n",(0,a.jsxs)(n.p,{children:["Furthermore, in production, whenever ",(0,a.jsx)(n.code,{children:"<Link>"})," components appear in the browser's viewport, Next.js automatically prefetches the code for the linked route in the background. By the time the user clicks the link, the code for the destination page will already be loaded in the background, and this is what makes the page transition near-instant!"]}),"\n"]})]}),"\n",(0,a.jsxs)(n.h3,{id:"\u986f\u793a-active-links-usepathname",children:["\u986f\u793a active links (",(0,a.jsx)(n.code,{children:"usePathname()"}),")"]}),"\n",(0,a.jsxs)(n.p,{children:["\u5982\u679c\u9700\u6c42\u5728\u756b\u9762\u4e0a\u986f\u793a\u7576\u524d\u8def\u7531\uff0c\u6216\u9700\u6c42\u7576\u524d\u8def\u7531\u505a\u4e00\u4e9b\u4e8b\u60c5 (\u6bd4\u5982\u4e0b\u5224\u5225\u5f0f)\uff0c\u53ef\u4ee5\u4f7f\u7528 Next \u63d0\u4f9b\u7684 ",(0,a.jsx)(n.code,{children:"usePathname()"})," hook \u4f86\u6355\u7372\u7576\u524d\u8def\u7531\u3002",(0,a.jsx)(n.br,{}),"\n","\u4f46\u56e0\u70ba ",(0,a.jsx)(n.code,{children:"usePathname()"})," \u662f\u500b hook\uff0c\u56e0\u6b64\u5fc5\u9808\u5728\u5143\u4ef6\u524d\u9762\u52a0\u4e0a ",(0,a.jsx)(n.strong,{children:"'use client'"})," \u5ba3\u544a\u5b83\u662f\u500b ",(0,a.jsx)(n.strong,{children:"client component"})," (Next \u9810\u8a2d\u662f server component)\u3002"]}),"\n",(0,a.jsx)(n.p,{children:"\u4f9d\u5b98\u65b9\u7bc4\u4f8b\uff0c\u5c31\u662f\u4f9d\u7167\u73fe\u5728\u6240\u5728\u8def\u7531\u4f86\u6539\u8b8a\u756b\u9762\u7684\u984f\u8272\uff1a"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",metastring:"title='/app/ui/dashboard/nav-links.tsx'",children:"// highlight-next-line\n'use client';\n\nimport {\n UserGroupIcon,\n HomeIcon,\n InboxIcon,\n} from '@heroicons/react/24/outline';\nimport Link from 'next/link';\n// highlight-start\nimport { usePathname } from 'next/navigation';\nimport clsx from 'clsx';\n// highlight-end\n\nexport default function NavLinks() {\n // highlight-next-line\n const pathname = usePathname();\n \n return (\n <>\n {links.map((link) => {\n const LinkIcon = link.icon;\n return (\n <Link\n key={link.name}\n href={link.href}\n {/* highlight-start */}\n className={clsx(\n 'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',\n {\n 'bg-sky-100 text-blue-600': pathname === link.href,\n },\n )}\n {/* highlight-end */}\n >\n <LinkIcon className=\"w-6\" />\n <p className=\"hidden md:block\">{link.name}</p>\n </Link>\n );\n })}\n </>\n );\n}\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"\u7d93\u7531\u51fd\u5f0f\u6539\u8b8a\u8def\u7531\u9700\u4f7f\u7528-userouter-hook",children:["\u7d93\u7531\u51fd\u5f0f\u6539\u8b8a\u8def\u7531\uff0c\u9700\u4f7f\u7528 ",(0,a.jsx)(n.code,{children:"useRouter"})," hook\uff1a"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:"'use client'\n \nimport { useRouter } from 'next/navigation'\n \nexport default function Page() {\n const router = useRouter()\n \n return (\n <button type=\"button\" onClick={() => router.push('/dashboard')}>\n Dashboard\n </button>\n )\n}\n"})}),"\n",(0,a.jsx)(n.hr,{}),"\n",(0,a.jsx)(n.h2,{id:"\u8def\u7531\u7a2e\u985e",children:"\u8def\u7531\u7a2e\u985e"}),"\n",(0,a.jsx)(n.h3,{id:"\u52d5\u614b\u8def\u7531",children:"\u52d5\u614b\u8def\u7531"}),"\n",(0,a.jsx)(n.h4,{id:"\u57fa\u672c\u6b3e",children:"\u57fa\u672c\u6b3e"}),"\n",(0,a.jsxs)(n.p,{children:["\u7528 ",(0,a.jsx)(n.strong,{children:"[ ]"})," \u628a\u8cc7\u6599\u593e\u5305\u8d77\u4f86\u5373\u53ef\u3002"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-xml",children:"| app/\n---| blog/\n------| [slug]/\n"})}),"\n",(0,a.jsxs)(n.p,{children:["\u5982\u8981\u53d6\u7528\u52d5\u614b\u8def\u7531\u8cc7\u8a0a\uff0c\u4f7f\u7528 ",(0,a.jsx)(n.code,{children:"params.slug"})," \u5373\u53ef\u3002"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",metastring:"title='app/blog/[slug]/page.tsx'",children:"export default function Page({ params }: { params: { slug: string } }) {\n return <div>My Post: {params.slug}</div>\n}\n"})}),"\n",(0,a.jsx)(n.p,{children:"\u7522\u751f\u591a\u500b\u52d5\u614b\u8def\u7531\uff1a"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:"export async function generateStaticParams() {\n const posts = await fetch('https://.../posts').then((res) =>
1 res.json())\n \n return posts.map((post) => ({\n slug: post.slug,\n }))\n}\n"})}),"\n",(0,a.jsx)(n.h4,{id:"catch-all-segments",children:"Catch-all Segments"}),"\n",(0,a.jsxs)(n.p,{children:["\u53ef\u4ee5\u901a\u904e\u5728\u62ec\u865f\u5167\u6dfb\u52a0\u7701\u7565\u865f ",(0,a.jsx)(n.strong,{children:"[...folderName]"})," \u4f86\u64f4\u5c55\u6355\u7372\u6240\u6709\u5f8c\u7e8c\u7684\u6bb5\u843d\u3002"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-xml",children:"| app/\n---| blog/\n------| [...slug]/\n"})}),"\n",(0,a.jsxs)(n.p,{children:["\u5b98\u65b9\u4f8b\u5b50\u70ba ",(0,a.jsx)(n.strong,{children:"app/shop/[...slug]/page.js"})," \u53ef\u4ee5\u540c\u6642\u5c0d\u61c9\u5230\uff1a"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.strong,{children:"/shop/clothes"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.strong,{children:"/shop/clothes/tops"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.strong,{children:"/shop/clothes/tops/t-shirts"})}),"\n"]}),"\n",(0,a.jsx)(n.h4,{id:"optional-catch-all-segments",children:"Optional Catch-all Segments"}),"\n",(0,a.jsxs)(n.p,{children:["\u8207 Catch-all Segments \u76f8\u4f3c\uff0c\u4f46\u5b83\u5141\u8a31\u5339\u914d\u53ea\u6709\u57fa\u790e\u8def\u5f91\u800c\u6c92\u6709\u4efb\u4f55\u5b50\u8def\u5f91\u7684\u8def\u7531\u3002",(0,a.jsx)(n.br,{}),"\n","\u4ee5\u4e0a\u6578\u4f8b\u5b50\u4f86\u8b1b\u5c31\u662f ",(0,a.jsx)(n.strong,{children:"app/shop/[[...slug]]/page.js"})," \u53ef\u4ee5\u591a\u5339\u914d ",(0,a.jsx)(n.strong,{children:"/shop"})," \u9019\u500b\u8def\u7531\u3002"]}),"\n",(0,a.jsx)(n.h3,{id:"\u5e73\u884c\u8def\u7531",children:"\u5e73\u884c\u8def\u7531"}),"\n",(0,a.jsxs)(n.p,{children:["\u9019\u500b\u6982\u5ff5\u6307\u7684\u662f\u5728\u540c\u4e00\u500b\u7db2\u9801\u5e03\u5c40\u4e2d\uff0c\u6839\u64da\u7279\u5b9a\u7684\u689d\u4ef6\uff0c\u53ef\u4ee5\u540c\u6642\u986f\u793a\u4f86\u81ea\u4e0d\u540c\u8def\u7531\u7684\u5167\u5bb9\u3002",(0,a.jsx)(n.br,{}),"\n","\u9019\u7a2e\u65b9\u5f0f\u5141\u8a31\u5728\u4e0d\u8df3\u8f49\u9801\u9762\u7684\u60c5\u6cc1\u4e0b\uff0c\u5728\u4e00\u500b\u9801\u9762\u4e0a\u5c55\u793a\u591a\u500b\u4e0d\u540c\u7684\u5167\u5bb9\u5340\u584a\u6216\u7d44\u4ef6\uff0c\u9069\u5408\u65bc\u52d5\u614b\u6027\u9ad8\u7684\u61c9\u7528\u5834\u666f\uff0c\u6bd4\u5982\u5100\u8868\u677f\u6216\u793e\u4ea4\u7db2\u7ad9\u7684\u4fe1\u606f\u6d41\u3002"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-xml",children:"| app/\n---| @analytic/\n---| @team/\n"})}),"\n",(0,a.jsx)(n.p,{children:"\u5b98\u65b9\u4f7f\u7528\u7bc4\u4f8b\uff1a"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",metastring:"title='app/layout.tsx'",children:"export default function Layout({\n children,\n team,\n analytics,\n}: {\n children: React.ReactNode\n analytics: React.ReactNode\n team: React.ReactNode\n}) {\n return (\n <>\n {children}\n {team}\n {analytics}\n </>\n )\n}\n"})}),"\n",(0,a.jsx)(n.h3,{id:"\u6514\u622a\u8def\u7531",children:"\u6514\u622a\u8def\u7531"}),"\n",(0,a.jsxs)(n.p,{children:["Intercepting Routes \u53ef\u4ee5\u8b93\u4f7f\u7528\u8005\u5728\u700f\u89bd\u7db2\u9801\u7684\u6642\u5019\uff0c\u80fd\u5920\u5728\u4e0d\u96e2\u958b\u7576\u524d\u9801\u9762\u7684\u60c5\u6cc1\u4e0b\uff0c\u5f48\u51fa\u6216\u52a0\u8f09\u53e6\u4e00\u90e8\u5206\u7684\u5167\u5bb9\uff0c\u6bd4\u5982\u9ede\u64ca\u4e00\u5f35\u7167\u7247\uff0c\u7167\u7247\u4ee5\u5f48\u51fa\u8996\u7a97\u7684\u5f62\u5f0f\u51fa\u73fe\uff0c\u800c\u4e0d\u662f\u8df3\u8f49\u5230\u53e6\u4e00\u500b\u9801\u9762\u3002",(0,a.jsx)(n.br,{}),"\n","\u4ee5\u5b98\u65b9\u4f8b\u5b50\u4f86\u770b\uff0c",(0,a.jsx)(n.strong,{children:"feed"})," \u8cc7\u6599\u593e\u4e0b\u6709\u4e00\u500b ",(0,a.jsx)(n.strong,{children:"(..photo)"})," \u8cc7\u6599\u593e\uff0c\u53ef\u4ee5\u518d\u9019\u88e1\u505a\u5f48\u51fa\u8996\u7a97\u6a23\u5f0f\uff0c\u4ed6\u6703\u81ea\u52d5\u6514\u622a ",(0,a.jsx)(n.strong,{children:"photo"})," \u9019\u500b\u8cc7\u6599\u593e\u7522\u751f\u7684\u8def\u7531\u3002"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-xml",children:"| app/\n---| (..photo)/\n---| feed/\n------| photo/\n"})}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"(.)"}),"\uff1a \u7528\u4f86\u5339\u914d\u540c\u4e00\u5c64\u7d1a\u7684\u6bb5\u843d\u3002"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"(..)"}),"\uff1a \u7528\u4f86\u5339\u914d\u4e0a\u4e00\u5c64\u7d1a\u7684\u6bb5\u843d\u3002"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"(..)(..)"}),"\uff1a \u7528\u4f86\u5339\u914d\u5169\u5c64\u4ee5\u4e0a\u7684\u6bb5\u843d\u3002"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"(...)"}),"\uff1a \u7528\u4f86\u5339\u914d\u5f9e\u6839\u76ee\u9304\u958b\u59cb\u7684\u6240\u6709\u6bb5\u843d\u3002"]}),"\n"]}),"\n",(0,a.jsxs)(n.admonition,{type:"info",children:[(0,a.jsx)(n.h4,{id:"\u5e73\u884c\u8def\u7531\u8207\u6514\u622a\u8def\u7531\u5dee\u5225\u5728\u54ea",children:"\u5e73\u884c\u8def\u7531\u8207\u6514\u622a\u8def\u7531\u5dee\u5225\u5728\u54ea\uff1f"}),(0,a.jsxs)(n.p,{children:["\u524d\u8005\u66f4\u591a\u95dc\u6ce8\u65bc\u4e00\u6b21\u6027\u5c
155\u793a\u591a\u6a23\u5316\u7684\u5167\u5bb9\uff0c\u5f8c\u8005\u5247\u662f\u5728\u7528\u6236\u64cd\u4f5c\u4e2d\u9748\u6d3b\u5207\u63db\u986f\u793a\u7684\u5167\u5bb9\uff0c\u4f46\u90fd\u4e0d\u6703\u8b93\u7528\u6236\u611f\u89ba\u81ea\u5df1\u5df2\u7d93\u96e2\u958b\u4e86\u539f\u672c\u7684\u9801\u9762\u3002",(0,a.jsx)(n.br,{}),"\n","\u57fa\u672c\u4e0a\u5169\u8005\u53ef\u4ee5\u7d44\u5408\u4f7f\u7528\u3002"]})]}),"\n",(0,a.jsx)(n.hr,{}),"\n",(0,a.jsx)(n.h2,{id:"middleware",children:"Middleware"}),"\n",(0,a.jsx)(n.p,{children:"\u9019\u662f\u4e00\u500b\u8ddf app \u8cc7\u6599\u593e\u540c\u5c64\u7d1a\u7684\u6a94\u6848\uff1a"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-xml",children:"---| app/\n---| middleware.ts\n"})}),"\n",(0,a.jsxs)(n.p,{children:["\u57fa\u672c\u4e0a middleware \u5141\u8a31\u5728\u4f3a\u670d\u5668\u63a5\u6536\u8acb\u6c42\u4e26\u5b8c\u6210\u8655\u7406\u4e4b\u524d\u5148\u57f7\u884c\u4e00\u4e9b\u64cd\u4f5c\uff0c\u6bd4\u5982\u8aaa\u767b\u5165\u9a57\u8b49\u3002",(0,a.jsx)(n.br,{}),"\n","\u4ee5\u5b98\u65b9\u7bc4\u4f8b\u70ba\u4f8b\uff0c\u5c31\u662f\u5c07\u6240\u6709\u8a2a\u554f ",(0,a.jsx)(n.strong,{children:"/about"})," \u8def\u5f91\uff08\u53ca\u5176\u6240\u6709\u5b50\u8def\u5f91\uff09\u7684\u8acb\u6c42\u91cd\u5b9a\u5411\u5230 ",(0,a.jsx)(n.strong,{children:"/home"})," \u8def\u5f91\u3002"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",metastring:"title='middleware.ts'",children:"import { NextResponse } from 'next/server'\nimport type { NextRequest } from 'next/server'\n \n// This function can be marked `async` if using `await` inside\nexport function middleware(request: NextRequest) {\n return NextResponse.redirect(new URL('/home', request.url))\n}\n \nexport const config = {\n matcher: '/about/:path*',\n}\n"})})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},28453:(e,n,s)=>{s.d(n,{R:()=>l,x:()=>i});var t=s(96540);const a={},r=t.createContext(a);function l(e){const n=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.