动态路由

当您事先不知道确切的片段名称，并且想要从动态数据创建路由时，您可以使用在请求时填充或在构建时 预渲染 的动态片段。

约定

动态片段可以通过将文件夹名称括在方括号中来创建：[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
  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、布局和页面中使用相同参数的 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，除了 /shop/clothes、/shop/clothes/tops、/shop/clothes/tops/t-shirts 之外。

捕获所有片段和可选的捕获所有片段之间的区别在于，对于可选的捕获所有片段，不带参数的路由也会被匹配（在上面的示例中为 /shop）。

TypeScript

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

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  return <h1>My Page</h1>
}

须知：将来这可能会由 TypeScript 插件 自动完成。