[NEXT-1175] Adjacent parallel routes are only able to match a single page.js or default.js when used with Dynamic Segments

[slice]

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.4.0: Mon Mar  6 21:00:41 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T8103
    Binaries:
      Node: 20.0.0
      npm: 8.19.2
      Yarn: N/A
      pnpm: 7.5.0
    Relevant packages:
      next: 13.4.2-canary.3
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4

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

App directory (appDir: true), Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/next-parallel-params-issue-xmyldt?file=%2Fapp%2Flayout.tsx%3A2%2C11

To Reproduce

1. Create two parallel route slots (e.g. @catcher and @main)
2. In one of the route slots (@catcher), make it a Dynamic Route by creating @catcher/[...catchAll]/page.js (doesn't have to be ..., can just be [catchAll]).
3. In the other route slot (@main), create a page with a hardcoded route segment name like @main/foo/page.js.
4. In the layout, use both slots.

Describe the Bug

I'm trying to use the Parallel Routes feature in my Next.js app (using app directory).

I noticed that when I create two Parallel Routes, only one page.js (or default.js) is ever matched. This manifests in the case where one of the slots involves a Dynamic Segment, and the other slot a hardcoded route. For example:

| layout.js
| @catcher/
\   [...catchAll]/
| \   page.js
| @main/
\   foo/
  \   page.js

If I navigate to /foo, I expect both @catcher and @main to render, but only @main renders (@catcher will 404 unless there's a default.js). This is not what I expect; since @catcher is a catch-all, I expect it to render regardless of whether @main matches or not.

If I navigate to a route that doesn't match @main, such as bar, then @catcher will match and @main will 404 unless there's a default.js, which is expected to me.

In the linked CodeSandbox I have provided an example of the above structure (but with default.js files added, so that a 404 doesn't end up erroring the Root Layout).

This is unexpected to me, because I think that @catcher should render with a props.params.catchAll set to "foo", instead of default.js (or 404ing):

It doesn't make sense that just because the @main slot matches, the @catcher slot's Dynamic Segment will stop matching.

However, it works when you set up the files like this:

| layout.js
| @catcher/
|   page.js
| @main/
\   page.js

Next.js is able to display multiple pages this way.

Expected Behavior

When I use a Dynamic Segment inside of a Parallel Route, the Dynamic Segment matches regardless of whether another Dynamic Route in the same layout matches or not.

Which browser are you using? (if relevant)

Chrome Version 113.0.5672.63 (Official Build) (arm64)

How are you deploying your application? (if relevant)

No response

_NEXT-1175

[Yukioru]

You seem to have the same problem with [...catchAll]. It doesn't work under any conditions.

#48719
Related: #48124

[youweol-master]

Does the team plan to fix or improve this feature? I think this feature is very important.

[oswaldoacauan]

Experiencing the exact same behaviour in the latest version. Is this on the radar to be fixed soon?

[Hei-Ha]

I have the same problem, hope it will be fixed soon.

[ztanner]

Hey folks - the CodeSandbox link doesn't seem to contain any application code anymore, but when attempting to repro based on the issue description, it seems to be behaving as expected (both slots are matched)

If you are still running into this problem, please open a new issue with a valid reproduction. Thank you!

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.