Routing-Grundlagen

Das Grundgerüst jeder Anwendung ist das Routing. Diese Seite führt Sie in die grundlegenden Konzepte des Routings für das Web und wie Sie das Routing in Next.js handhaben können.

Terminologie

Zunächst werden Sie diese Begriffe in der gesamten Dokumentation sehen. Hier ist eine kurze Referenz:

• Baum: Eine Konvention zur Visualisierung einer hierarchischen Struktur. Zum Beispiel ein Komponentenbaum mit Eltern- und Kindkomponenten, eine Ordnerstruktur usw.
• Teilbaum: Ein Teil eines Baums, der an einer neuen Wurzel (zuerst) beginnt und an den Blättern (zuletzt) endet.
• Wurzel: Der erste Knoten in einem Baum oder Teilbaum, wie ein Root-Layout.
• Blatt: Knoten in einem Teilbaum, die keine Kinder haben, wie das letzte Segment in einem URL-Pfad.

• URL-Segment: Ein Teil des URL-Pfads, der durch Schrägstriche getrennt ist.
• URL-Pfad: Der Teil der URL, der nach der Domain kommt (zusammengesetzt aus Segmenten).

Der app Router

In Version 13 hat Next.js einen neuen App Router eingeführt, der auf React Server Components basiert und gemeinsame Layouts, verschachteltes Routing, Ladestatuszustände, Fehlerbehandlung und mehr unterstützt.

Der App Router funktioniert in einem neuen Verzeichnis namens app. Das app-Verzeichnis arbeitet parallel zum pages-Verzeichnis, um eine schrittweise Einführung zu ermöglichen. Dies erlaubt Ihnen, einige Routen Ihrer Anwendung in das neue Verhalten zu übernehmen, während andere Routen im pages-Verzeichnis für das vorherige Verhalten bleiben. Wenn Ihre Anwendung das pages-Verzeichnis verwendet, lesen Sie bitte auch die Pages Router Dokumentation.

Hinweis: Der App Router hat Vorrang vor dem Pages Router. Routen über Verzeichnisse hinweg sollten nicht zu demselben URL-Pfad führen und verursachen einen Build-Zeit-Fehler, um einen Konflikt zu vermeiden.

Standardmäßig sind Komponenten innerhalb von app React Server Components. Dies ist eine Leistungsoptimierung und ermöglicht Ihnen eine einfache Übernahme, und Sie können auch Client-Komponenten verwenden.

Empfehlung: Schauen Sie sich die Server Seite an, wenn Sie neu bei Server-Komponenten sind.

Rollen von Ordnern und Dateien

Next.js verwendet einen dateiSystembasierten Router, bei dem:

• Ordner verwendet werden, um Routen zu definieren. Eine Route ist ein einzelner Pfad verschachtelter Ordner, der der DateiSystemhierarchie vom Stammordner bis zum endgültigen Blattordner folgt, der eine page.js-Datei enthält. Siehe Routen definieren.
• Dateien werden verwendet, um die Benutzeroberfläche zu erstellen, die für ein Routensegment angezeigt wird. Siehe spezielle Dateien.

Routensegmente

Jeder Ordner in einer Route repräsentiert ein Routensegment. Jedes Routensegment wird einem entsprechenden Segment in einem URL-Pfad zugeordnet.

Verschachtelte Routen

Um eine verschachtelte Route zu erstellen, können Sie Ordner ineinander verschachteln. Zum Beispiel können Sie eine neue /dashboard/settings-Route erstellen, indem Sie zwei neue Ordner im app-Verzeichnis verschachteln.

Die /dashboard/settings-Route besteht aus drei Segmenten:

• / (Stammsegment)
• dashboard (Segment)
• settings (Blatt-Segment)

Datei-Konventionen

Next.js bietet eine Reihe spezieller Dateien, um eine Benutzeroberfläche mit spezifischem Verhalten in verschachtelten Routen zu erstellen:

Hinweis: .js, .jsx oder .tsx Dateiendungen können für spezielle Dateien verwendet werden.

Komponentenhierarchie

Die in speziellen Dateien eines Routensegments definierten React-Komponenten werden in einer bestimmten Hierarchie gerendert:

• layout.js
• template.js
• error.js (React-Fehlergrenze)
• loading.js (React-Suspense-Grenze)
• not-found.js (React-Fehlergrenze)
• page.js oder verschachteltes layout.js

In einer verschachtelten Route werden die Komponenten eines Segments innerhalb der Komponenten seines übergeordneten Segments geschachtelt.

Kollokation

Zusätzlich zu speziellen Dateien haben Sie die Option, Ihre eigenen Dateien (z.B. Komponenten, Stile, Tests usw.) in Ordnern im app-Verzeichnis zu platzieren.

Dies liegt daran, dass Ordner zwar Routen definieren, aber nur die Inhalte, die von page.js oder route.js zurückgegeben werden, öffentlich adressierbar sind.

Erfahren Sie mehr über Projektorganisation und Kollokation.

Erweiterte Routing-Muster

Der App Router bietet auch eine Reihe von Konventionen, um fortgeschrittene Routing-Muster zu implementieren. Dazu gehören:

• Parallele Routen: Ermöglichen es, zwei oder mehr Seiten gleichzeitig in der gleichen Ansicht anzuzeigen, die unabhängig voneinander navigiert werden können. Sie können sie für geteilte Ansichten mit eigener Unter-Navigation verwenden. Z.B. Dashboards.
• Intercepting Routes: Ermöglichen es, eine Route abzufangen und im Kontext einer anderen Route anzuzeigen. Sie können diese verwenden, wenn das Beibehalten des Kontexts der aktuellen Seite wichtig ist. Z.B. Alle Aufgaben sehen, während man eine Aufgabe bearbeitet, oder ein Foto in einem Feed vergrößern.

Diese Muster ermöglichen es, reichhaltigere und komplexere Benutzeroberflächen zu erstellen und demokratisieren Funktionen, die historisch für kleine Teams und einzelne Entwickler schwierig umzusetzen waren.

Nächste Schritte

Nachdem Sie nun die Grundlagen des Routings in Next.js verstanden haben, folgen Sie den Links unten, um Ihre ersten Routen zu erstellen: