Sub-folders having pages within slots should affect URL structure

[mleimer]

Link to the code that reproduces this issue

https://github.com/mleimer/nextjs-slots-page

To Reproduce

1. Start the application using npm run dev or npm run build and npm run start
2. Go to http://localhost:3000/ -> The parallel routes & slots render correctly
3. Go to http://localhost:3000/members

Current vs. Expected behavior

Current A "404: This page could not be found" exception is thrown

Expected The page is rendered as described in https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#convention

Slots are not route segments and do not affect the URL structure. The file path /@team/members would be accessible at /members.

Although slots DO NOT affect the URL structure. I understand it this way, that as soon as add a sub-folder with a page to that slot, that it should be a public route again. Otherwise I misunderstand this quote.

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #7-Ubuntu SMP PREEMPT_DYNAMIC Fri Jun 23 15:37:39 UTC 2023
Binaries:
  Node: 18.13.0
  npm: 9.2.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 13.5.3-canary.1
  eslint-config-next: 13.5.2
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

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

App Router, Routing (next/router, next/navigation, next/link)

Additional context

No response

[hipdev]

Hi @mleimer, This concept is a bit tricky, but it is a powerful feature. I will try to explain this to you with this fork of your repo: https://github.com/hipdev/nextjs-slots-page

Now, as the documentation says, slots are not segments of the route and are loaded simultaneously or conditionally on one or more pages that share the same layout. It is a feature that allows you to do complex things.

In the repo that you share, you are only loading these slots for the layout that they share, but the pages are things independent of the content of the slots, and you are not defining those. This is where I think confusion can arise, and the documentation could be improved. That is why, when going to /members the page is not found.

The use cases for parallel routes are multiple, the documentation defines some cases, I really like using them to make intercepted routes and show the page that the user wants to see as a modal, if the user reloads the page, then it will be a default page.

You can play around with parallel routes using a default logic or showing a loading logic, is amazing. I left you a default state in my forked demo. Play around going to /dashboard and /members to see the difference.

I leave you a demo --> https://github.com/hipdev/rick-and-morty-characters

My personal site is also using these two advanced concepts for the blog, even if I don't have any posts yet hahaha 🥲.

I hope this help you to understand.

[mleimer]

@hipdev Thank you very much for your explanations. I think I got your point. In this case, I would be in favor of rephrasing the sentence "The file path /@team/members would be accessible at /members." such that one does not accidentally believe that it becomes a page if not combined with intercepted routes.

[graup]

I also don't understand this. From the docs, it seems I should be able to use parallel routes without intercepting.

So for example:

app
  overview
    @detail
      detail
        page.tsx
    page.tsx
    layout.tsx

Navigating to /overview/detail should render both overview as well as detail in the same layout.

Currently, it seems this feature only works for in-page navigation but not for initial URL loads. If this is the case, it should be renamed from "parallel routes" to "interim parallel routes" or something like that, and make clear in the docs that these routes are not accessible outside of in-page navigation.

[binarybehemoth]

Something is not right with Next.js 14.1 parallel route subfolders and global-error.js. I hope they can fix them soon.