Next.js Static Generation Issue with Layout Cookies and Dynamic Routes

[LoganBaek97]

Description

When a higher-level layout uses cookies and a nested dynamic route page ([locale]/test/[code]/page.tsx) with an empty generateStaticParams() is accessed, a DYNAMIC_SERVER_USAGE error occurs. Interestingly, accessing [locale]/page.tsx does not trigger this error.

Detailed Observations

Accessing cookies in the top-level layout (src/app/layout.tsx)
Scenario 1: Page with Empty generateStaticParams()

• Error: DYNAMIC_SERVER_USAGE
• Occurs when accessing src/app/[locale]/test/[code]/page.tsx

Scenario 2: Root Page

• No error
• Accessing src/[locale]/page.tsx works normally

Attempted Solutions

1. Returning a non-empty array in generateStaticParams()
2. Using export const dynamic = 'force-static' - Enables successful static build

Build Log Details

When running pnpm build -d, the build log shows:

• "Static generation failed due to dynamic usage on /en, reason: cookies", ...
• Applies to all static pages

Questions

• What causes the DYNAMIC_SERVER_USAGE error in nested dynamic routes?
• Why does force-static resolve the build issue?
• Why do build logs indicate dynamic usage due to cookies even after using force-static?

Verifications

• I've verified that the problem I'm experiencing isn't covered in the docs.
• I've searched for similar, existing issues on GitHub and Stack Overflow.
• I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://github.com/LoganBaek97/next-intl/tree/main/examples/example-app-router

Reproduction description

Steps to reproduce:

1. Open reproduction
2. Clone project
3. See src/app/[locale]/test/[code]/page.tsx, src/app/[locale].tsx and src/app/layout.tsx (using cookies)

Expected behaviour

• Successful static generation for all pages
• No dynamic usage warnings when using layout-level cookies

[amannn]

Hmm, for me it seems to work in your repro:

Strangely even if I move cookies() to app/[locale]/layout.tsx. Not sure if there's a bug here in Next.js.

If I remove generateStaticParams in app/[locale]/layout.tsx, then the result looks more like what I'd expect:

This is somewhat related: vercel/next.js#64616. I hope that rootParams brings some improvements here, at least the case of a static layout + dynamic child is covered in the tests in the PR.

[LoganBaek97]

@amannn
During the build log, the page appears to be generated statically. However, when running pnpm build -d (to view detailed build logs), an error message is displayed: "Static generation failed due to dynamic usage on /en (and other pages too) , reason: cookies". By rendering new Date().toISOString() on the pages where static generation failed, we can confirm that the static build is indeed unsuccessful (the time changes with each page refresh and is not fixed). I expected this might be a Next.js issue and hope it can be resolved quickly. Thank you.

[daveycodez]

Error occurred prerendering page "/en". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Route /[locale] with dynamic = "error" couldn't be rendered statically because it used headers. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering

Builds as static just fine until I try to use output: "export" which is, a requirement for Capacitor