路由段配置

如果启用了 dynamicIO 标志，本页面列出的这些选项将被禁用，并且在将来最终会被弃用。

路由段选项允许你通过直接导出以下变量来配置页面、布局或路由处理程序的行为：

选项

experimental_ppr

为布局或页面启用局部预渲染 (PPR)。

export const experimental_ppr = true
// true | false

dynamic

更改布局或页面的动态行为为完全静态或完全动态。

export const dynamic = 'auto'
// 'auto' | 'force-dynamic' | 'error' | 'force-static'

export const dynamic = 'auto'
// 'auto' | 'force-dynamic' | 'error' | 'force-static'

值得注意的是：app 目录中的新模型倾向于在 fetch 请求级别进行精细的缓存控制，而不是 pages 目录中页面级别的 getServerSideProps 和 getStaticProps 的二元全有或全无模型。dynamic 选项是一种选择回归到之前模型的方式，提供了更简便的迁移路径。

• 'auto' (默认值)：默认选项是尽可能多地进行缓存，同时不阻止任何组件选择动态行为。

• 'force-dynamic'：强制动态渲染，这将导致路由在请求时为每个用户进行渲染。此选项等同于：

  • pages 目录中的 getServerSideProps()。
  • 将布局或页面中每个 fetch() 请求的选项设置为 { cache: 'no-store', next: { revalidate: 0 } }。
  • 将段配置设置为 export const fetchCache = 'force-no-store'

• 'error'：强制静态渲染并缓存布局或页面的数据，如果任何组件使用动态 API或未缓存的数据则会导致错误。此选项等同于：

  • pages 目录中的 getStaticProps()。
  • 将布局或页面中每个 fetch() 请求的选项设置为 { cache: 'force-cache' }。
  • 将段配置设置为 fetchCache = 'only-cache', dynamicParams = false。
  • dynamic = 'error' 将 dynamicParams 的默认值从 true 更改为 false。你可以通过手动设置 dynamicParams = true 来选择为未由 generateStaticParams 生成的动态参数动态渲染页面。

• 'force-static'：通过强制 cookies、headers() 和 useSearchParams() 返回空值来强制静态渲染并缓存布局或页面的数据。

值得注意的是：

• 关于如何从 getServerSideProps 和 getStaticProps 迁移到 dynamic: 'force-dynamic' 和 dynamic: 'error' 的说明可以在升级指南中找到。

dynamicParams

控制访问未通过 generateStaticParams 生成的动态段时的行为。

export const dynamicParams = true // true | false,

export const dynamicParams = true // true | false,

• true (默认值)：未包含在 generateStaticParams 中的动态段将按需生成。
• false：未包含在 generateStaticParams 中的动态段将返回 404。

值得注意的是：

• 此选项替代了 pages 目录中 getStaticPaths 的 fallback: true | false | blocking 选项。
• 要在首次访问时静态渲染所有路径，你需要在 generateStaticParams 中返回一个空数组或使用 export const dynamic = 'force-static'。
• 当 dynamicParams = true 时，该段使用流式服务器渲染。
• 如果使用 dynamic = 'error' 和 dynamic = 'force-static'，它将把 dynamicParams 的默认值更改为 false。

revalidate

为布局或页面设置默认重新验证时间。此选项不会覆盖单个 fetch 请求设置的 revalidate 值。

export const revalidate = false
// false | 0 | number

export const revalidate = false
// false | 0 | number

• false (默认值)：默认启发式方法是缓存将 cache 选项设置为 'force-cache' 的任何 fetch 请求，或在使用动态 API之前发现的请求。在语义上等同于 revalidate: Infinity，这实际上意味着资源应该被无限期缓存。单个 fetch 请求仍可以使用 cache: 'no-store' 或 revalidate: 0 来避免被缓存并使路由动态渲染。或者设置一个低于路由默认值的正数 revalidate 值来增加路由的重新验证频率。
• 0：确保布局或页面始终动态渲染，即使没有发现动态 API 或未缓存的数据获取。此选项将未设置 cache 选项的 fetch 请求的默认值更改为 'no-store'，但保持选择使用 'force-cache' 或使用正数 revalidate 的 fetch 请求不变。
• number：(以秒为单位) 将布局或页面的默认重新验证频率设置为 n 秒。

值得注意的是：

• revalidate 值需要是静态可分析的。例如 revalidate = 600 是有效的，但 revalidate = 60 * 10 不是。
• 使用 runtime = 'edge' 时，revalidate 值不可用。
• 在开发环境中，页面总是按需渲染，从不缓存。这允许你立即看到更改，而无需等待重新验证期限过去。

重新验证频率

• 单个路由中每个布局和页面的最低 revalidate 值将决定整个路由的重新验证频率。这确保子页面与其父布局的重新验证频率相同。
• 单个 fetch 请求可以设置低于路由默认 revalidate 的值来增加整个路由的重新验证频率。这允许你根据某些条件动态选择某些路由的更频繁重新验证。

fetchCache

export const fetchCache = 'auto'
// 'auto' | 'default-cache' | 'only-cache'
// 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'

export const fetchCache = 'auto'
// 'auto' | 'default-cache' | 'only-cache'
// 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'

runtime

我们建议使用 Node.js 运行时来渲染你的应用，而 Edge 运行时用于中间件（仅支持的选项）。

export const runtime = 'nodejs'
// 'nodejs' | 'edge'

export const runtime = 'nodejs'
// 'nodejs' | 'edge'

• 'nodejs' (默认值)
• 'edge'

了解更多关于不同运行时的信息。

preferredRegion

export const preferredRegion = 'auto'
// 'auto' | 'global' | 'home' | ['iad1', 'sfo1']

export const preferredRegion = 'auto'
// 'auto' | 'global' | 'home' | ['iad1', 'sfo1']

preferredRegion 的支持以及支持的区域取决于你的部署平台。

值得注意的是：

• 如果未指定 preferredRegion，它将继承最近的父布局的选项。
• 根布局默认为所有区域。

maxDuration

默认情况下，Next.js 不限制服务器端逻辑的执行（渲染页面或处理 API）。 部署平台可以使用 Next.js 构建输出中的 maxDuration 来添加特定的执行限制。 例如，在 Vercel 上。

注意：此设置需要 Next.js 13.4.10 或更高版本。

export const maxDuration = 5

export const maxDuration = 5

值得注意的是：

• 如果使用服务器操作，在页面级别设置 maxDuration 可以更改页面上使用的所有服务器操作的默认超时时间。

generateStaticParams

generateStaticParams 函数可以与动态路由段结合使用，以定义在构建时而不是在请求时按需生成的路由段参数列表。

查看 API 参考获取更多详细信息。

版本历史