Can Slots be overridden?

[sp88011]

Summary

I realize slots can be a complex tool depending on what you're trying to achieve...

I wanted to clarify if slots can be defined more than once, with the "closest slot" to a certain route being the one that's being rendered in a higher-level layout?

My structure looks something like this:

app
├── layout.tsx         <-- This is where we define the slots
├── @slotA
│   ├── page.tsx
│   └── default.tsx
│
└── profile
    ├── [id] 
        ├── @slotA      <-- We're providing a second implementation for slotA. 
        │   ├── page.tsx
        │   └── default.tsx

When I'm navigating to /profile/abcdefg, I'm seeing the initial slotA (the one defined in the root of /app). I was hoping I could render the slotA that's nested inside profile/[id] instead.

It seems like Next will look at the [id] folder and because there's no layout file that references slotA, it does not know what to do with this "second" slotA and therefore will fallback to the "first" slotA.

Do layout and slot implementation always have to be on the same level?

Additional information

No response

Example

No response

[icyJoseph]

If you rename the nested slotA, to slotB is it available through typescript (next.js' plugin), on the root layout?

[sp88011]

@icyJoseph no, it isn't available.

[flythenimbus]

I would like to know how to accomplish this as well.

[ArrayKnight]

Did anybody end up figuring out how to make this work?

[ArrayKnight]

Turns out the answer is yes, but the way you go about doing it backwards from what we all seem to be expecting. Essentially, it comes down to recreating the route structure for where you want to override the slot, inside of the slot folder:

app
├── layout.tsx                    <-- This is where we define the slots
├── @slotA
│   └── default.tsx
│   └── (.)profile
│       └── [id] 
│           └── page.tsx          <-- We're providing a second implementation for slotA. 
├── page.tsx                      <-- Root page gets the default for slotA
└── profile
    └── [id] 
        └── page.tsx              <-- Get's the route specific version of slotA

Notice that the route structure matches except for where we use intercept route pathing (.) https://nextjs.org/docs/app/api-reference/file-conventions/intercepting-routes#convention

[ArrayKnight]

I'm not in love with having to duplicate the route structure. I really hope they end up supporting overriding from a separate route, something like: app/profile/[id]/(...)@slotA/page.tsx

[ArrayKnight]

One of the other things I'd like is to support a wildcard / globbing in the route. As-is you end up with having to create a lot of duplication.

Given the structure above, if you have additional pages (/settings/page, /blog/[id]/page, etc) and say you want the same SlotA content on half of everything (arbitrary I know, but try to make that point that we can't just switch the default content), then you end up having to have each of those route structures duplicated in the slot folder

Instead, I'd prefer to have (.)(blog|profile) or (.)blog/(*). I yup, I tried using the dynamic routes to allow any subpath structure, but it doesn't end up matching

[roderickhsiao]

Having the same thoughts here, it seems like the slot overrides happens on reading the same layout layer of the slot and nested duplicate route structure instead of co-locate with the route (similar to metadata).

Personally feel like the duplicating folder structure make it a bit hard to manage when you have deep nested route structure and a high level of shared layout, unless we push the layout sharing to a lower leaf node (which kind of defeat the purpose of layout sharing)

[sefin23]

Yes, slots in Next.js Parallel Routes can be effectively "overridden" by defining a more specific slot at a nested route level.

Here's how it works:

Default slot fallback:
If a slot isn't matched for a given route, Next.js renders the default.tsx file for that slot. So you can control what shows per route by having both a default.tsx (fallback) and specific page.tsx files inside each slot folder.

Overriding a slot at a nested route:

text
app/
@sidebar/
default.tsx ← shown on most pages
dashboard/
page.tsx ← overrides sidebar only on /dashboard
layout.tsx
page.tsx
In your layout.tsx:

tsx
export default function Layout({ children, sidebar }) {
return (

{sidebar}
{children}

);
}
When the user navigates to /dashboard, the @sidebar/dashboard/page.tsx is rendered instead of default.tsx — effectively overriding the slot for that route.

So you don't "override" in the traditional sense, but you control slot content per-route by adding matching pages inside the slot folder. Hope that helps!

[roderickhsiao]

I think the wish here is instead of writing
@sidebar/dashboard/page.tsx, we hope we can write dashboard/@sidebar/page.tsx so the overrides following the same folder structure instead of duplicate the whole folder tree under each slot, which is kind of hard to maintain