Hva er parallelle og avskjæringsruter?

Question

Accepted Answer

Disse er to avanserte App Router-funksjoner for sofistikerte UI-oppsett. De deler en folder-konvensjonssyntaks. ## Hvorfor det er viktig Parallelle ruter gjør det mulig med komplekse, uavhengig lastende flerruteoppsett (dashboards) på en ryddig måte; avskjæringsruter gir "modal med en reell URL"-mønsteret (delbar, oppfriskningssikkert, bakover-knapp-vennlig) som ellers er vanskelig å bygge. De er avanserte, men de løser reelle UX-problemer — uavhengige paneler og kontekstuelle overlays — som tidligere krevde betydelig manuell ruting/tilstandsarbeid. ## Parallelle ruter (@folder) — gjengi flere sider i ett oppsett Parallelle ruter lar et enkelt oppsett **gjengi flere uavhengige rute "spor" samtidig**, hver med sin egen laste-/feiltilstand. Du definerer spor med `@name`-mapper: ```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} ; } ``` Hvert spor navigerer og laster **uavhengig** — flott for **dashboards** der paneler oppdateres separat, eller viser to seksjoner samtidig. ## Avskjæringsruter ((.)folder) — overlegg en rute uten å forlate gjeldende side Avskjæringsruter lar deg "avskjære" en navigasjon og gjengi den **i gjeldende kontekst** (f.eks. en modal) i stedet for en full side — mens du fortsatt har en reell, delbar URL. ```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) ``` Avskjæringmarkørene (`(.)` samme nivå, `(..)` ett opp, `(...)` rot) styrer hvilket segment som avskjæres. Dette er nøyaktig hvordan Instagram-lignende "foto åpnes i en modal men har sin egen URL"-mønsteret fungerer.