search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.95k stars 26.87k forks source link

Catch-all Segments are mistakenly being triggered when it follows a Dynamic Segment (both get triggered) #70954

Open Gritteh opened 1 week ago

Gritteh commented 1 week ago

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/suspicious-pine-go8s7s?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm20a6r6w00063b6wzyhxsa0n%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm20a6r6v00023b6wqv6kbi1q%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm20a6r6v00043b6wab58upw0%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm20a6r6w00053b6wmeeae01k%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cm20a6r6v00023b6wqv6kbi1q%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm20a6r6v00013b6w1hndt8h0%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522cm20a6r6v00023b6wqv6kbi1q%2522%252C%2522activeTabId%2522%253A%2522cm20a6r6v00013b6w1hndt8h0%2522%257D%252C%2522cm20a6r6w00053b6wmeeae01k%2522%253A%257B%2522id%2522%253A%2522cm20a6r6w00053b6wmeeae01k%2522%252C%2522activeTabId%2522%253A%2522cm20a84p6008x3b6w9sbw3g1u%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522cm20a84p6008x3b6w9sbw3g1u%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252Fus%2522%257D%255D%257D%252C%2522cm20a6r6v00043b6wab58upw0%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm20a6r6v00033b6wuq4qm7xh%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522id%2522%253A%2522cm20a6r6v00043b6wab58upw0%2522%252C%2522activeTabId%2522%253A%2522cm20a6r6v00033b6wuq4qm7xh%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

To Reproduce

It seems to work in sandbox but not locally... Please can this be checked out

Current vs. Expected behavior

app/[dynamic]/[...catchAll]/

When navigating to path /us, for example, /app/[dynamic]/page.tsx should be the relevant page triggered, and yes it is the one that gets used, but the console logs inside /app/[dynamic]/[...catchAll]/page.tsx are being triggered also. This is not the expected behaviour according to docs:

https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments

see the 'optional catch-all' bit - literally the only difference is to do what I stated above, if it's desired. Therefore the (non-optional) 'catch-all' should not be triggering the /us path as mentioned above.

For example, app/shop/[[...slug]]/page.js will also match /shop, in addition to /shop/clothes, /shop/clothes/tops, /shop/clothes/tops/t-shirts.

The difference between catch-all and optional catch-all segments is that with optional, the route without the parameter is also matched (/shop in the example above).

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.6.0: Mon Jun 24 00:56:10 PDT 2024; root:xnu-8020.240.18.709.2~1/RELEASE_X86_64
Binaries:
  Node: 20.11.0
  npm: 10.2.4
  Yarn: 1.22.19
  pnpm: 9.10.0
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 4.9.5
Next.js Config:
  output: N/A

warn  - Latest canary version not detected, detected: "14.1.0", newest: "15.0.0-canary.179".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) are affected? (Select all that apply)

Not sure, Developer Experience, Documentation, Module Resolution, Navigation, Parallel & Intercepting Routes, Runtime

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Other (Deployed)

Additional context

No response

Gritteh commented 1 week ago

So this might help

on the application (that I can't share), when going to the /us path, in the catch-all page (wrong page), the slug comes through as slug: [ '_next', 'static', 'css', 'app', 'index.esm.css.map' ]. But when on the correct catch-all page, let's say /us/garden, slug is slug: [ 'garden' ]

Something definitely wrong with nextjs here!

Gritteh commented 1 week ago

when routing to /uk, console is trying to route to 2 things (incorrect - triggering catch-all as well as dynamic):

        GET /uk 200 in 952ms
        GET /_next/static/css/app/index.esm.css.map 307 in 403ms
        GET /uk/_next/static/css/app/index.esm.css.map 200 in 232ms

only 1 GET for /uk/garden (correct catch-all trigger)