App Router
Der Next.js App Router ist ein neues Paradigma für die Erstellung von Anwendungen mit den neuesten React-Funktionen. Wenn Sie bereits mit Next.js vertraut sind, werden Sie feststellen, dass der App Router eine natürliche Weiterentwicklung des bestehenden dateisystembasierten Routers im Pages Router darstellt.
Für neue Anwendungen empfehlen wir die Verwendung des App Routers. Für bestehende Anwendungen können Sie den App Router schrittweise einführen. Es ist auch möglich, beide Router in derselben Anwendung zu verwenden.
Häufig gestellte Fragen
Wie kann ich auf das Request-Objekt in einem Layout zugreifen?
Der direkte Zugriff auf das rohe Request-Objekt ist bewusst nicht möglich. Sie können jedoch ü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 bei der Navigation zwischen Seiten zu vermeiden. Durch die Einschränkung des Zugriffs auf das rohe Request-Objekt kann Next.js verhindern, dass potenziell langsame oder rechenintensive Benutzercode im Layout ausgeführt wird, was die Leistung beeinträchtigen könnte.
Dieses Design sorgt auch für ein konsistentes und vorhersehbares Verhalten von Layouts über verschiedene Seiten hinweg, was die Entwicklung und Fehlersuche vereinfacht, da Entwickler sich darauf verlassen können, dass Layouts unabhängig von der spezifischen Seite gleich funktionieren.
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 auf einer Seite zugreifen?
Standardmäßig sind Seiten Server-Komponenten (Server Components). 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 (Client Components) 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:
- NextAuth.js
- Clerk
- Auth0
- Stytch
- Oder manuelle Handhabung von Sessions oder JWTs
Wie kann ich Cookies setzen?
Sie können Cookies in Server Actions oder Route Handlers mithilfe 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 aus 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 ungültig machen?
Es gibt mehrere Cache-Ebenen in Next.js und somit mehrere Möglichkeiten, verschiedene Teile des Caches ungültig zu machen. 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 ansehen, zwei größere Beispiele für die Verwendung des App Routers, die Open-Source sind.