Skip to content

Next.js build errorNext.js “DynamicServerError: Dynamic Server Usage”

next build stops with DynamicServerError and the words Dynamic Server Usage, usually on a page that reads cookies or headers. Next.js uses this error to switch a page to dynamic rendering, and it only breaks the build when the call escapes the context Next.js is tracking. Here are the two causes in Next.js’s words, or hand it over at a fixed price.

Short answer

A function like cookies() or headers() from next/headers ran outside the call stack Next.js bound it to: inside a setTimeout or setInterval, or after a promise you didn’t await. Call it outside the timer or callback, then pass the values in. Await every promise that calls it.

Why the build throws DynamicServerError, and the fix

  1. 01

    cookies() or headers() runs inside a timer

    “The function was called inside of a setTimeout or setInterval, causing the value to be read outside of the call stack that the context was bound to.” Next.js, DynamicServerError

    Code that reads cookies inside setTimeout or setInterval runs after the context has gone. Read the values first and pass them into the timer. This is Next.js’s corrected example.

    import { cookies } from 'next/headers'
    
    async function getCookieData() {
      const cookieStore = await cookies()
      const cookieData = cookieStore.getAll()
      return new Promise((resolve) =>
        setTimeout(() => {
          resolve(cookieData)
        }, 1000)
      )
    }
    
    export default async function Page() {
      const cookieData = await getCookieData()
      return <div>Hello World</div>
    }
  2. 02

    A promise that reads cookies isn’t awaited

    “Ensure that you await Promises that invoke a function that depends on async context, otherwise the function may be called after the async operation has completed.” Next.js, DynamicServerError

    If a helper that calls cookies() or headers() is started without await, it can run after the render it belongs to has finished. We also look for helpers like getSession() or getUser() called without await on server pages, and add it.

Checked against the vendor’s docs on : Next.js docs: DynamicServerError, Dynamic Server Usage; Next.js docs: Caching, route segment config.

Rather hand it over?

Fixed scope, fixed price, paid upfront. The work happens in writing; no call needed.

Related: Next.js useSearchParams Suspense error · Next.js hydration error

Questions

More on this error

The page should be dynamic anyway. Can I just mark it dynamic?

When a page reads cookies or headers on every request anyway, we also set export const dynamic = 'force-dynamic' on it. Next.js describes that option as forcing dynamic rendering, so the route is rendered for each user at request time. It doesn’t fix a call that escapes its context, so fix that first.

Can you fix it for me?

If one bug is the whole problem, the App Fix Ticket covers it: a written diagnosis first, then the fix. If the app has more going on, the Launch Check is a written check of the whole app. Each issue found is rated critical, high, medium or low, with where it is and how it was confirmed. No issues worth fixing, no charge. If the Launch Check finds nothing rated medium or higher, Simon refunds the full $450. You keep the report either way.

A different error?

Describe it and get a written quote

Send the error and what you were doing. You get a written scope, a fixed price and a timeline; we reply by email, usually within one business day.