Cosa sono le rotte parallele e le rotte di intercettazione?

Question

Accepted Answer

Questi sono due feature avanzate di App Router per layout UI sofisticati. Condividono una sintassi basata su convenzione di cartelle. ## Parallel Routes (@folder) — renderizzare più pagine in un layout Le rotte parallele consentono a un singolo layout di renderizzare **più slot di rotta "indipendenti" simultaneamente**, ciascuno con il proprio stato di caricamento/errore. Gli slot si definiscono con cartelle `@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} ; } ``` Ogni slot naviga e carica **indipendentemente** — perfetto per **dashboard** dove i pannelli si aggiornano separatamente, o per mostrare due sezioni contemporaneamente. ## Intercepting Routes ((.)folder) — sovrapporre una rotta senza lasciare la pagina corrente Le rotte di intercettazione ti consentono di "catturare" una navigazione e renderizzarla **nel contesto corrente** (ad es. una modale) invece di una pagina intera — mantenendo comunque un URL reale e condivisibile. ```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) ``` I marcatori di intercettazione (`(.)` stesso livello, `(..)` uno sopra, `(...)` radice) controllano quale segmento viene intercettato. Questo è esattamente il modo in cui funziona il pattern "foto si apre in una modale ma ha il suo proprio URL" nello stile Instagram. ## Perché è importante Le rotte parallele consentono layout multi-pannello complessi e caricamento indipendente (dashboard) in modo pulito; le rotte di intercettazione forniscono il pattern "modale con un URL reale" (condivisibile, sicuro al refresh, compatibile con il pulsante indietro) che altrimenti è difficile da costruire. Sono avanzate, ma risolvono veri problemi UX — pannelli indipendenti e sovrapposizioni contestuali — che in precedenza richiedevano un lavoro manuale significativo di routing/stato.