next.js: [NEXT-1166] Modal Interception does not work for (.)[dynamic] routes

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.4.2-canary.4
      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://codesandbox.io/p/sandbox/youthful-butterfly-l44fsy

To Reproduce

  1. Go to sandbox and run the dev server.
  2. Click on the “Photos” link
  3. Click on “Go to /photos/[author]/[id]”, where the author and id is “john/123”
  4. The interception does not work, the [author] params is “(.)john”
  5. Reload the page, the [author] params is “john”

Now go back to the root and click on the “Static” link. This route doesn’t use dynamic routes and the interception works as expected.

Describe the Bug

When using dynamic routes in the modal, the interception of the current route does not work. That is, when I’m on the “/photos” page, I want a modal-ize “/photos/[author]/[id]”

Expected Behavior

When on the “/photos” page, clicking on a child route should intercept the child modal.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

NEXT-1166

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 9
  • Comments: 17 (7 by maintainers)

Commits related to this issue

Most upvoted comments

I also had the same problem:

Before I used folder [lang] to wrap: work

image

After I use folder [lang] to wrap: not work

image Any fix this?

Looks like a duplicate of https://github.com/vercel/next.js/issues/48143.

Using the (…) as a workaround only helps if your root segment is not dynamic.

It might be best to open a new issue w/ the examples.

It turns out there’s already #52533 Please forward future discussion to that issue

I’ve been facing similar issue, it seems that using:

(…) to match segments from the root app directory.

Fixes it. see here https://codesandbox.io/p/sandbox/quizzical-cloud-oj5kkw