Parallel & Intercepting Routes
Zwei Werkzeuge, die selten nötig sind – und dann unersetzlich
Parallel Routes füllen mehrere Bereiche einer Seite unabhängig. Intercepting Routes zeigen eine Adresse als Overlay, ohne die Seite zu verlassen.
Die meisten Projekte kommen ohne beides aus. Wenn dir eine der beiden Aufgaben aber begegnet, gibt es keine gute Alternative – deshalb lohnt es sich zu wissen, dass es sie gibt.
Parallel Routes: mehrere Bereiche gleichzeitig
Ein Dashboard hat Kennzahlen, eine Aktivitätsliste und eine Teamübersicht. Alle drei laden unterschiedlich lange und sollen sich unabhängig aktualisieren. Mit Parallel RoutesMehrere Bereiche einer Seite, die gleichzeitig und unabhängig voneinander gefüllt werden. Ordner beginnen mit `@`.→ bekommt jeder Bereich eine eigene Datei – und ein eigenes Lade- und Fehlerverhalten.
app/dashboard/
layout.tsx bekommt die Bereiche als Props
page.tsx der Hauptbereich
@kennzahlen/
page.tsx
loading.tsx eigener Platzhalter
@aktivitaet/
page.tsx
error.tsx eigenes Auffangnetzexport default function Layout({
children,
kennzahlen,
aktivitaet,
}: {
children: React.ReactNode;
kennzahlen: React.ReactNode;
aktivitaet: React.ReactNode;
}) {
return (
<div className="raster">
<section>{kennzahlen}</section>
<section>{aktivitaet}</section>
<main>{children}</main>
</div>
);
}Jeder Bereich bringt sein eigenes loading.tsx und error.tsx mit. Fällt die Aktivitätsliste aus, steht der Rest des Dashboards trotzdem. Mit einer normalen Seite wäre alles gemeinsam kaputt.
Intercepting Routes: das Overlay
Du kennst es von Fotogalerien: Klickst du in der Übersicht auf ein Bild, öffnet es sich als Overlay – die Adresse ändert sich trotzdem. Teilst du diese Adresse, landet der Empfänger auf einer vollwertigen Seite. Genau das leistet Intercepting RoutesEine Adresse abfangen und anders darstellen – etwa ein Foto als Overlay statt als eigene Seite, solange man von der Liste kommt.→.
app/
galerie/
page.tsx die Übersicht
@modal/
(.)foto/[id]/
page.tsx Overlay – greift beim Klick aus der Galerie
foto/[id]/
page.tsx die richtige Seite – bei direktem AufrufKlick in der Galerie → Adresse wird /foto/42
→ Overlay öffnet, Galerie bleibt dahinter
Seite neu laden → normale Seite unter /foto/42
Adresse geteilt → Empfänger sieht die normale Seite
Zurück-Knopf → Overlay schließt, Galerie ist noch daDu brauchst die abgefangene und die normale Seite. Wer nur das Overlay baut, bekommt beim direkten Aufruf eine 404 – und genau das passiert bei jedem geteilten Verweis.
Wann sich der Aufwand lohnt
- +
Dashboards, bei denen Bereiche unabhängig laden und ausfallen dürfen
- +
Galerien und Detailansichten, die als Overlay erscheinen sollen
- +
Anmeldedialoge, die auch als eigene Seite funktionieren müssen
- −
Einfache Dialoge ohne eigene Adresse – dafür genügt ein State
- −
Bereiche, die ohnehin gemeinsam laden
- −
Als Erstes im Projekt – erst die einfachen Mittel ausschöpfen
Ordner mit @, (.) und (..) sind gewöhnungsbedürftig, und wenn ein Bereich nicht erscheint, ist die Ursache oft ein fehlendes default.tsx. Nimm die Werkzeuge, wenn du sie brauchst – nicht, weil sie interessant aussehen.
▸ Genauer erklärt: default.tsx optional
Bei Parallel Routes kann es passieren, dass für einen Bereich zur aktuellen Adresse gar keine Seite existiert. Beim ersten Laden weiß Next.js dann nicht, was es dort zeigen soll – und wirft einen Fehler.
// Fällt ein, wenn dieser Bereich zur aktuellen Adresse nichts hat.
export default function Default() {
return null; // oder ein sinnvoller Ausgangszustand
}Wenn beim Neuladen einer Seite mit Parallel Routes etwas verschwindet oder ein Fehler erscheint, fehlt fast immer ein default.tsx in einem der @-Ordner. Beim Navigieren fällt es nicht auf – erst beim direkten Aufruf.
Sitzt das schon?
4 Fragen zu dieser Lektion. Falsche Antworten landen in deiner Statistik.