Dessa är två avancerade App Router-funktioner för sofistikerade gränssnittslayouter. De delar en mappkonventionssyntax.
Parallella rutter gör att en enda layout kan återge flera oberoende ruttning "platser" samtidigt, var och en med sitt eget läs-/feltillstånd. Du definierar platser med @name mappar:
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></>;
}
Varje plats navigerar och läses in oberoende — perfekt för instrumentpaneler där paneler uppdateras separat, eller visar två avsnitt samtidigt.
Avbörjande rutter låter dig "fånga" en navigering och återge den i det nuvarande sammanhanget (t.ex. en modal) istället för en hel sida — men med en verklig, 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)
Avbörjningsmarkörerna ((.) samma nivå, (..) en upp, (...) rot) styr vilken segment som avbördas. Det här är exakt hur Instagram-stilen "fotot öppnas i en modal men har sin egen URL"-mönstret fungerar.
Parallella rutter möjliggör komplexa, oberoende laddade flerpanelslayouter (instrumentpaneler) på ett rent sätt; avbörjande rutter tillhandahåller "modalen med en verklig URL"-mönstret (delbar, uppdateringssäker, tillbakaknappsäker) som annars är knepigt att bygga.
De är avancerade, men de löser verkliga UX-problem — oberoende paneler och kontextuella överlägg — som tidigare krävde omfattande manuellt routing/tillståndsarbete.