Funktionsweise des App-Verzeichnisses in Next.js 13

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 create-next-app@latest next13 --experimental-app


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

Das neue App-Verzeichnis verstehen

Next.js 12 verwendete das Verzeichnis „ pages “ für das Routing, aber es wird in Next.js 13 durch das Verzeichnis „ app/ “ ersetzt. Das Verzeichnis „ pages/ “ funktioniert in Next 13 weiterhin, 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:

• page.tsx – Die Datei, die zum Erstellen der Benutzeroberfläche für eine bestimmte Route verwendet wird.
• layout.tsx – 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, aber sie bewahren den Zustand nicht 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.
• not-found.tsx – Die nicht gefundene Datei wird gerendert, wenn Next.js einen 404-Fehler für diese Seite feststellt. 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 im App/ -Verzeichnis erstellt. In diesem Ordner müssen Sie eine Datei namens page.tsx erstellen , die die Benutzeroberfläche dieser bestimmten Route definiert.

Um beispielsweise eine Route mit dem Pfad /products zu erstellen, müssen Sie eine app/products/page.tsx -Datei erstellen.

Verschachteln Sie bei verschachtelten Routen wie /products/sale Ordner ineinander, sodass die Ordnerstruktur wie app/products/sale/page.tsx aussieht .

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.

Eine ausführlichere Erläuterung finden Sie in diesem Artikel zu verschiedenen Rendering-Methoden in Next.js.

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

Sie können auch direkt mit dem Backend interagieren. Es ist nicht erforderlich, getServerSideProps oder getStaticProps zu verwenden, da Sie async/await in der Serverkomponente verwenden können, um Daten abzurufen.

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

async function getData() {
  try{
    const res = await fetch('https://api.example.com/...');
    return res.json();
  } catch(error) {
throw new Error('Could not fetch data')
  }
}


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

export default async function Page() {
  const data = await getData();
  return <div></div>;
}


Serverkomponenten eignen sich hervorragend zum Rendern von nicht interaktiven Inhalten. Wenn Sie React-Hooks, Ereignis-Listener oder Nur-Browser-APIs verwenden müssen, verwenden Sie eine Client-Komponente, indem Sie vor jedem Import die Direktive „use client“ am Anfang 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:

• Erstellen einer loading.tsx -Datei, die für das gesamte Routensegment gerendert wird.

export default function Loading() {
  return <p>Loading...</p>
}


• Umhüllen einzelner Komponenten mit React Suspense-Grenzen und Festlegen einer Fallback-Benutzeroberfläche.

import { Suspense } from "react";
import { Products } from "./Components";


export default function Sale() {
  return (
    <section>
      <Suspense fallback={<p>Products...</p>}>
        <Products />
      </Suspense>
    </section>
  );
}


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.