Routing-Grundlagen

Das Skelett jeder Anwendung ist das Routing. Diese Seite führt Sie in die grundlegenden Konzepte des Routings für das Web ein und zeigt, wie Routing in Next.js gehandhabt wird.

Terminologie

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

• Baum: Eine Konvention zur Visualisierung einer hierarchischen Struktur. Zum Beispiel ein Komponentenbaum mit Eltern- und Kinderkomponenten, eine Ordnerstruktur usw.
• Teilbaum: Ein Teil eines Baums, der bei einer neuen Wurzel (erster Knoten) beginnt und bei den Blättern (letzte Knoten) 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: Teil des URL-Pfads, der durch Schrägstriche begrenzt wird.
• URL-Pfad: Teil der URL, der nach der Domain kommt (bestehend 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, Ladezustände, Fehlerbehandlung und mehr unterstützt.

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

Gut zu wissen: Der App Router hat Vorrang vor dem Pages Router. Routen über verschiedene Verzeichnisse sollten nicht auf denselben URL-Pfad aufgelöst werden und verursachen einen Build-Time-Fehler, um Konflikte zu vermeiden.

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

Empfehlung: Schauen Sie sich die Server-Seite an, wenn Sie neu bei Server Components 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 Root-Ordner bis zu einem finalen Blatt-Ordner folgt, der eine page.js-Datei enthält. Siehe Defining Routes.
• Dateien verwendet werden, um die UI zu erstellen, die für ein Routensegment angezeigt wird. Siehe spezielle Dateien.

Routensegmente

Jeder Ordner in einer Route repräsentiert ein Routensegment. Jedes Routensegment ist 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:

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

Dateikonventionen

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

Gut zu wissen: Die Dateierweiterungen .js, .jsx oder .tsx können für spezielle Dateien verwendet werden.

Komponentenhierarchie

Die React-Komponenten, die in speziellen Dateien eines Routensegments definiert sind, werden in einer bestimmten Hierarchie gerendert:

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

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

Kollokation

Zusätzlich zu speziellen Dateien haben Sie die Möglichkeit, eigene Dateien (z.B. Komponenten, Styles, Tests usw.) in Ordnern im app-Verzeichnis zu platzieren.

Das liegt daran, dass während Ordner Routen definieren, 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 Ihnen bei der Implementierung erweiterter Routing-Muster zu helfen. Dazu gehören:

• Parallel Routes: Ermöglichen es Ihnen, zwei oder mehr Seiten gleichzeitig in derselben Ansicht anzuzeigen, die unabhängig voneinander navigiert werden können. Sie können sie für geteilte Ansichten mit eigener Unternavigation verwenden, z.B. Dashboards.
• Intercepting Routes: Ermöglichen es Ihnen, eine Route abzufangen und im Kontext einer anderen Route anzuzeigen. Sie können diese verwenden, wenn der Kontext für die aktuelle Seite wichtig ist, z.B. das Anzeigen aller Aufgaben während der Bearbeitung einer Aufgabe oder das Vergrößern eines Fotos in einem Feed.

Diese Muster ermöglichen es Ihnen, reichhaltigere und komplexere UIs zu erstellen und machen Funktionen zugänglich, die historisch gesehen für kleine Teams und einzelne Entwickler komplex zu implementieren waren.

Nächste Schritte

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