Skip to the solution
MediumFrontend5 min read

What is the route segment config in Next.js (dynamic, revalidate, runtime)?

1.2k views

The problem

Question presented to candidate: "What are the export const options you can put in a page, layout or route file, what do dynamic, revalidate and runtime do, and what changed in Next.js 16?"

What a strong answer should cover:

  • Segment config is a set of named exports in a page, layout or Route Handler that tune how that segment is rendered.
  • The classic set: dynamic, dynamicParams, revalidate, fetchCache, runtime, preferredRegion, maxDuration.
  • dynamic forces static or dynamic rendering ('force-dynamic', 'force-static', 'error'); revalidate sets the ISR lifetime.
  • In Next.js 16, with Cache Components enabled, dynamic, dynamicParams, revalidate and fetchCache are removed (the build rejects them); caching moves to 'use cache' and cacheLife.
  • runtime = 'edge' and preferredRegion are deprecated in 16; the default Node.js runtime is the recommendation. With Cache Components any runtime export must go, even 'nodejs', and 16.4 adds ensureStatic to require a page or layout to stay static.

Clarifying questions expected:

  • "Is Cache Components enabled in this project?" β€” it changes which exports are allowed.
  • "Is the goal caching, timing, or hosting?" β€” different options serve each.

Code / implementation expected: Yes β€” the common exports and their Next.js 16 replacements.

  • nextjs
  • segment-config
  • revalidate
  • runtime

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

The solution is hidden so you can try first

5 min read Β· 8 sections

Read the code

Common exports, and the Cache Components replacement
// Previous model (cacheComponents off)
export const revalidate = 600;            // ISR lifetime for this route
export const dynamic = "force-static";    // or "force-dynamic" / "error"
export const maxDuration = 30;            // platform limit for server work
// With cacheComponents (16.4+): export const ensureStatic = "navigation"; requires fully static output

// With cacheComponents: true, drop dynamic/revalidate and cache the data instead:
import { cacheLife } from "next/cache";
async function getCatalogue() {
  "use cache";
  cacheLife("minutes");
  return db.product.findMany();
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

Question 18 of 129 in Next.js

Keep your momentum going.

Mark this question solved to track your progress, then take the next one while it is fresh.

All Next.js questions
Up nextMedium

How do you handle forms with Server Actions in Next.js (progressive enhancement)?

Continue