Route Segment Config Options

The Route Segment Config Options allows you configure the behavior of a Page, Layout, or Route Handler by directly exporting the following variables:

export const dynamic = 'auto'
export const dynamicParams = true
export const revalidate = false
export const fetchCache = 'auto'
export const runtime = 'nodejs'
export const preferredRegion = 'auto'
export function generateStaticParams(...)

Good to know:

• The values of the config options need be statically analyzable. For example revalidate = 600 is valid, but revalidate = 60 * 10 is not.

dynamic

Change the dynamic behavior of a layout or page to fully static or fully dynamic.

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

Migration Note: The new model in the app directory favors granular caching control at the fetch request level over the binary all-or-nothing model of getServerSideProps and getStaticProps at the page-level in the pages directory. The dynamic option is a way to opt back in to the previous model as a convenience and provides a simpler migration path.

• 'auto' (default): The default option to cache as much as possible without preventing any components from opting into dynamic behavior.

• 'force-dynamic': Force dynamic rendering and dynamic data fetching of a layout or page by disabling all caching of fetch requests and always revalidating. This option is equivalent to:

  • getServerSideProps() in the pages directory.
  • Setting the option of every fetch() request in a layout or page to { cache: 'no-store', next: { revalidate: 0 } }.
  • Setting the segment config to export const fetchCache = 'force-no-store'

• 'error': Force static rendering and static data fetching of a layout or page by causing an error if any components use dynamic functions or dynamic fetches. This option is equivalent to:

  • getStaticProps() in the pages directory.
  • Setting the option of every fetch() request in a layout or page to { cache: 'force-cache' }.
  • Setting the segment config to fetchCache = 'only-cache', dynamicParams = false.
  • Note: dynamic = 'error' changes the default of dynamicParams from true to false. You can opt back into dynamically rendering pages for dynamic params not generated by generateStaticParams by manually setting dynamicParams = true.

• 'force-static': Force static rendering and static data fetching of a layout or page by forcing cookies(), headers() and useSearchParams() to return empty values.

Good to know:

• Instructions on how to migrate from getServerSideProps and getStaticProps to dynamic: 'force-dynamic' and dynamic: 'error' can be found in the upgrade guide.

dynamicParams

Control what happens when a dynamic segment is visited that was not generated with generateStaticParams.

export const dynamicParams = true // true | false,

• true (default): Dynamic segments not included in generateStaticParams are generated on demand.
• false: Dynamic segments not included in generateStaticParams will return a 404.

Good to know:

• This option replaces the fallback: true | false | blocking option of getStaticPaths in the pages directory.
• When dynamicParams = true, the segment uses Streaming Server Rendering.
• If the dynamic = 'error' and dynamic = 'force-static' are used, it'll change the default of dynamicParams to false.

revalidate

Set the default revalidation time for a layout or page. This option does not override the revalidate value set by individual fetch requests.

export const revalidate = false
// false | 'force-cache' | 0 | number

• false: (default) The default heuristic to cache any fetch requests that set their cache option to 'force-cache' or are discovered before a dynamic function is used. Semantically equivalent to revalidate: Infinity which effectively means the resource should be cached indefinitely. It is still possible for individual fetch requests to use cache: 'no-store' or revalidate: 0 to avoid being cached and make the route dynamically rendered. Or set revalidate to a positive number lower than the route default to increase the revalidation frequency of a route.
• 0: Ensure a layout or page is always dynamically rendered even if no dynamic functions or dynamic data fetches are discovered. This option changes the default of fetch requests that do not set a cache option to 'no-store' but leaves fetch requests that opt into 'force-cache' or use a positive revalidate as is.
• number: (in seconds) Set the default revalidation frequency of a layout or page to n seconds.

Revalidation Frequency

• The lowest revalidate across each layout and page of a single route will determine the revalidation frequency of the entire route. This ensures that child pages are revalidated as frequently as their parent layouts.
• Individual fetch requests can set a lower revalidate than the route's default revalidate to increase the revalidation frequency of the entire route. This allows you to dynamically opt-in to more frequent revalidation for certain routes based on some criteria.

fetchCache

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

runtime

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

• nodejs (default)
• experimental-edge

preferredRegion

export const preferredRegion = 'auto'
// 'auto' | 'home' | 'edge' | 'string'

• auto (default) - Either the specified home region on your platform or the Edge if no waterfall requests are detected.
• home: The specified home region on your platform.
• edge: The Edge Network, if one is available on your platform.

Good to know:

• If a preferredRegion is not specified, it'll inherit the option of the nearest parent layout.
• The root layout defaults to auto.

generateStaticParams

The generateStaticParams function can be used in combination with dynamic route segments to define the list of route segment parameters that will be statically generated at build time instead of on-demand at request time.

See the API reference for more details.