vercel / vercel/next.js

Dev-only error with await params in root layout plus parallel routes under dynamic params

Open
#87,726 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Cache Components Parallel & Intercepting Routes
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
  1. Create a root layout under a dynamic segment (eg. locale): app/[locale]/layout.tsx
  2. Inside that layout, use await params to get the locale
  3. Create a parallel route inside a dynamic segment (eg. app/[locale]/@navbarActions/posts/[id])
  4. Run next dev and 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.