动态路由段

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

约定

通过将文件夹名称用方括号包裹即可创建动态段：[folderName]。例如，博客可以包含以下路由 app/blog/[slug]/page.js，其中 [slug] 是博客文章的动态段。

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return <div>我的文章: {slug}</div>
}

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

通配段

通过在方括号内添加省略号 [...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 添加类型。

行为

• 由于 params 属性是一个 Promise，必须使用 async/await 或 React 的 use 函数来访问其值。
  • 在版本 14 及更早版本中，params 是一个同步属性。为了向后兼容，在 Next.js 15 中仍可以同步访问它，但此行为将在未来被弃用。

示例

使用 generateStaticParams

generateStaticParams 函数可用于在构建时静态生成路由，而不是在请求时按需生成。

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

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

在 generateStaticParams 函数内部使用 fetch 时，请求会自动去重。这避免了针对相同数据的多次网络调用（布局、页面和其他 generateStaticParams 函数），从而加快构建速度。