Dev-only error with await params in root layout plus parallel routes under dynamic params
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Next.js with cacheComponents enabled breaks on dev environment when using await params on the root layout and we use parallel routes inside a route with dynamic parameters.
This issue happens on next dev only. It doesn't show up on next build or next start.
Link to the code that reproduces this issue
https://github.com/ceolinwill/nextjs-cache-root-parallel
To Reproduce
- Create a root layout under a dynamic segment (eg. locale):
app/[locale]/layout.tsx - Inside that layout, use
await paramsto get the locale - Create a parallel route inside a dynamic segment (eg.
app/[locale]/@navbarActions/posts/[id]) - Run
next devand navigate to a page that uses the parallel route (you need to refresh the page manually, it won't break on client-side navigation): http://localhost:3000/en/posts/1
Current vs. Expected behavior
The page should load without errors or it should be consistent between next dev and next build.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 25.2.0: Tue Nov 18 21:08:48 PST 2025; root:xnu-12377.61.12~1/RELEASE_ARM64_T8132
Available memory (MB): 16384
Available CPU cores: 10
Binaries:
Node: 22.21.1
npm: 10.9.4
Yarn: N/A
pnpm: 10.23.0
Relevant Packages:
next: 16.1.1 // Latest available version is detected (16.1.1).
eslint-config-next: N/A
react: 19.2.3
react-dom: 19.2.3
typescript: 5.9.3
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
cacheComponents, Parallel & Intercepting Routes
Which stage(s) are affected? (Select all that apply)
next dev (local)
Additional context
Adding a root layout with Suspense before the dynamic [locale] segment fixes the issue.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the reproduction repository and inspect app/[locale]/layout.tsx alongside app/[locale]/@navbarActions/posts/[id]. Run next dev, refresh /en/posts/1, and compare the failure with next build and next start. Done means the page loads without the dev-only error, or dev behavior is consistent with the production build.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100