Dies sind zwei fortgeschrittene App Router-Funktionen für anspruchsvolle UI-Layouts. Sie teilen sich eine Ordner-Konventionssyntax.
Parallele Routen ermöglichen es einem einzelnen Layout, mehrere unabhängige Routen-"Slots" gleichzeitig zu rendern, jeweils mit einem eigenen Lade-/Fehlerstatus. Du definierst Slots mit @name-Ordnern:
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></>;
}
Jeder Slot navigiert und lädt sich unabhängig — großartig für Dashboards, bei denen Panels separat aktualisiert werden, oder um zwei Abschnitte gleichzeitig anzuzeigen.
Abfangende Routen ermöglichen dir, eine Navigation zu "fangen" und sie im aktuellen Kontext (z. B. in einem Modal) zu rendern, anstatt eine vollständige Seite — während du trotzdem eine echte, teilbare URL behältst.
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)
Die Abfang-Marker ((.) gleiche Ebene, (..) eine Ebene höher, (...) Root) steuern, welches Segment abgefangen wird. Dies ist genau die Art und Weise, wie das Instagram-ähnliche "Foto öffnet sich in einem Modal, hat aber eine eigene URL"-Muster funktioniert.
Parallele Routen ermöglichen saubere, komplexe, unabhängig ladende Multi-Pane-Layouts (Dashboards); abfangende Routen liefern das "Modal mit echter URL"-Muster (teilbar, aktualisierungssicher, Zurück-Schaltfläche-freundlich), das sonst schwierig zu erstellen ist.
Sie sind fortgeschritten, aber sie lösen echte UX-Probleme — unabhängige Panels und kontextuelle Overlays — die zuvor erhebliche manuelle Routing-/State-Arbeit erforderten.