suchen

Heim >Web-Frontend >js-Tutorial >Verwalten mehrerer Layouts in Next.js mit App Router und Routengruppen

Verwalten mehrerer Layouts in Next.js mit App Router und Routengruppen

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2025-01-17 02:34:11566Durchsuche

Managing Multiple Layouts in Next.js with App Router and Route Groups

In Next.js 13 wurde der App Router mit mehreren spannenden Funktionen wie Layouts, Fehlergrenzen, Ladeindikatoren und mehr eingeführt. Allerdings stehen einige Entwickler vor Herausforderungen, wenn sie mehrere Layouts auf derselben Routenebene verwalten. Im Folgenden zeige ich Ihnen, wie Sie für solche Szenarien am besten saubere, praktische Layouts strukturieren und beibehalten.

Schritt 1: Erstellen Sie ein Root-Layout (optional)

Ein Stammlayout ist nützlich, um globale Komponenten oder Kontextanbieter für Ihre gesamte App zu definieren. Wenn Ihre App jedoch keine globalen Konfigurationen erfordert, können Sie diesen Schritt überspringen.

// app/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <RootProviders>
          {children}
        </RootProviders>
      </body>
    </html>
  );
}

Schritt 2: Definieren Sie Layouts für bestimmte Routengruppen

Angenommen, wir benötigen eine Kopf- und Fußzeile für die Seiten /home und /contact. Um dies zu erreichen, können wir Next.js Route Groups verwenden.

Zum Beispiel erstellen wir eine Routengruppe mit dem Namen (Marketing) und platzieren unsere Seiten darin. Seiten wie app/(marketing)/home/page.tsx und app/(marketing)/contact/page.tsx verwenden das app/(marketing)/layout.tsx-Layout.

// app/(marketing)/layout.tsx

export default function MarketingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <Providers>
      <Header />
      <main>{children}</main>
      <Footer />
    </Providers>
  );
}

Schritt 3: Erstellen Sie Layouts für andere Routengruppen

Ähnlich können wir für Seiten wie /policy und /tos eine neue Routengruppe mit dem Namen (legal) erstellen und ein bestimmtes Layout dafür definieren.

// app/(legal)/layout.tsx

export default function LegalLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <Header />
      <main className="container mx-auto">{children}</main>
    </>
  );
}

Hauptvorteile

Mit diesem Ansatz können Sie:

  1. Behalten Sie mehrere Layouts für Routen auf derselben Ebene bei.
  2. Halten Sie Ihre Projektstruktur sauber und organisiert.
  3. Implementieren Sie spezifische Funktionen wie Google Analytics für bestimmte Layouts. Sie könnten beispielsweise Analyse-Tracking speziell im LegalLayout für Seiten wie /policy und /tos.
    4. hinzufügen

Durch die Nutzung von Routengruppen und Layouts ermöglicht Next.js Ihnen die Erstellung modularer, skalierbarer und wartbarer Architekturen für Ihre Anwendungen.

Das obige ist der detaillierte Inhalt vonVerwalten mehrerer Layouts in Next.js mit App Router und Routengruppen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

define if for require Error using JS this router Other
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So meistern Sie das JavaScript-Debugging für Web-AppsNächster Artikel：So meistern Sie das JavaScript-Debugging für Web-Apps

In Verbindung stehende Artikel

Mehr sehen