Deep default.js is completely ignored

[aparx]

Link to the code that reproduces this issue

https://github.com/aparx/nextjs-deep-defaultjs-bug

To Reproduce

1. Create a new Next application using the src folder and app router
2. Create a parallel route, that contains a page and another subpage using a route parameter (e.g.: @test/[id]/page.js)
3. Add a default to the subpage just created (e.g. @test/[id]/default.js)
4. Create a route parameter at the root, add a page (e.g.: [id]/page.js) and add a subpage (e.g.: [id]/subpage/page.js)
5. Start next and navigate to your just created subpage (e.g.: /someRandomId/subpage) - This should throw a 404

Current vs. Expected behavior

What is the issue?

The default.js examples suggest that it is possible to contain default.js files deeper than the parallel
route itself. Such that subfolders can contain a version of default Next displays when
a fallback is needed. This does not work as proposed in 14.2.0 & 14.2.2 when using a
route parameter.

Expected behaviour & issue

The route file-tree looks like this:

layout.tsx
- @team
-- [teamId]
    default.tsx
    page.tsx

- [teamId]
   page.tsx
-- settings
    page.tsx
   

Both are simultaneously rendered beneath each other in the root layout.tsx.

1. We expect following when navigating to /testId/: (passed)

   1. the content of @team/[teamId]/page.tsx is rendered
   2. the content of [teamId]/page.tsx is rendered

2. We expect following when navigating to /testId/settings: (failed)

   1. the content of @team/[teamId]/default.tsx is rendered (Unexpected)
   2. the content of [teamId]/settings/page.tsx is rendered (Only under a condition, see below)

By default, neither is rendered from point two, since a 404 is thrown. Only, when
adding a default.js at @team/ directly, [teamId]/settings/page.tsx is rendered. The more deeply
located default file is completely ignored.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 32638
  Available CPU cores: 16
Binaries:
  Node: 21.6.0
  npm: N/A
  Yarn: N/A
  pnpm: 8.2.0
Relevant Packages:
  next: 14.2.2 // Latest available version is detected (14.2.2).
  eslint-config-next: 14.2.2
  react: 18.0.0
  react-dom: 18.0.0
  typescript: 5.0.2
Next.js Config:
  output: N/A

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

Parallel & Intercepting Routes

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

next dev (local)

Additional context

I tested this reproduction with 14.0, 14.1 canary versions & the current latest 14.2.2

[ztanner]

Apologies for the confusion @aparx , the docs are outdated here and I'll work on a PR to fix them.

Parallel routes currently only support a single default for the slot, and that default should be defined at the root of the slot. The params it receives would be for the dynamic segments leading up to it.

[aparx]

Hello, thanks for letting me know!

Are there plans on adding default.js the way they were described?

[ztanner]

Hi @aparx -- there are not currently plans for this. Could you clarify a bit more what your desired behavior / use-case is? I could perhaps provide an alternate suggestion.

[aparx]

Hey Tanner,

I have a dashboard with three different parallel routes being displayed side by side. Some containing route params up to two directories deep. For some slots I need a default.js on different levels, to be able to use the supplied route parameters. I reckon I'm going to have to use normal pages, but the issue is they refetch on some soft navigation changes and also I'll kinda have to spam them in multiple places to get the desired behaviour, which is something I don't particularly want. I'm pretty certain I'll find a workaround that fits more with Next's design and concepts.

So thanks for helping and good luck down the road.

[frankievx]

Hey Tanner,

I have a dashboard with three different parallel routes being displayed side by side. Some containing route params up to two directories deep. For some slots I need a default.js on different levels, to be able to use the supplied route parameters. I reckon I'm going to have to use normal pages, but the issue is they refetch on some soft navigation changes and also I'll kinda have to spam them in multiple places to get the desired behaviour, which is something I don't particularly want. I'm pretty certain I'll find a workaround that fits more with Next's design and concepts.

So thanks for helping and good luck down the road.

I'm also interested in this functionality and the ability to have deeply nested slots that run code. My use case is essentially when I'm working on React Three Fiber projects I like to have the canvas and the webgl layer as a slot and then html on the main routes. This separation allows me to organize my react three fiber code effectively and in parallel with the html code.

[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.