Allow Parallel Routes/Slots to be used from nested directories

[defrex]

Goals

1. Centralize handling of certain types of slots (eg Modals)
2. Use slots from paths that aren't direct children of the layout

Non-Goals

No response

Background

Slots are a perfect fit for allowing modals to work with browser history in Next.js. However, I commonly want to use a modal dialog from an arbitrarily nested path, not just the direct children of the layout.

Take a directory structure like this.

src/
└── app
    ├── default.tsx
    ├── foo
    │   ├── @model
    │   │   ├── default.tsx
    │   │   └── page.tsx
    │   └── page.tsx
    ├── layout.tsx
    └── page.tsx

Currently this wouldn't work, since foo is between layout.tsx and @modal.

Proposal

I'd like it if slots would work with the nearest layout.tsx file up the hierarchy, rather than just the one in the current directory.

Even better would be searching up the tree for a layout with the matching modal: ReactNode prop, since I may want an intermediate layout without forcing it to handle the modal slot itself.

[mastoj]

Am I right in this doesn't work if you add another layout in foo as well? I've been trying to create a parallel route from a nested directory for some time now, but can't get it to work... only when it is in the root layout. I think that could be fine, but then it should be mentioned in the docs if that is how it works.

[bbtools-ps]

Yep. That's the only way I got it working. It should be mentioned in the docs I agree.

[tonyjara]

This worked for me on 13.5.6. I updated today and to my surprise this was no longer working. It would be nice to have this back.

[redBaron23]

Hey I'll drop a question that is somehow related to this, I've this folder structure

app/
├── profile/
│   ├── layout.tsx
│   ├── @authenticated/
│   │   └── page.tsx
│   ├── @unauthenticated/
│   │   └── page.tsx
│   └── settings/
│       └── page.tsx

When I try to access to /profile/settings, it shows me a 404. What could be the reason?
My layout do this:

import { auth } from "@/lib/auth";
import { type PropsWithChildren } from "react";

type Props = PropsWithChildren<{
  authenticated: React.ReactNode;
  unauthenticated: React.ReactNode;
}>;

export default async function Layout({
  authenticated,
  unauthenticated,
  children,
}: Props) {
  const session = await auth();

  const isLoggedIn = !!session?.user?.name;

  return (
    <>
      {isLoggedIn ? authenticated : unauthenticated}
      {children}
    </>
  );
}

[AleksandrZhukov]

faced with the same problem, did you find a solution?

[curiosbasant]

You're missing a default.js file.

[michaelschufi]

Have there been any new workarounds/solutions for this in the meantime?

I'd also like to share some of my thoughts.

My Experience

I frequently have the case where certain pages should show something next to a layout's component. This can be e.g. showing a title of an intermediate route in a top-level sidebar or showing breadcrumbs.

Right now, the only solutions are seemingly:

• Using a parallel route slot which is deactivated for all pages except the ones that need it.
• Using a client component inside the layout to read the path, fetch the data again, and then show it.

Problems with maintainability

Both solutions mean that you have to go out of the current route context to make this happen. I.e. you need to recreate the routing logic either in code (client component) or with a folder structure, right next to the folder structure you already set up.
This makes it way harder to maintain if you

• rename an intermediate route
• move the page to a different route
• want to change the component rendering structure of your layout

[tonyjara]

I've been using a catchAll route as a workaround if it's of any help.

[michaelschufi]

You mean, you can at least skip the routes that don't need to render anything in the slot? However, this still requires recreating the folder structure for the routes that do render something starting from the layout file, correct?

[tonyjara]

With a catchAll route you get an array of url's and directly check against the number of url's inside the array. For example, say you have a business page with products, and you want to show a product inside a modal while keeping the page in the background, you would have a file route be [...slug], where slug[0] would be the slug for businesses and slug[1] for products. You can use these to make your meta tags logic work as well.

[murderteeth]

Parallel routes should be supported at any level of the file tree, please! Workarounds for this in real projects are pain points. And please please please at least update the docs to reflect current limitations. Please consider this docs pr, #69380

[GoriusKW]

Has there been a fix for this yet?

[jelling]

Here's how to do this in version 14; it probably works in v15 as well:

My first instinct was to organize routes via functional areas like:

/feature
  /sub-feature
   /@footer
    page.tsx
  page.tsx

But as the issues says, this does not work.

However, organizing each slot with its own hierarchy of routes does work.

/feature
  /@footer
   /sub-feature
    page.tsx
  /sub-feature
    page.tsx

I can the appeal of both ways. But Vercel... this should really be documented.

[michaelschufi]

Thanks! I wasn't aware that this can be done. :D

Btw, v0 suggests the first way does work (probably on latest Next.js). https://v0.dev/chat/D2TQhDDDhpP?b=b_OU8HG8T3cbb&p=0

I still think Next.js should allow for something folderless like this:

/feature
  /sub-feature
    @footer.tsx
    page.tsx
  page.tsx

This way you wouldn't need to have so so many nested folders and the structure would be easier to read, imo.

[goodpixels]

Here's how to do this in version 14; it probably works in v15 as well:

My first instinct was to organize routes via functional areas like:

/feature
  /sub-feature
   /@footer
    page.tsx
  page.tsx

But as the issues says, this does not work.

However, organizing each slot with its own hierarchy of routes does work.

/feature
  /@footer
   /sub-feature
    page.tsx
  /sub-feature
    page.tsx

I can the appeal of both ways. But Vercel... this should really be documented.

This sort of works. Thanks. Wish it was easier to place slots anywhere in the tree though.

The slot appears fine, but only when the route is accessed by SSR via URL. When I navigate away from the route with the slot to a different one (that doesn't have a slot), the slot content persists in the layout... :/

[sarioglu]

Update: I had a clean build and it started to work. I guess it was a caching issue for some reason.

The slot appears fine, but only when the route is accessed by SSR via URL. When I navigate away from the route with the slot to a different one (that doesn't have a slot), the slot content persists in the layout... :/

Have you found any solution to this? I have a tabbed layout and want to show a modal based on a sub-route using parallel routes. It works but now I cannot switch to any other tab. It shows 404 page instead. Here is my route structure:

/customers
    layout.tsx // for tabs
    /list
        page.tsx
        layout.tsx // for @modal
        /@modal
            default.tsx // returns null
            /[id]
                page.tsx
    /groups
        page.tsx

[GoriusKW]

Thanks Jon, I will give it a bash.

[musiur]

Is it possible to make like

/[boardId]
       /@actionPanel
                /@actionList
                          default.tsx
       default.tsx
       layout.tsx // to get /@actionList with props
layout.tsx // to get /@actionPanel

I have tried this. It's working in Development environment but in production environment after build it's getting only default.tsx instead of nested layout.tsx in @/actionPanel