Teachnique
      CourseRoadmaps
      Login

      Introduction

      Project SetupCLI

      IntroductionAPP RouterTemplateLoading UIError Handling404 Page

      Linking and Navigating

      Dynamic RoutesRoute groupsParallel RoutesIntercepting Routes

      Route handlersCacheCommon Questions

      Middleware

      CSRSSR & SSGISR

      React Server ComponentsServer-Side Rendering

      SuspenseStreaming

      Server & Client ComponentServer vs. Client ComponentBest Practices

      Server-Side Rendering Strategies

      Data Fetching & Caching & RedirectThird-Party Request Libraries on the Server SideBest Practices

      Request MemoizationData CacheFull Route CacheRouter Cache

      Server Actions IFormServer Actions IIOptimistic Update

      Tailwind CSSCSS-in-JSSass

      Environment VariablesAbsolute Imports& Module Path AliasesRoute Segment Config

      Image & LCPImage IImage IIOptimizing IOptimizing II

      Next FontFont ParameterApply Styles

      Feedback

      Submit request if you have any questions.

      Course
      Route Segment Config

      Next.js Mastery: From Fundamentals to Full-Stack

      Unlock the power of Next.js with this comprehensive course! Starting with the basics, you’ll learn essential skills such as routing, data fetching, and styling. Progress through practical projects, including building your own React Notes app, to gain hands-on experience. Dive into the source code to understand the inner workings and core principles of Next.js. Perfect for developers with a basic knowledge of React and Node.js, this course ensures you’ll be ready to create high-performance full-stack applications efficiently. Join us and master Next.js, backed by industry experts and a supportive learning community.

      Introduction

      In previous articles, we frequently mentioned route segment configurations. Route segment configurations allow you to define the behavior of pages, layouts, and route handlers in Next.js. This article will provide a detailed explanation of these configuration options.

      Segment

      
      If you've read through the Next.js documentation, you might have encountered the term "Segment." Let's clarify what this means:
      • URL Segment refers to a portion of the URL path separated by slashes. The URL path is the part of the URL that follows the domain name, and it is composed of URL segments.
      
      • Router Segment refers to each folder in the routing structure, where each folder corresponds to a URL segment.
      
      For example, the path /dashboard/settings is composed of three segments:
      1. Root Segment: /
      2. Segment: dashboard
      3. Leaf Segment: settings (Leaf segments are segments without child routes.)
      

      Route Segment Configurations

      
      Now, let's delve into the core topic of this chapter—route segment configurations. These configurations can define the behavior of pages, layouts, and route handlers. For instance, when using fetch, you can configure the revalidate option for a specific request. With route segment configurations, you can apply this revalidate setting to all fetch requests within that route.
      The usage of route segment configurations is straightforward—just export a specific variable name, such as:
      // layout.js | page.js | route.js
      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 const maxDuration = 5;
      
      export default function MyComponent() {}
      

      Configuration Options

      Here are the configuration variables and their possible values:
      Variable Name
      Type
      Default Value
      dynamic
      'auto' | 'force-dynamic' | 'error' | 'force-static'
      'auto'
      dynamicParams
      boolean
      true
      revalidate
      false | 'force-cache' | 0 | number
      false
      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'
      maxDuration
      number
      Platform dependent
      Note: The configuration values are statically analyzed, meaning that setting revalidate = 600 is valid, but revalidate = 60 * 10 is not.
      
      Let's go through each of these options.
      

      dynamic

      This option changes the dynamic behavior of layouts or pages. Usage example:
      // layout.js | page.js | route.js
      export const dynamic = 'auto';
      // 'auto' | 'force-dynamic' | 'error' | 'force-static'
      To understand the dynamic parameter, let's review some basic concepts:
      • Static Rendering: Pages are rendered at build time or during revalidation and cached. Suitable for content that doesn't change frequently, like blog posts or product pages.
      • Dynamic Rendering: Pages are rendered on each request, suitable for personalized content or data-dependent on request parameters like cookies or URL parameters.
      dynamic affects both the rendering mode and the data caching strategy. Here's what the different values mean:
      • 'auto' (default): Automatically determines the rendering mode.
      • 'force-dynamic': Forces dynamic rendering and disables all fetch request caching.
      • 'error': Forces static rendering and caching. If a component uses dynamic functions or uncached data requests, it will throw an error.
      • 'force-static': Forces static rendering and caching, and forces functions like cookies(), headers(), useSearchParams() to return empty values.
      

      dynamicParams

      This controls what happens when you access a dynamic route segment that was not generated by generateStaticParams.
      // layout.jsx | page.jsx
      export const dynamicParams = true; // true | false
      • true (default): Generates as needed.
      • false: Returns a 404 error.
      This corresponds to the fallback: true \| false \| blocking option in the Page Router's getStaticPaths.
      

      revalidate

      Sets the default revalidation time for layouts or pages. This setting does not override the revalidate value set for individual fetch requests.
      // layout.jsx | page.jsx | route.js
      export const revalidate = false;
      // false | 'force-cache' | 0 | number
      • false (default): Semantically equivalent to revalidate: Infinity, meaning the resource is cached indefinitely.
      • 0: The page or layout is always dynamically rendered, even if no dynamic functions or uncached data requests are used.
      • number: Sets the revalidation frequency in seconds.
      

      fetchCache

      This is an advanced option and should only be used if you need to override the default behavior. It allows you to override the default cache option for all fetch requests in a layout or page.
      // layout.jsx | page.jsx | route.js
      export const fetchCache = 'auto';
      // 'auto' | 'default-cache' | 'only-cache'
      // 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'
      The fetchCache options provide granular control over how fetch requests are handled. For example, force-cache forces all requests to be cached, while force-no-store disables caching entirely.
      

      runtime

      Sets the runtime environment:
      // layout.jsx | page.jsx | route.js
      export const runtime = 'nodejs';
      // 'edge' | 'nodejs'
      • nodejs (default)
      • edge
      

      preferredRegion

      Used with Vercel Serverless Functions, this option allows you to specify the preferred region where Edge Functions should be executed. This can help reduce latency by keeping the functions closer to your data source.
      // layout.jsx | page.jsx | route.js
      export const preferredRegion = 'auto';
      // 'auto' | 'global' | 'home' | ['iad1', 'sfo1']
      

      maxDuration

      Also used with Vercel Serverless Functions, this option configures the maximum duration that the function can run before timing out.
      export const maxDuration = 5;
      

      generateStaticParams

      Used with dynamic routes to define the parameters for static generation. For more details, refer to the Next.js documentation.

      References

      
      • Next.js Route Segment Configuration
      • Vercel Serverless Functions
      This overview provides a detailed explanation of route segment configurations in Next.js, helping you better control how your pages and layouts are rendered, cached, and managed.