Route Segment Config in Next.js

Route Segment Config in Next.js

Tiger Abrodi's photo
Tiger Abrodi
·

3 min read

Table of contents

The Big Picture

  • These are settings you export from your pages or layouts

  • They are being replaced with more granular caching using dynamicIO

  • They represent the "old way" of configuring pages all at once

Code snippet

// Route Segment Configuration Options
// These configs control how your page/layout behaves
// NOTE: These will be deprecated in favor of dynamicIO in the future

export default function Page() {
  return <div>My Page</div>;
}

// Enable Partial Prerendering (experimental)
// Mix static & dynamic content in same route
export const experimental_ppr = true;

// Control if page is static or dynamic
export const dynamic = "auto"; // Options:
// 'auto' - default, caches what it can
// 'force-dynamic' - everything dynamic/real-time
// 'error' - forces everything static, errors if dynamic
// 'force-static' - forces static, empty cookies/headers

// Handle dynamic routes not in generateStaticParams
export const dynamicParams = true; // Options:
// true - generate dynamic pages on demand (default)
// false - return 404 for undefined routes

// Set revalidation time for the route
export const revalidate = 60; // Options:
// false - cache indefinitely (default)
// 0 - never cache
// number - seconds to cache

// Choose runtime environment
export const runtime = "nodejs"; // Options:
// 'nodejs' - default, full Node.js features
// 'edge' - lighter, faster, fewer features

// Pick deployment region
export const preferredRegion = "auto"; // Options:
// 'auto' - platform decides (default)
// 'global' - deploy globally
// 'home' - home region
// ['iad1', 'sfo1'] - specific regions

// Set execution time limit
export const maxDuration = 5; // In seconds

Key Options

experimental_ppr (boolean)

  • WHAT: Enables Partial Prerendering for a route

  • USE WHEN: You want to mix static and dynamic content

  • AVOID WHEN: You're in production and worried it'll break things

dynamic ('auto' | 'force-dynamic' | 'error' | 'force-static')

  • WHAT: Controls if page is static or dynamic

  • USE WHEN:

    • 'force-dynamic': Need real-time data for entire page

    • 'error': Must ensure everything is static

    • 'force-static': Need to force empty cookies/headers

  • AVOID WHEN:

    • You can use granular fetch caching instead

    • Only parts of your page need to be dynamic (use PPR instead)

dynamicParams (boolean)

  • WHAT: Controls behavior for dynamic routes not in generateStaticParams

  • USE WHEN: You want to generate dynamic pages on demand (true)

  • AVOID WHEN: You want 404s for undefined routes (false)

revalidate (false | 0 | number)

  • WHAT: Sets default revalidation time

  • USE WHEN:

    • Need consistent revalidation across page

    • Want to override fetch cache settings

  • AVOID WHEN:

    • Using Edge runtime

    • Different parts need different revalidation times

runtime ('nodejs' | 'edge')

  • WHAT: Picks runtime environment

  • USE WHEN: Need edge capabilities

  • AVOID WHEN: Using Node.js specific features (stick to default)

preferredRegion

  • WHAT: Controls deployment region

  • USE WHEN: Need specific regional deployment

  • AVOID WHEN: Global deployment is fine (use 'auto')

maxDuration

  • WHAT: Sets execution time limits

  • USE WHEN: Need to control server-side execution time

  • AVOID WHEN: Standard timeouts are sufficient

Important Note

These configs are part of the "old model" where you configure entire pages.

The future is moving toward:

  • Dynamic IO for better performance

  • More granular control with fetch-level caching

  • Partial Prerendering for mixing static/dynamic content

Next.js