Next16 Modal Interception is broken
Link to the code that reproduces this issue
https://github.com/khuezy/next16-interceptionbug
To Reproduce
The reproduction steps are in the Github repo
Current vs. Expected behavior
Current: Modal interceptions fails during dev mode after editing the modal files. Expected: Modal interception works during development.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.6.0: Mon Jul 14 11:30:29 PDT 2025; root:xnu-11417.140.69~1/RELEASE_ARM64_T6000
Available memory (MB): 32768
Available CPU cores: 10
Binaries:
Node: 24.11.0
npm: 11.6.1
Yarn: N/A
pnpm: 10.22.0
Relevant Packages:
next: 16.0.3 // Latest available version is detected (16.0.3).
eslint-config-next: N/A
react: 19.2.0
react-dom: 19.2.0
typescript: 5.9.3
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Turbopack
Which stage(s) are affected? (Select all that apply)
next dev (local)
Additional context
Looks like it also breaks via --webpack so it's not a turbopack issue.
Modal setup that worked with Next.js 15 also broke for me with Next.js 16, even though I was already using Turbopack before. Namely, the relative path resolution of the parallel routes seems to be broken. If use (...) or even (.), no modal is triggered and I just get a standard redirect. If I remove it and just use the path inside @modal, the modal is triggered but that prevents navigation to the default page, as this now triggers the modal. So either way, it is broken.
I confirm. I cannot upgrade to Next.js 16 because of broken route interception.
Hey i also encounter the same phenomenon and one more problem is when i create more route for example /calandar/create for calandar it will also be intercepted by modal i don't know if this is its correct behavior or not? For me it is unexpected because that is the page i use to add new create form
Hey,
Check out the similar issue I had below and how I was able to solve it; perhaps it might help you as well? https://github.com/vercel/next.js/issues/86444
Hey,
Check out the similar issue I had below and how I was able to solve it; perhaps it might help you as well? #86444
For me at least, this is unrelated. I am not using cache components and have default.tsx files at all levels. So this issue should remain open and this seems to be a broader problem with Next.js 16.
I was able to resolve the issue, please let me know if that works for you: https://github.com/remi-k-work/next16-interceptionbug-my-changes
I finally figured out that the problem is trailingSlash: true in the Next.js config for me. This used to work with Next.js 15 but is now broken with Next.js 16. Repo here: https://github.com/maltekuehl/next16-interceptionbug
Unsure whether to file an additional bug report, since the original post here does seem solved with @remi-k-work's solution.
I was able to resolve the issue, please let me know if that works for you: https://github.com/remi-k-work/next16-interceptionbug-my-changes
Thanks for the suggestion, but I still think it's a bug in next16. Restructuring the project resolves the issue but that messes w/ our folder organization.