Error: Dynamic server usage: Route /page couldn't be rendered statically

You’re using dynamic features (cookies, headers, searchParams) in a route that Next.js is trying to statically generate.

Why this happens

Next.js App Router tries to statically render pages at build time by default. When your page accesses request-time data like cookies(), headers(), or searchParams, Next.js can’t pre-render it because those values aren’t known at build time. The framework throws this error to tell you the page needs to be dynamic.

Fix 1: Mark the route as dynamic

// Add this to your page
export const dynamic = 'force-dynamic';

Fix 2: Use generateStaticParams for dynamic routes

export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map(post => ({ slug: post.slug }));
}

Fix 3: Wrap dynamic parts in Suspense

import { Suspense } from 'react';

export default function Page() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <DynamicContent />
    </Suspense>
  );
}

Alternative solutions

Move dynamic logic to a client component — if you only need searchParams for UI state, use useSearchParams() in a client component instead:

'use client';
import { useSearchParams } from 'next/navigation';

Use unstable_noStore() from next/cache to opt out of caching for specific data fetches without making the entire route dynamic.

Prevention

• Decide early whether a page is static or dynamic — avoid mixing static layout with dynamic data access.
• Use next build locally to catch static generation errors before deploying.

Related: Next.js: Server Component Client Error fix · Next.js: 404 Page Not Found fix