mediumFrontend

What makes a route dynamic in the Next.js App Router?

Q: What makes a route dynamic in the Next.js App Router?

**TL;DR.** Using **dynamic functions** — cookies() , headers() , draftMode() , or the searchParams prop — or fetching with **no cache** ( cache: 'no-store' , revalidate: 0 ) makes a route **dynamic** (rendered per request). Without those, Next.js **prerenders it statically** by default. cookies()/headers() searchParams fetch no-store <path class='d-edge-accent' d='M172 77 H240' marker-

950 views

Understand the problem

Dynamic functions and uncached data opt a route out of static rendering.

nextjsdynamic-renderingcookiesheaders

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Both ways to opt into dynamic

// Implicit: reading a dynamic function
import { headers } from 'next/headers';
const ua = (await headers()).get('user-agent');   // → dynamic

// Or uncached data:
await fetch('https://api/now', { cache: 'no-store' });  // → dynamic

// Explicit segment config:
export const dynamic = 'force-dynamic';
export const revalidate = 0;

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is the difference between getServerSideProps/getStaticProps and App Router data fetching?

What are dynamic routes and catch-all segments in Next.js?