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

Try it

Source

// 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><Raw html={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).