Disse er to avancerede App Router-funktioner til sofistikerede UI-layouts. De deler en mappe-konventionssyntaks.
Parallelle ruter lader et enkelt layout gengive flere uafhængige rute "slots" samtidigt, hver med sin egen indlæsnings-/fejltilstand. Du definerer slots med @name mapper:
app/
layout.tsx
@team/page.tsx → a slot
@analytics/page.tsx → another slot
// 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 <><nav /> {children} <aside>{team}{analytics}</aside></>;
}
Hver slot navigerer og indlæser uafhængigt — fantastisk til dashboards, hvor paneler opdateres separat, eller viser to sektioner på én gang.
Afskærende ruter lader dig "fange" en navigation og gengive den i den nuværende kontekst (f.eks. en modal) i stedet for en fuld side — mens du stadig har en reel, delbar URL.
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)
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)
Afskæringsmerkerne ((.) samme niveau, (..) ét niveau op, (...) rod) styrer, hvilket segment der bliver afskåret. Dette er nøjagtigt hvordan Instagram-agtig "foto åbner i en modal men har sin egen URL"-mønster fungerer.
Parallelle ruter muliggør komplekse, uafhængigt indlæsende flerrude-layouts (dashboards) rent; afskærende ruter leverer "modal med en reel URL"-mønsteret (delbar, opfriskningssikker, bagtast-venlig) som ellers er svært at bygge.
De er avancerede, men løser rigtige UX-problemer — uafhængige paneler og kontekstuelle overlejringer — som tidligere krævede betydelig manuel routing/state-arbejde.