动态路由

当您无法提前获知确切的路由片段名称，并希望根据动态数据创建路由时，可以使用动态片段，这些片段会在请求时填充或在构建时预渲染。

约定

通过将文件夹名称包裹在方括号中即可创建动态片段：[folderName]。例如 [id] 或 [slug]。

动态片段会作为 params 属性传递给 layout、page、route 和 generateMetadata 函数。

示例

例如，博客可以包含以下路由 app/blog/[slug]/page.js，其中 [slug] 是博客文章的动态片段。

export default function Page({ params }: { params: { slug: string } }) {
  return <div>我的文章：{params.slug}</div>
}

查看 generateStaticParams() 页面了解如何为片段生成参数。

须知：动态片段等同于 pages 目录中的动态路由。

生成静态参数

generateStaticParams 函数可与动态路由片段结合使用，以在构建时静态生成路由，而非在请求时按需生成。

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())

  return posts.map((post) => ({
    slug: post.slug,
  }))
}

generateStaticParams 函数的主要优势在于其智能数据检索能力。如果在 generateStaticParams 函数中使用 fetch 请求获取内容，这些请求会被自动记忆化。这意味着在多个 generateStaticParams、布局和页面中具有相同参数的 fetch 请求只会执行一次，从而减少构建时间。

如果您正在从 pages 目录迁移，请使用迁移指南。

查看 generateStaticParams 服务器函数文档 了解更多信息和高级用例。

通配片段

通过在括号内添加省略号 [...folderName]，动态片段可以扩展为通配后续片段。

例如，app/shop/[...slug]/page.js 将匹配 /shop/clothes，同时也匹配 /shop/clothes/tops、/shop/clothes/tops/t-shirts 等。

可选通配片段

通过将参数包裹在双方括号中 [[...folderName]]，通配片段可以变为可选。

例如，app/shop/[[...slug]]/page.js 除了匹配 /shop/clothes、/shop/clothes/tops、/shop/clothes/tops/t-shirts 外，还会匹配 /shop。

通配片段与可选通配片段的区别在于，可选情况下不携带参数的路由也会被匹配（如上例中的 /shop）。

TypeScript

使用 TypeScript 时，您可以根据配置的路由片段为 params 添加类型。

export default function Page({ params }: { params: { slug: string } }) {
  return <h1>我的页面</h1>
}

须知：未来这可能会通过 TypeScript 插件自动完成。