App Router
Der Next.js App Router führt ein neues Modell für die Erstellung von Anwendungen ein, das die neuesten React-Funktionen wie Server-Komponenten, Streaming mit Suspense und Server-Aktionen nutzt.
Steigen Sie mit dem App Router ein, indem Sie Ihre erste Seite erstellen.
Häufig gestellte Fragen
Wie kann ich auf das Request-Objekt in einem Layout zugreifen?
Sie können absichtlich nicht auf das rohe Request-Objekt zugreifen. Allerdings können Sie über server-exklusive Funktionen auf headers und cookies zugreifen. Sie können auch Cookies setzen.
Layouts werden nicht neu gerendert. Sie können zwischengespeichert und wiederverwendet werden, um unnötige Berechnungen beim Navigieren zwischen Seiten zu vermeiden. Indem Layouts der Zugriff auf das rohe Request-Objekt verwehrt wird, kann Next.js verhindern, dass potenziell langsame oder aufwändige Benutzercode innerhalb des Layouts ausgeführt wird, was die Leistung beeinträchtigen könnte.
Dieses Design sorgt auch für konsistentes und vorhersehbares Verhalten von Layouts über verschiedene Seiten hinweg, was die Entwicklung und Fehlersuche vereinfacht.
Abhängig vom UI-Muster, das Sie erstellen, ermöglichen Parallel Routes das Rendern mehrerer Seiten im selben Layout, und Seiten haben Zugriff auf die Routensegmente sowie die URL-Suchparameter.
Wie kann ich auf die URL einer Seite zugreifen?
Standardmäßig sind Seiten Server-Komponenten. Sie können über die params-Prop auf die Routensegmente und über die searchParams-Prop auf die URL-Suchparameter für eine bestimmte Seite zugreifen.
Wenn Sie Client-Komponenten verwenden, können Sie usePathname, useSelectedLayoutSegment und useSelectedLayoutSegments für komplexere Routen nutzen.
Je nach UI-Muster, das Sie erstellen, ermöglichen Parallel Routes das Rendern mehrerer Seiten im selben Layout, und Seiten haben Zugriff auf die Routensegmente sowie die URL-Suchparameter.
Wie kann ich von einer Server-Komponente umleiten?
Sie können redirect verwenden, um von einer Seite zu einer relativen oder absoluten URL umzuleiten. redirect ist eine temporäre (307) Umleitung, während permanentRedirect eine permanente (308) Umleitung ist. Wenn diese Funktionen während des Streamings von UI verwendet werden, fügen sie ein Meta-Tag ein, um die Umleitung auf der Client-Seite auszulösen.
Wie kann ich Authentifizierung mit dem App Router handhaben?
Hier sind einige gängige Authentifizierungslösungen, die den App Router unterstützen:
Wie kann ich Cookies setzen?
Sie können Cookies in Server-Aktionen oder Route-Handlern mit der cookies-Funktion setzen.
Da HTTP das Setzen von Cookies nach Beginn des Streamings nicht erlaubt, können Sie Cookies nicht direkt von einer Seite oder einem Layout aus setzen. Sie können Cookies auch über Middleware setzen.
Wie kann ich Multi-Tenant-Apps erstellen?
Wenn Sie eine einzelne Next.js-Anwendung erstellen möchten, die mehrere Mandanten bedient, haben wir ein Beispiel erstellt, das unsere empfohlene Architektur zeigt.
Wie kann ich den App Router Cache invalidieren?
Es gibt mehrere Cache-Ebenen in Next.js und somit mehrere Möglichkeiten, verschiedene Teile des Caches zu invalidieren. Mehr über Caching erfahren.
Gibt es umfassende, Open-Source-Anwendungen, die auf dem App Router basieren?
Ja. Sie können sich Next.js Commerce oder das Platforms Starter Kit für zwei größere Beispiele der Nutzung des App Routers ansehen, die Open-Source sind.