Using a dynamic function (like headers() or cookies()) in a page that is being pre-rendered statically.
Interactive Simulation Engine
Static Generation Bailout
Dynamic execution in static context
Build Environment Idle
const h = headers()
Illegal in STATIC
The Bailout: Next.js tries to pre-render your site as static HTML. If it hits a dynamic function (like cookies or headers), the process fails unless you explicitly mark the page as dynamic.
Executable Code Workbench
page.tsx
Live Code Editor1// ❌ ERROR: headers() in static page
2import { headers } from 'next/headers'
3
4export default function Page() {
5 const h = headers()
6}
7
8// ✅ FIX: Mark as dynamic
9export const dynamic = 'force-dynamic'Mental Model
Declare 'export const dynamic = "force-dynamic"' or ensure the route is intentionally dynamic.
Why This Exists
To protect the integrity of the rendering lifecycle and ensure your application remains stable across different environments.
Critical Note
"Errors in Next.js aren't just bugs; they are often the framework enforcing strict architectural safety rules to prevent security leaks or performance regressions."