Parallel routes (@slot)
The right-hand column comes from a separate page at @aside/page.tsx rendered in parallel with this one, then handed to the layout as the aside prop. Slot names with a leading @ stay invisible in the URL — they're per-layout slots, not route segments.
Tip
Each slot is rendered independently in the same worker — loaders run in parallel and don't block each other. A slow slot doesn't delay the others. Each slot can also export its own loader function.
Try it
- This page (
/examples/parallel-demo) renders main + aside. - /examples/parallel-demo/@aside → 404 (slot folders are not URLs).
// src/app/examples/parallel-demo/layout.tsx
export default function Layout({ children, aside }) {
return (
<div style="display:grid; grid-template-columns:1fr 240px;">
<div>{children}</div>
<aside>{aside}</aside>
</div>
);
}
// src/app/examples/parallel-demo/page.tsx → the children
// src/app/examples/parallel-demo/@aside/page.tsx → the aside slot
//
// /examples/parallel-demo renders both;
// /examples/parallel-demo/@aside → 404 (slot, not URL).