Layouts und Seiten erstellen

Bisher besteht Ihre Anwendung nur aus einer Startseite. Lassen Sie uns lernen, wie Sie mit Layouts und Seiten weitere Routen erstellen können.

Verschachteltes Routing

Next.js verwendet Dateisystem-Routing, bei dem Ordner verwendet werden, um verschachtelte Routen zu erstellen. Jeder Ordner repräsentiert ein Routen-Segment, das einem URL-Segment zugeordnet ist.

Sie können für jede Route separate Benutzeroberflächen mit layout.tsx und page.tsx Dateien erstellen.

page.tsx ist eine spezielle Next.js-Datei, die eine React-Komponente exportiert, und sie ist erforderlich, damit die Route zugänglich ist. In Ihrer Anwendung haben Sie bereits eine Seiten-Datei: /app/page.tsx - dies ist die Startseite, die der Route / zugeordnet ist.

Um eine verschachtelte Route zu erstellen, können Sie Ordner ineinander verschachteln und page.tsx Dateien darin hinzufügen. Beispiel:

/app/dashboard/page.tsx ist dem Pfad /dashboard zugeordnet. Lassen Sie uns die Seite erstellen, um zu sehen, wie es funktioniert!

Die Dashboard-Seite erstellen

Erstellen Sie einen neuen Ordner namens dashboard innerhalb von /app. Erstellen Sie dann eine neue page.tsx Datei im dashboard Ordner mit folgendem Inhalt:

export default function Page() {
  return <p>Dashboard Page</p>;
}

Stellen Sie nun sicher, dass der Entwicklungsserver läuft, und rufen Sie http://localhost:3000/dashboard auf. Sie sollten den Text "Dashboard Page" sehen.

Auf diese Weise können Sie in Next.js verschiedene Seiten erstellen: Erstellen Sie ein neues Routen-Segment mit einem Ordner und fügen Sie eine page Datei darin ein.

Durch die spezielle Benennung von page Dateien ermöglicht Next.js Ihnen, UI-Komponenten, Testdateien und anderen verwandten Code mit Ihren Routen zusammenzuführen. Nur der Inhalt der page Datei ist öffentlich zugänglich. Beispielsweise sind die Ordner /ui und /lib innerhalb des /app Ordners zusammen mit Ihren Routen zusammengeführt.

Übung: Die Dashboard-Seiten erstellen

Lassen Sie uns das Erstellen weiterer Routen üben. Erstellen Sie in Ihrem Dashboard zwei weitere Seiten:

1. Kunden-Seite: Die Seite sollte unter http://localhost:3000/dashboard/customers erreichbar sein. Vorerst sollte sie ein <p>Customers Page</p> Element zurückgeben.
2. Rechnungs-Seite: Die Rechnungsseite sollte unter http://localhost:3000/dashboard/invoices erreichbar sein. Vorerst sollte sie ebenfalls ein <p>Invoices Page</p> Element zurückgeben.

Nehmen Sie sich etwas Zeit für diese Übung, und wenn Sie bereit sind, können Sie die Lösung unten einsehen:

Das Dashboard-Layout erstellen

Dashboards haben eine Art Navigation, die über mehrere Seiten hinweg geteilt wird. In Next.js können Sie eine spezielle layout.tsx Datei verwenden, um eine Benutzeroberfläche zu erstellen, die zwischen mehreren Seiten geteilt wird. Lassen Sie uns ein Layout für die Dashboard-Seiten erstellen!

Fügen Sie im /dashboard Ordner eine neue Datei namens layout.tsx hinzu und fügen Sie folgenden Code ein:

import SideNav from '@/app/ui/dashboard/sidenav';
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
    </div>
  );
}

Ein paar Dinge passieren in diesem Code, lassen Sie uns das aufschlüsseln:

Zuerst importieren Sie die <SideNav /> Komponente in Ihr Layout. Alle Komponenten, die Sie in diese Datei importieren, werden Teil des Layouts sein.

Die <Layout /> Komponente erhält eine children Prop. Dieses Kind kann entweder eine Seite oder ein anderes Layout sein. In Ihrem Fall werden die Seiten innerhalb von /dashboard automatisch in ein <Layout /> verschachtelt, wie folgt:

Überprüfen Sie, ob alles korrekt funktioniert, indem Sie Ihre Änderungen speichern und Ihren lokalen Server überprüfen. Sie sollten Folgendes sehen:

Ein Vorteil der Verwendung von Layouts in Next.js ist, dass bei der Navigation nur die Seiten-Komponenten aktualisiert werden, während das Layout nicht neu gerendert wird. Dies wird als partielles Rendering bezeichnet und bewahrt den clientseitigen React-Zustand im Layout beim Wechsel zwischen Seiten.

Root-Layout

In Kapitel 3 haben Sie die Inter Schriftart in ein anderes Layout importiert: /app/layout.tsx. Zur Erinnerung:

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

Dies wird als Root-Layout bezeichnet und ist in jeder Next.js-Anwendung erforderlich. Jede Benutzeroberfläche, die Sie dem Root-Layout hinzufügen, wird über alle Seiten Ihrer Anwendung hinweg geteilt. Sie können das Root-Layout verwenden, um Ihre <html> und <body> Tags zu modifizieren und Metadaten hinzuzufügen (Sie werden mehr über Metadaten in einem späteren Kapitel lernen).

Da das neue Layout, das Sie gerade erstellt haben (/app/dashboard/layout.tsx), spezifisch für die Dashboard-Seiten ist, müssen Sie dem obigen Root-Layout keine weitere Benutzeroberfläche hinzufügen.