Routes parallèles (@slot)
La colonne de droite provient d'une page distincte dans @aside/page.tsx, rendue en parallèle avec celle-ci, puis transmise au layout comme prop aside. Les noms de slot précédés d'un @ restent invisibles dans l'URL — ce sont des slots de layout, pas des segments de route.
Astuce
Chaque slot est rendu indépendamment dans le même worker — les loaders s'exécutent en parallèle et ne se bloquent pas mutuellement. Un slot lent ne retarde pas le rendu des autres. Chaque slot peut aussi exporter sa propre fonction loader.
Essayez
- Cette page (
/examples/parallel-demo) affiche le contenu principal + l'aside. - /examples/parallel-demo/@aside → 404 (les dossiers de slot ne sont pas des URL).
// 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).