Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Next.js 13 führte ein neues Routing-System ein, das das App-Verzeichnis verwendet. Next.js 12 bot bereits eine einfache Möglichkeit, Routen durch dateibasierte Routen zu handhaben. Durch das Hinzufügen einer Komponente zum Seitenordner wird daraus automatisch eine Route. In dieser neuen Version verfügt der dateisystembasierte Router über ein integriertes Setup für Layouts, verschachteltes Routing in Vorlagen, eine Benutzeroberfläche zum Laden, Fehlerbehandlung und Unterstützung für Serverkomponenten und Streaming.

Dieser Artikel erklärt diese neuen Funktionen und warum sie wichtig sind.

Erste Schritte mit Next.js 13

Erstellen Sie Ihr eigenes Next.js 13-Projekt, indem Sie den folgenden Befehl im Terminal ausführen.

npx erstellen-nächste-app@latest next13 --experimentelle-app

Dies sollte einen neuen Ordner namens next13 mit dem neuen App-Verzeichnis erstellen.

instagram viewer

Das neue App-Verzeichnis verstehen

Next.js 12 verwendet die Seiten Verzeichnis für das Routing, aber es wird durch das ersetzt Anwendung/ Verzeichnis in Next.js 13. Der Seiten/ Das Verzeichnis funktioniert weiterhin in Next 13, um eine inkrementelle Übernahme zu ermöglichen. Sie müssen nur sicherstellen, dass Sie keine Dateien in den beiden Verzeichnissen für dieselbe Route erstellen, da Sie sonst einen Fehler erhalten.

Hier ist die aktuelle Struktur des App-Verzeichnisses.

Im App-Verzeichnis verwenden Sie Ordner zum Definieren von Routen, und die Dateien in diesen Ordnern werden zum Definieren der Benutzeroberfläche verwendet. Es gibt auch spezielle Dateien wie:

  • Seite.tsx - Die Datei, die zum Erstellen der Benutzeroberfläche für eine bestimmte Route verwendet wird.
  • layout.tsx - Es enthält die Layout-Definition der Route und kann auf mehreren Seiten geteilt werden. Sie eignen sich perfekt für Navigationsmenüs und Seitenleisten. Bei der Navigation behalten Layouts den Status bei und werden nicht erneut gerendert. Das bedeutet, dass beim Navigieren zwischen Seiten mit einem gemeinsamen Layout der Status derselbe bleibt. Zu beachten ist, dass es ein oberstes Layout (das Root-Layout) geben muss, das alle HTML- und Body-Tags enthält, die von der gesamten Anwendung gemeinsam genutzt werden.
  • template.tsx - Vorlagen sind wie Layouts, sie bewahren jedoch nicht den Status und werden jedes Mal neu gerendert, wenn sie zum Erstellen einer Seite verwendet werden. Vorlagen eignen sich perfekt für Situationen, in denen ein bestimmter Code jedes Mal ausgeführt werden muss, wenn die Komponente bereitgestellt wird, z. B. zum Betreten und Beenden von Animationen.
  • error.tsx - Diese Datei wird verwendet, um Fehler in der Anwendung zu behandeln. Es umschließt eine Route mit der React-Error-Grenzklasse, so dass es versucht, sich davon zu erholen, wenn ein Fehler in dieser Route oder ihren Kindern auftritt, indem es eine benutzerfreundliche Fehlerseite darstellt.
  • loading.tsx - Die Lade-UI wird sofort vom Server geladen, während die Routen-UI im Hintergrund geladen wird. Die Lade-UI kann ein Spinner oder ein Skelettbildschirm sein. Sobald der Routeninhalt geladen ist, ersetzt er die Lade-UI.
  • nicht gefunden.tsx - Die nicht gefundene Datei wird gerendert, wenn Next.js auf a trifft 404-Fehler für diese Seite. In Next.js 12 müssten Sie manuell eine 404-Seite erstellen und einrichten.
  • head.tsx - Diese Datei gibt das Head-Tag für das Routensegment an, in dem es definiert ist.

So erstellen Sie eine Route in Next.js 13

Wie bereits erwähnt, werden Routen mithilfe von Ordnern in der erstellt Anwendung/ Verzeichnis. In diesem Ordner müssen Sie eine Datei namens erstellen Seite.tsx die die Benutzeroberfläche dieser bestimmten Route definiert.

Zum Beispiel, um eine Route mit dem Pfad zu erstellen /products, müssen Sie eine erstellen app/products/page.tsx Datei.

Für verschachtelte Routen wie /products/sale, verschachteln Sie Ordner so ineinander, dass die Ordnerstruktur aussieht app/products/sale/page.tsx.

Abgesehen von einer neuen Art des Routings sind weitere interessante Funktionen, die das App-Verzeichnis unterstützt, Serverkomponenten und Streaming.

Verwenden von Serverkomponenten im App-Verzeichnis

Das App-Verzeichnis verwendet standardmäßig Serverkomponenten. Dieser Ansatz reduziert die an den Browser gesendete JavaScript-Menge, wenn die Komponente auf dem Server gerendert wird. Dies verbessert die Leistung.

Siehe diesen Artikel auf verschiedene Rendering-Methoden in Next.js für eine genauere Erklärung.

Eine Serverkomponente bedeutet, dass Sie sicher auf Umgebungsgeheimnisse zugreifen können, ohne dass diese clientseitig offengelegt werden. Sie können zum Beispiel verwenden process.env.

Sie können auch direkt mit dem Backend interagieren. Es besteht keine Notwendigkeit für die Verwendung getServerSideProps oder getStaticProps da Sie async/await in der Serverkomponente verwenden können, um Daten abzurufen.

Betrachten Sie diese asynchrone Funktion, die Daten von einer API abruft.

asynchronFunktionDaten bekommen() {
versuchen{
konst res = erwarten bringen(' https://api.example.com/...');
zurückkehren res.json();
 } fangen(Fehler) {
WurfneuFehler('Daten konnten nicht abgerufen werden')
 }
}

Sie können es direkt auf einer Seite wie folgt aufrufen:

ExportStandardasynchronFunktionBuchseite() {
konst Daten = erwarten Daten bekommen();
zurückkehren<div>div>;
}

Serverkomponenten eignen sich hervorragend zum Rendern von nicht interaktiven Inhalten. Wenn du musst Verwenden Sie React-Hooks, Ereignis-Listener oder Nur-Browser-APIs verwenden eine Client-Komponente, indem Sie vor jedem Import die Direktive „use client“ oben in der Komponente hinzufügen.

Inkrementelles Streaming von Komponenten im App-Verzeichnis

Streaming bezieht sich auf das schrittweise Senden von Teilen der Benutzeroberfläche an den Client, bis alle Komponenten gerendert sind. Dadurch kann der Benutzer einen Teil des Inhalts anzeigen, während der Rest gerendert wird. Um Benutzern ein besseres Erlebnis zu bieten, rendern Sie eine Ladekomponente wie ein Spinner, bis der Server das Rendern des Inhalts abgeschlossen hat. Sie tun dies auf zwei Arten:

  • Ein... Erstellen loading.tsx Datei, die für das gesamte Routensegment gerendert wird. 
ExportStandardFunktionWird geladen() {
zurückkehren<P>Wird geladen...P>
}
  • Umhüllen einzelner Komponenten mit React Suspense-Grenzen und Festlegen einer Fallback-Benutzeroberfläche. 
importieren { Spannung } aus"reagieren";
importieren { Produkte } aus"./Komponenten";
ExportStandardFunktionVerkauf() {
zurückkehren (
<Abschnitt>
Produkte...
}>
<Produkte />
Spannung>
Abschnitt>
 );
}

Bevor die Produktkomponente gerendert wird, sieht ein Benutzer „Produkte…“. Dies ist in Bezug auf die Benutzererfahrung besser als ein leerer Bildschirm.

Upgrade auf Next.js 13

Das neue App-Verzeichnis ist definitiv eine Verbesserung gegenüber dem vorherigen Seitenverzeichnis. Es enthält spezielle Dateien wie Layout, Head, Template, Error, Not-Found und Loading, die verschiedene Zustände beim Rendern einer Route handhaben, ohne dass eine manuelle Einrichtung erforderlich ist.

Darüber hinaus unterstützt das App-Verzeichnis auch Streaming und Serverkomponenten, was zu einer verbesserten Leistung führt. Obwohl diese Funktionen sowohl für Benutzer als auch für Entwickler großartig sind, befinden sich die meisten von ihnen derzeit in der Beta-Phase.

Sie können jedoch weiterhin auf Next.js 13 upgraden, da das Seitenverzeichnis weiterhin funktioniert, und dann das App-Verzeichnis in Ihrem eigenen Tempo verwenden.