Qu'est-ce que les routes parallèles et les routes d'interception ?

Question

Accepted Answer

Ce sont deux fonctionnalités avancées d'App Router pour les mises en page d'interface utilisateur sophistiquées. Elles partagent une syntaxe de convention de dossiers. ## Routes parallèles (@folder) — afficher plusieurs pages dans une mise en page Les routes parallèles permettent à une seule mise en page de rendre **plusieurs "slots" de route indépendants simultanément**, chacun avec son propre état de chargement/erreur. Vous définissez les slots avec des dossiers `@name` : ```text app/ layout.tsx @team/page.tsx → a slot @analytics/page.tsx → another slot ``` ```tsx // app/layout.tsx — slots are passed as named props export default function Layout({ children, team, // ← @team slot analytics, // ← @analytics slot }: { children: React.ReactNode; team: React.ReactNode; analytics: React.ReactNode }) { return <>

{children} ; } ``` Chaque slot navigue et se charge **indépendamment** — idéal pour les **tableaux de bord** où les panneaux se mettent à jour séparément, ou pour afficher deux sections à la fois. ## Routes d'interception ((.)folder) — superposer une route sans quitter la page actuelle Les routes d'interception vous permettent de "capturer" une navigation et de la rendre **dans le contexte actuel** (par exemple une modal) au lieu d'une page complète — tout en ayant une URL réelle et partageable. ```text app/feed/page.tsx app/feed/(..)photo/[id]/page.tsx → intercepts /photo/[id] when navigated from the feed app/photo/[id]/page.tsx → the full page (on direct visit / refresh) ``` ```text Click a photo in the feed → opens as a MODAL over the feed (intercepted), URL = /photo/123 Refresh or share that URL → renders the FULL photo page (no interception) ``` Les marqueurs d'interception (`(.)` même niveau, `(..)` un niveau au-dessus, `(...)` racine) contrôlent quel segment est intercepté. C'est exactement le fonctionnement du modèle de style Instagram « la photo s'ouvre dans une modal mais a sa propre URL ». ## Pourquoi c'est important Les routes parallèles permettent des mises en page multi-panneaux complexes et chargeant indépendamment (tableaux de bord) de manière propre ; les routes d'interception offrent le modèle « modal avec une URL réelle » (partageable, sûr au rafraîchissement, convivial pour le bouton retour) qui est autrement difficile à construire. Ces fonctionnalités sont avancées, mais elles résolvent des problèmes UX réels — panneaux indépendants et superpositions contextuelles — qui nécessitaient auparavant un travail de routage/état manuel considérable.