How do I tell whether a Next.js route is static or dynamic and force one or the other?

The build output marks routes as static (prerendered at build) or dynamic (rendered per request, shown as ƒ).

What makes a route dynamic

Using request-time APIs: cookies(), headers(), searchParams, connection(), fetch with cache: "no-store", or export const dynamic = "force-dynamic".

Controlling it

// always render per request
export const dynamic = "force-dynamic";

// static HTML, regenerated at most every 5 minutes (ISR)
export const revalidate = 300;

// dynamic route params prerendered at build
export async function generateStaticParams() {
  const posts = await getAllSlugs();
  return posts.map((slug) => ({ slug }));
}
export const dynamicParams = true; // unknown params render on demand

Mixing static and dynamic

Wrap the dynamic part in <Suspense>. With Partial Prerendering (opt in, check availability for your Next version) the static shell is served instantly and the dynamic hole streams in.

export default function Page() {
  return (
    <>
      <StaticHeader />
      <Suspense fallback={<p>Loading cart...</p>}>
        <Cart />   {/* reads cookies() */}
      </Suspense>
    </>
  );
}

Debugging

• Run next build and read the route table.
• Add a log inside the page: if it prints only at build time, it is static.
• A build error "Dynamic server usage" means you used a dynamic API in a route you forced to be static.

Pitfall: a single cookies() call in a shared layout makes every page under it dynamic. Move per-user parts into leaf components behind Suspense.