App Router
Der Next.js App Router führt ein neues Modell für die Erstellung von Anwendungen mit den neuesten React-Features ein, wie Server-Komponenten, Streaming mit Suspense und Server-Aktionen.
Beginnen Sie mit dem App Router, 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. Sie können jedoch headers und cookies über nur auf dem Server verfügbare Funktionen abrufen. Sie können auch Cookies setzen.
Layouts werden nicht neu gerendert. Sie können zwischengespeichert und wiederverwendet werden, um unnötige Berechnungen bei der Navigation zwischen Seiten zu vermeiden. Indem Layouts daran gehindert werden, auf das rohe Request zuzugreifen, kann Next.js die Ausführung potenziell langsamer oder aufwendiger Benutzercodes im Layout verhindern, was die Leistung beeinträchtigen könnte.
Dieses Design erzwingt zudem ein konsistentes und vorhersehbares Verhalten für Layouts über verschiedene Seiten hinweg, was die Entwicklung und das Debugging vereinfacht.
Je nach UI-Muster ermöglichen Parallele Routen das Rendern mehrerer Seiten im gleichen Layout, und Seiten haben Zugriff auf die Routensegmente sowie die URL-Suchparameter.
Wie kann ich die URL auf einer Seite aufrufen?
Standardmäßig sind Seiten Server-Komponenten. Sie können über die Eigenschaft params auf die Routensegmente und über die Eigenschaft searchParams auf die URL-Suchparameter für eine bestimmte Seite zugreifen.
Bei Verwendung von Client-Komponenten können Sie usePathname, useSelectedLayoutSegment und useSelectedLayoutSegments für komplexere Routen verwenden.
Je nach UI-Muster ermöglichen Parallele Routen das Rendern mehrerer Seiten im gleichen Layout, und Seiten haben Zugriff auf die Routensegmente sowie die URL-Suchparameter.
Wie kann ich von einer Server-Komponente aus weiterleiten?
Sie können redirect verwenden, um zu einer relativen oder absoluten URL weiterzuleiten. redirect ist eine temporäre (307) Weiterleitung, während permanentRedirect eine permanente (308) Weiterleitung ist. Wenn diese Funktionen während des Streaming der Benutzeroberfläche verwendet werden, fügen sie ein Meta-Tag ein, um die Weiterleitung auf Clientseite auszuführen.
Wie kann ich Authentifizierung mit dem App Router handhaben?
Hier sind einige gängige Authentifizierungslösungen, die den App Router unterstützen:
- NextAuth.js
- Clerk
- Stack Auth
- Auth0
- Stytch
- Kinde
- WorkOS
- Oder manuelles Handling von Sitzungen oder JWTs
Wie kann ich Cookies setzen?
Sie können Cookies in Server-Aktionen oder Route Handlern mit der Funktion cookies 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 von der Middleware aus setzen.
Wie kann ich Multi-Tenant-Apps erstellen?
Wenn Sie eine einzelne Next.js-Anwendung erstellen möchten, die mehrere Mandanten bedient, haben wir eine Beispielarchitektur entwickelt, die unsere empfohlene Architektur zeigt.
Wie kann ich den App Router-Cache invalidieren?
Es gibt mehrere Caching-Ebenen in Next.js und daher verschiedene Möglichkeiten, unterschiedliche Teile des Caches zu invalidieren. Mehr über Caching erfahren.
Gibt es umfassende, Open-Source-Anwendungen, die auf dem App Router aufbauen?
Ja. Sie können Next.js Commerce oder das Platforms Starter Kit als zwei größere Beispiele für die Verwendung des App Routers einsehen.