nextjs config_error ai_generated true

Error: Route segment config is invalid

ID: nextjs/route-segment-config-invalid

Also available as: JSON · Markdown
92%Fix Rate
88%Confidence
45Evidence
2023-10-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
14 active — — —

Root Cause

A route segment config export (e.g., dynamic, revalidate, runtime, fetchCache, preferredRegion) in a page.tsx, layout.tsx, or route.tsx file uses an invalid value or unsupported option name. Next.js validates these config exports at build time and rejects unrecognized keys or invalid value types. Common causes include typos in config names, using App Router config in Pages Router files, or passing incorrect value types (e.g., a string where a number is expected for revalidate).

generic

Workarounds

  1. 93% success Use only valid named exports with correct value types for App Router route segment config 
    Ensure your page/layout file uses valid named exports:

// page.tsx (App Router)
export const dynamic = 'force-dynamic'; // 'auto' | 'force-dynamic' | 'error' | 'force-static'
export const revalidate = 3600; // false | 0 | number
export const runtime = 'nodejs'; // 'nodejs' | 'edge'
export const fetchCache = 'auto'; // 'auto' | 'default-cache' | 'only-cache' | 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'
export const preferredRegion = 'auto'; // 'auto' | 'global' | 'home' | string | string[]
export const maxDuration = 60; // number (seconds)

Remove any unrecognized exports and ensure types match (e.g., revalidate must be a number or false, not a string).

    Sources: https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config

  2. 90% success Move route segment config from client component to the nearest server component page or layout 
    If your config is in a client component, move it to the parent page.tsx or layout.tsx:

// app/dashboard/page.tsx (Server Component - no 'use client')
export const dynamic = 'force-dynamic';
export const revalidate = 0;

import DashboardClient from './dashboard-client';

export default async function DashboardPage() {
  const data = await fetchData();
  return <DashboardClient initialData={data} />;
}

// app/dashboard/dashboard-client.tsx
'use client';
// Client-side interactivity here, NO route segment config

    Sources: https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config

Dead Ends

Common approaches that don't work:

  1. Wrapping the route segment config in a regular JavaScript object instead of using named exports 85% fail

    Route segment config must be individual named exports (e.g., export const dynamic = 'force-dynamic'). Wrapping them in an object like export const config = { dynamic: 'force-dynamic' } is the Pages Router pattern and is silently ignored or causes validation errors in the App Router. The two systems are fundamentally incompatible.

  2. Adding route segment config to a client component file 90% fail

    Route segment config exports (dynamic, revalidate, runtime, etc.) are only valid in Server Components -- specifically in page.tsx, layout.tsx, route.tsx, and loading.tsx files. Adding them to a file with 'use client' directive causes the config to be ignored or triggers an invalid config error because client components cannot control server-side rendering behavior.

  3. Using getStaticProps/getServerSideProps config patterns from Pages Router in App Router 95% fail

    Pages Router data fetching functions (getStaticProps, getServerSideProps) and their config options do not exist in the App Router. Attempting to use export const getStaticProps or similar patterns results in unrecognized config errors. App Router uses completely different conventions: export const dynamic, export const revalidate, and fetch() options.

Error Chain

Leads to:
Preceded by:
Frequently confused with: