Next.js & React · Developer Error Resolution Lab

Fix Next.js 'Dynamic server usage: Page couldn't be rendered statically'

Understand static vs dynamic rendering when accessing headers(), cookies(), or searchParams.

Fix Guide:

Triggered Error Message:

Error: Dynamic server usage: Page couldn't be rendered statically because it used `cookies` or `headers`

Customize Solution for Your Environment

Export Mode

// Add route segment config at the top of your page.tsx:
export const dynamic = "force-dynamic";
export const revalidate = 0; // Disable cache for fresh per-request data

// Or if reading searchParams in Next.js 15+:
export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  const params = await searchParams;
  return <div>Search: {params.q}</div>;
}

Root Cause & Mechanism Analysis

Why does this error occur?

A page intended for static generation (`output: export` or static generation phase) attempted to call dynamic runtime functions (`cookies()`, `headers()`, or unwrapped `searchParams`).