How to Fix "DynamicServerError: Dynamic server usage: headers at staticGenerationBailout" in Next.js's app directory

A terminal showing the error "DynamicServerError: Dynamic server usage: headers at staticGenerationBailout"

Yesterday, I upgraded my Next.js project from version 13.4.8 to version 13.4.11, and the process went smoothly. Everything seemed to work fine in development mode after updating the dependencies. However, during the build process, bam! An error smacked me in the face. Here's what went down:

DynamicServerError: Dynamic server usage: headers
    at staticGenerationBailout (/Users/raphael/code/billiv/billiv-frontend/apps/webapp/.next/server/chunks/8211.js:13228:21)
    at headers (/Users/raphael/code/billiv/billiv-frontend/apps/webapp/.next/server/chunks/8211.js:13048:62)
    at getWhiteLabelConfig (/Users/raphael/code/billiv/billiv-frontend/apps/webapp/.next/server/chunks/3237.js:945:71)
    at Module.generateMetadata (/Users/raphael/code/billiv/billiv-frontend/apps/webapp/.next/server/chunks/3237.js:649:73)
    at /Users/raphael/code/billiv/billiv-frontend/node_modules/next/dist/lib/metadata/resolve-metadata.js:195:24
    at /Users/raphael/code/billiv/billiv-frontend/node_modules/next/dist/server/lib/trace/tracer.js:117:36
    at NoopContextManager.with (/Users/raphael/code/billiv/billiv-frontend/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7057)
    at ContextAPI.with (/Users/raphael/code/billiv/billiv-frontend/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:516)
    at NoopTracer.startActiveSpan (/Users/raphael/code/billiv/billiv-frontend/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18086)
    at ProxyTracer.startActiveSpan (/Users/raphael/code/billiv/billiv-frontend/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18847) {
  digest: 'DYNAMIC_SERVER_USAGE'
}

Understanding the Issue

Wow wow wow! What happened here? My code, which was working fine before, is now broken. I didn't change anything in my code. I just upgraded Next.js. What's going on?

I realised that a call to the headers() function in my root layout's generateMetadata() function was the source of the problem. This call, when used in a statically generated page, caused the error to occur.

// app/layout.tsx
import { headers } from 'next/headers';
 
export async function generateMetadata() {
  const host = headers().get('host');
  return {
    title: `My poor host is not available :(`,
    description: `I'd like to access ${host} but I simply can't...`,
  };
}

The cookies() Function Issue

Additionally, it's worth noting that the issue also occurs when trying to use the cookies() function from 'next/headers' in a statically generated page. The cookies() function allows you to access cookies, but when used in the context of static generation, it triggers the same error: "DynamicServerError: Dynamic server usage: headers at staticGenerationBailout"

The Solution

To solve this, I simply added a flag to the file to tell next.js to never statically generate the layout:

  // app/layout.tsx
  import { headers } from 'next/headers';
 
+ export const dynamic = "force-dynamic";
 
  export async function generateMetadata() {
    const host = headers().get("host");
    return {
      title: `My poor host is not available :(`,
      description: `I'd like to access ${host} but I simply can't...`,
    };
  }

Conclusion

By adding the force-dynamic flag to the layout file, I was able to bypass the error and successfully build my Next.js project. If you encounter a similar issue, this solution may work for you as well.

I hope this article helps you resolve the "DynamicServerError: Dynamic server usage: headers at staticGenerationBailout" issue in your Next.js projects!