Dynamic Modal Interception is Greedy
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Link to the code that reproduces this issue
https://github.com/khuezy/next-modal-bug
To Reproduce
- npm install
- npm run dev
- Go to localhost:3000/gallery
- Click on /gallery/dynamic
- See dynamic route modal interception
- Go back
- Click /gallery/static
- See that the static route is intercepted when it shouldn't
Current vs. Expected behavior
Modal Interception intercepts static routes as dynamic.
/app
/gallery
/[dynamic]
page.tsx
/static
page.tsx
/@modal
/[dynamic]
page.tsx
When linking to /gallery/static, the modal interceptor intercepts it as /gallery/[dynamic].
Without "@modal", the /gallery/static is processed before the /gallery/[dynamic] route. But with "@modal" interception, it is intercepting the /gallery/static path as [dynamic]
So with that, the expectation of "@modal" route interception is the same. "@modal" should not intercept static routes.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.0.0: Fri Sep 15 14:41:43 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T6000
Available memory (MB): 32768
Available CPU cores: 10
Binaries:
Node: 22.6.0
npm: 10.8.2
Yarn: N/A
pnpm: 9.7.0
Relevant Packages:
next: 15.0.0-canary.173 // Latest available version is detected (15.0.0-canary.173).
eslint-config-next: N/A
react: 18.3.1
react-dom: 18.3.1
typescript: 5.6.2
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Parallel & Intercepting Routes
Which stage(s) are affected? (Select all that apply)
next dev (local)
Additional context
No response
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
Run the linked reproduction with npm install and npm run dev, then inspect the app/gallery route tree, including page.tsx under [dynamic], static, and @modal/[dynamic]. Compare navigation to /gallery/dynamic and /gallery/static; done means dynamic routes still intercept while the static route is processed without interception.
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
- 35/100