next.js: 13.3.0 Intercepting with grouped app does not work

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:38:37 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.14.0
      npm: 9.3.1
      Yarn: 1.22.19
      pnpm: 7.27.0
    Relevant packages:
      next: 13.3.1-canary.2
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://github.com/khuezy/next-intercept

To Reproduce

npm install
npm run dev
go to localhost:3000/shop
Click on Go to nested, route is stuck
go to localhost:3000/shop_no_group
Click on Go to nested, route is intercepted

Describe the Bug

When using group routes, interception does not work. eg:

app/(group)/shop

Expected Behavior

When using grouped routes, interception should work.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

About this issue

Original URL
State: closed
Created a year ago
Reactions: 9
Comments: 30 (18 by maintainers)

Commits related to this issue

interception routes: fix support for route groups (#48351) fixes #48104 This PR fixes route groups breaking interception routes. I hadn't realised that route groups were actually part of the tree r... — committed to vercel/next.js by feedthejim a year ago

Most upvoted comments

should be fixed by https://github.com/vercel/next.js/pull/48276

feedthejim on Apr 12, 2023

ohhhh okay I know what the issue is!

feedthejim on Apr 13, 2023

Opened a PR for the route group support!

@khuezy no because that would disable the interception route! checkout the doc for both concepts https://beta.nextjs.org/docs/routing/parallel-routes

feedthejim on Apr 13, 2023

thanks for the repro @khuezy I can confirm it does not work as expected, let me investigate

feedthejim on Apr 13, 2023

On a related note, I am having issues getting intercept to work when there are multiple nested dynamic slugs . For example, intercepting at (...)posts/[collectionId]/[postId] does not work. Only (...posts)/[postId] works.

I have exact the same issue on 13.4.1,

/[lang]/checkout/[businessCode]/[serviceId]/@calendar/(..)testpath **work**
/[lang]/checkout/[businessCode]/[serviceId]/@calendar/(..)(..)anothertestpath **not work** (always hard navigate to anothertestpath)
/[lang]/checkout/[businessCode]/[serviceId]/@calendar/(...)[lang]/thirdtestpath **not work** (always hard navigate to thirdtestpath)

TrustyTechSG on May 8, 2023

@feedthejim can you look at: https://codesandbox.io/p/sandbox/nostalgic-chaplygin-tfyi0p

Append “/photos” to the site url, eg: “csb.app/photos”.

Clicking on the “Go to /photos/[author]/[id]” will navigate to the page, I expect it to intercept. If you then click “Back” in the browser, the navigation seems to be stuck too.

Edit: 1 second please, I have typo in the sub folder.

khuezy on Apr 13, 2023

@feedthejim I think I have the same issue where intercepting routes is not working inside of a group folder (using 13.3.1-canary.6)

I built a small reproduction here: https://codesandbox.io/p/sandbox/nextjs-intercepting-routes-s9j6mo

I have a REAL group dashboard (using a (group) folder) and a FAKE group dashboard using exactly the same code and folder structure but inside a regular group folder (which means it is also like that in the path of the URL).

Testing the fake one, the modal content is loaded as expected, when you go to the real one, next will always navigate away.

Hope this helps you track down the issue 😃

— edit — I added a third option being a dashboard nested inside a group folder, because I thought it might be because the intercepting route ends inside the group folder, but that one also does not seem to work as it should.

Nickman87 on Apr 13, 2023

same. ah, guess it’s a grouped routes issue, not dynamic route issue.but repro here: https://github.com/amlcodes/amlcodes-nextgram-intercepting-dynamic-routes-issue

amlcodes on Apr 11, 2023