跳到内容
API 参考文件约定路由段配置

路由段配置

如果 dynamicIO 标志开启,则此页面上概述的选项将被禁用,并最终在未来被弃用。

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

选项类型默认值
experimental_pprboolean
dynamic'auto' | 'force-dynamic' | 'error' | 'force-static''auto'
dynamicParamsbooleantrue
revalidatefalse | 0 | numberfalse
fetchCache'auto' | 'default-cache' | 'only-cache' | 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store''auto'
runtime'nodejs' | 'edge''nodejs'
preferredRegion'auto' | 'global' | 'home' | string | string[]'auto'
maxDurationnumber由部署平台设置

选项

experimental_ppr

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

layout.tsx | page.tsx
export const experimental_ppr = true
// true | false

dynamic

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

layout.tsx | page.tsx | route.ts
export const dynamic = 'auto'
// 'auto' | 'force-dynamic' | 'error' | 'force-static'

须知app 目录中的新模型倾向于在 fetch 请求级别进行细粒度的缓存控制,而不是 pages 目录中页面级别的 getServerSidePropsgetStaticProps 的二元全有或全无模型。 dynamic 选项是一种选择回到以前模型的方式,为了方便起见,并提供更简单的迁移路径。

  • 'auto' (默认):默认选项,尽可能多地缓存,而不会阻止任何组件选择动态行为。

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

    • 将布局或页面中每个 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':强制静态渲染并缓存布局或页面的数据,方法是强制 cookiesheaders()useSearchParams() 返回空值。

须知:

dynamicParams

控制当访问未使用 generateStaticParams 生成的动态段时会发生什么。

layout.tsx | page.tsx
export const dynamicParams = true // true | false,
  • true (默认):未包含在 generateStaticParams 中的动态段按需生成。
  • false:未包含在 generateStaticParams 中的动态段将返回 404 错误。

须知:

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

revalidate

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

layout.tsx | page.tsx | route.ts
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' 或使用正 revalidatefetch 请求保持不变。
  • number:(以秒为单位)将布局或页面的默认重新验证频率设置为 n 秒。

须知:

  • 重新验证值需要是静态可分析的。 例如,revalidate = 600 是有效的,但 revalidate = 60 * 10 是无效的。
  • 当使用 runtime = 'edge' 时,重新验证值不可用。
  • 在开发环境中,页面始终按需渲染,并且永远不会被缓存。 这使您可以立即看到更改,而无需等待重新验证周期过去。

重新验证频率

  • 单个路由的每个布局和页面中最低的 revalidate 将决定整个路由的重新验证频率。 这确保子页面与其父布局一样频繁地重新验证。
  • 单个 fetch 请求可以设置低于路由默认 revalidate 的较低 revalidate 值,以提高整个路由的重新验证频率。 这允许您根据某些标准动态选择更频繁的路由重新验证。

fetchCache

这是一个高级选项,仅当您特别需要覆盖默认行为时才应使用。

默认情况下,Next.js 将缓存 在任何 动态 API 使用之前可访问的任何 fetch() 请求,并且不会缓存 在动态 API 使用之后发现的 fetch 请求。

fetchCache 允许您覆盖布局或页面中所有 fetch 请求的默认 cache 选项。

layout.tsx | page.tsx | route.ts
export const fetchCache = 'auto'
// 'auto' | 'default-cache' | 'only-cache'
// 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'
  • 'auto' (默认):默认选项,用于缓存动态 API 之前的 fetch 请求,并使用它们提供的 cache 选项,并且不缓存动态 API 之后的 fetch 请求。
  • 'default-cache':允许将任何 cache 选项传递给 fetch,但如果未提供选项,则将 cache 选项设置为 'force-cache'。 这意味着即使在动态 API 之后的 fetch 请求也被认为是静态的。
  • 'only-cache':通过将默认值更改为 cache: 'force-cache'(如果未提供选项)并导致任何 fetch 请求使用 cache: 'no-store' 时出错,来确保所有 fetch 请求都选择缓存。
  • 'force-cache':通过将所有 fetch 请求的 cache 选项设置为 'force-cache',来确保所有 fetch 请求都选择缓存。
  • 'default-no-store':允许将任何 cache 选项传递给 fetch,但如果未提供选项,则将 cache 选项设置为 'no-store'。 这意味着即使在动态 API 之前的 fetch 请求也被认为是动态的。
  • 'only-no-store':通过将默认值更改为 cache: 'no-store'(如果未提供选项)并导致任何 fetch 请求使用 cache: 'force-cache' 时出错,来确保所有 fetch 请求都选择不缓存。
  • 'force-no-store':通过将所有 fetch 请求的 cache 选项设置为 'no-store',来确保所有 fetch 请求都选择不缓存。 这强制所有 fetch 请求在每次请求时重新获取,即使它们提供 'force-cache' 选项。

跨路由段行为

  • 单个路由的每个布局和页面上设置的任何选项都需要彼此兼容。
    • 如果同时提供了 'only-cache''force-cache',则 'force-cache' 获胜。 如果同时提供了 'only-no-store''force-no-store',则 'force-no-store' 获胜。 force 选项更改了整个路由的行为,因此具有 'force-*' 的单个段将阻止由 'only-*' 引起的任何错误。
    • 'only-*''force-*' 选项的目的是保证整个路由要么完全静态,要么完全动态。 这意味着
      • 不允许在单个路由中组合 'only-cache''only-no-store'
      • 不允许在单个路由中组合 'force-cache''force-no-store'
    • 如果子项提供 'auto''*-cache',则父项不能提供 'default-no-store',因为这可能会使相同的 fetch 具有不同的行为。
  • 通常建议将共享的父布局保留为 'auto',并在子段发散的地方自定义选项。

runtime

我们建议使用 Node.js 运行时来渲染您的应用程序,并使用 Edge 运行时来处理中间件(仅支持的选项)。

layout.tsx | page.tsx | route.ts
export const runtime = 'nodejs'
// 'nodejs' | 'edge'
  • 'nodejs' (默认)
  • 'edge'

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

preferredRegion

layout.tsx | page.tsx | route.ts
export const preferredRegion = 'auto'
// 'auto' | 'global' | 'home' | ['iad1', 'sfo1']

preferredRegion 和支持区域的支持取决于您的部署平台。

须知:

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

maxDuration

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

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

layout.tsx | page.tsx | route.ts
export const maxDuration = 5

须知:

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

generateStaticParams

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

有关更多详细信息,请参阅 API 参考

版本历史

版本
v15.0.0-RCexport const runtime = "experimental-edge" 已弃用。 codemod 可用。