动态路由

当你无法提前知道确切的路由段名称，并且想要从动态数据创建路由时，你可以使用动态段。动态段可以在请求时填充或在构建时预渲染。

约定

通过将文件夹名称用方括号括起来可以创建动态段：[folderName]。例如，[id] 或 [slug]。

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

示例

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

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const slug = (await params).slug
  return <div>My Post: {slug}</div>
}

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

值得注意的是

• 由于 params 属性是一个 promise，你必须使用 async/await 或 React 的 use 函数来访问其值。
  • 在版本 14 及更早版本中，params 是一个同步属性。为了向后兼容，在 Next.js 15 中你仍然可以同步访问它，但这个行为将在未来被废弃。
• 动态段等同于 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、Layout 和 Page 中使用相同参数的 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 async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  return <h1>My Page</h1>
}

值得注意的是：将来 TypeScript 插件 可能会自动完成这项工作。