Next.js DynamicServerError during the Vercel build

What it means in plain English

Next.js threw DynamicServerError because cookies() or headers() from next/headers ran outside the async context that started the render. The dynamic-server-error page says this happens when you call them inside setTimeout or setInterval, or after a promise you did not await. While it generates static pages, Next.js throws that error and catches it to opt the page into dynamic rendering. If the error is uncaught, the build fails.

A second message, the app/ Static to Dynamic Error, is different. The route was generated statically, then at runtime it read cookies or headers on a fallback or during revalidation. Next.js says it does not support switching between static and dynamic at runtime. The docs do not use the phrase "couldn't be rendered statically" for either error.

Awaiting cookies() and params in a Server Component is the related page params and cookies must be awaited.

Likely causes

• cookies() or headers() is inside setTimeout, setInterval, or an event-style callback.
• A promise that calls those functions was not awaited, so they run after the original context is gone.
• The page is forced static and still reads request data, or it is static at build and dynamic on a later request.

How to fix it, step by step

1. Call cookies() or headers() directly in the Server Component or the function that is still on that call stack, and await the promise. Next.js's correct example reads the cookie store first, then starts the setTimeout with the value it already has.
2. Do not read cookies inside the timer callback. That callback is a new execution context.
3. If the build instead reports the app/ Static to Dynamic Error, stop using cookies or headers only on some requests if the other requests are static. Next.js says the mode has to be the same at build and at runtime.
4. Or set the route on purpose. export const dynamic = 'force-static' keeps it static. export const dynamic = 'force-dynamic' skips static generation. Use the one that matches whether the page needs the request.
5. Redeploy on Vercel after the route is consistent. The build is what failed, so a runtime env change does not clear it.

How to check it worked

• npm run build finishes without DynamicServerError and without the static-to-dynamic error.
• A page that reads the session is dynamic on every request, or a page that does not need the request is static on every request.
• The deployed URL returns the page instead of the build log.

Sources

• https://nextjs.org/docs/messages/dynamic-server-error (opens in a new tab)
• https://nextjs.org/docs/messages/app-static-to-dynamic-error (opens in a new tab)