next.js icon indicating copy to clipboard operation
next.js copied to clipboard

Next16 Modal Interception is broken

Open khuezy opened this issue 1 month ago • 8 comments

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.

khuezy avatar Nov 19 '25 17:11 khuezy

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.

maltekuehl avatar Nov 20 '25 15:11 maltekuehl

I confirm. I cannot upgrade to Next.js 16 because of broken route interception.

Q0 avatar Nov 27 '25 12:11 Q0

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

rindev0901 avatar Nov 28 '25 02:11 rindev0901

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

remi-k-work avatar Dec 02 '25 17:12 remi-k-work

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.

maltekuehl avatar Dec 02 '25 18:12 maltekuehl

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

remi-k-work avatar Dec 02 '25 20:12 remi-k-work

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.

maltekuehl avatar Dec 02 '25 22:12 maltekuehl

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.

khuezy avatar Dec 09 '25 16:12 khuezy