export const dynamic

export const dynamic = 'auto'
// 'auto' | 'force-dynamic' | 'error' | 'force-static'

Next.js decides on its own whether a segment can be prerendered: it prerenders until something forces request-time work. dynamic takes that decision away from the compiler for one layout, page, or route file.

When to reach for it

• A route that must be fresh but has nothing in it that proves so. A page reading a feature-flag SDK or an in-process clock looks static to the compiler. 'force-dynamic' settles it.
• A guard rail on a page you never want to become dynamic. 'error' turns an accidental cookies() call in a shared component into a build failure instead of a silent, per-request page.
• A page whose components read request APIs you do not actually need. 'force-static' prerenders it anyway.

What trips people up

'force-static' does not error on cookies() or headers() — it makes them return empty values. An auth check written as if (!cookieStore.get('session')) redirect('/login') will behave as though nobody is ever signed in, and the wrong page gets baked into the build output.

'force-dynamic' also rewrites every fetch() in the segment to no-store, so a request you deliberately cached with force-cache stops being cached.

The whole option belongs to the pre-16 caching model. Turn on cacheComponents and it is gone; caching becomes per-function with 'use cache'.

export const dynamic = 'force-dynamic'

type Rate = { pair: string; value: number }

export default async function Page() {
  const res = await fetch('https://api.example.com/rates')
  const rates: Rate[] = await res.json()

  return (
    <ul>
      {rates.map((rate) => (
        <li key={rate.pair}>
          {rate.pair}: {rate.value}
        </li>
      ))}
    </ul>
  )
}

// app/(marketing)/pricing/page.tsx
export const dynamic = 'error'

import { getPlans } from '@/lib/plans'

export default async function PricingPage() {
  const plans = await getPlans()

  return (
    <section>
      {plans.map((plan) => (
        <article key={plan.id}>
          <h2>{plan.name}</h2>
          <p>{plan.priceLabel}</p>
        </article>
      ))}
    </section>
  )
}

// app/(public)/help/page.tsx
import { cookies } from 'next/headers'

export const dynamic = 'force-static'

export default async function HelpPage() {
  const cookieStore = await cookies()
  // Under force-static this is always undefined at build time.
  const theme = cookieStore.get('theme')?.value ?? 'light'

  return <main data-theme={theme}>Help centre</main>
}

// app/api/health/route.ts
export const dynamic = 'force-dynamic'

export async function GET() {
  const upstream = await fetch('https://api.example.com/health')

  return Response.json({
    ok: upstream.ok,
    status: upstream.status,
  })
}