M

MLOG

Deutsch

Entdecken Sie Next.js Parallel Routen: Leitfaden für dynamische, flexible Seitenlayouts mit unabhängigen Abschnitten. Erfahren Sie Implementierung, Vorteile & Best Practices.

Next.js Parallel Routen: Dynamische Seiten-Layouts gestalten

Next.js, ein führendes React-Framework, entwickelt sich ständig weiter, um Entwicklern leistungsstarke Tools für die Erstellung moderner Webanwendungen zur Verfügung zu stellen. Eine der aufregendsten Funktionen, die in den letzten Versionen eingeführt wurde, sind Parallel Routen. Diese Funktion ermöglicht es Ihnen, mehrere unabhängige Abschnitte innerhalb desselben Seitenlayouts zu rendern, was eine unübertroffene Flexibilität und Kontrolle über die Struktur und Benutzererfahrung Ihrer Anwendung bietet.

Was sind Parallel Routen?

Traditionell entspricht eine Route in Next.js einer einzelnen Seitenkomponente. Wenn Sie zu einer anderen Route navigieren, wird die gesamte Seite neu gerendert. Parallel Routen durchbrechen dieses Paradigma, indem sie es Ihnen ermöglichen, mehrere Komponenten gleichzeitig innerhalb desselben Layouts zu rendern, wobei jede von ihrem eigenen unabhängigen Routensegment verwaltet wird. Stellen Sie es sich so vor, als würden Sie Ihre Seite in verschiedene Abschnitte unterteilen, jeder mit seiner eigenen URL und seinem eigenen Lebenszyklus, die alle auf einem einzigen Bildschirm koexistieren.

Dies eröffnet viele Möglichkeiten zur Erstellung komplexerer und dynamischerer Benutzeroberflächen. Zum Beispiel können Sie Parallel Routen verwenden, um:

Das Konzept verstehen: Slots

Das Kernkonzept hinter Parallel Routen ist der Begriff der "Slots". Ein Slot ist ein benannter Bereich innerhalb Ihres Layouts, in dem ein bestimmtes Routensegment gerendert wird. Sie definieren diese Slots in Ihrem app-Verzeichnis mithilfe des Symbols @, gefolgt vom Slot-Namen. Zum Beispiel repräsentiert @sidebar einen Slot namens "sidebar".

Jeder Slot kann dann einem Routensegment zugeordnet werden. Wenn der Benutzer zu einer bestimmten Route navigiert, rendert Next.js die mit diesem Routensegment verknüpfte Komponente in den entsprechenden Slot im Layout.

Implementierung: Ein praktisches Beispiel

Lassen Sie uns anhand eines praktischen Beispiels veranschaulichen, wie Parallel Routen funktionieren. Stellen Sie sich vor, Sie entwickeln eine E-Commerce-Anwendung und möchten eine Produktdetailseite mit einer persistenten Warenkorb-Sidebar anzeigen.

1. Verzeichnisstruktur

Zuerst definieren wir die Verzeichnisstruktur für unsere Anwendung:

app/
  product/
    [id]/
      @cart/
        page.js  // Warenkorb-Komponente
      page.js      // Produktdetails-Komponente
    layout.js   // Produkt-Layout
  layout.js     // Root-Layout

Hier ist, was jede Datei repräsentiert:

2. Root-Layout (app/layout.js)

Das Root-Layout enthält typischerweise Elemente, die über die gesamte Anwendung hinweg geteilt werden, wie Header und Footer.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>Meine E-Commerce-App</header>
        {children}
        <footer>© 2024</footer>
      </body>
    </html>
  );
}

3. Produkt-Layout (app/product/[id]/layout.js)

Dies ist der entscheidende Teil, in dem wir unsere Slots definieren. Wir erhalten die Komponenten für die Hauptproduktseite und den Warenkorb als Props, entsprechend page.js bzw. @cart/page.js.

// app/product/[id]/layout.js
export default function ProductLayout({ children, cart }) {
  return (
    <div style={{ display: 'flex' }}>
      <main style={{ flex: 1 }}>{children}</main>
      <aside style={{ width: '300px', marginLeft: '20px' }}>{cart}</aside>
    </div>
  );
}

In diesem Beispiel verwenden wir ein einfaches Flexbox-Layout, um den Hauptproduktinhalt und die Warenkorb-Sidebar nebeneinander zu positionieren. Die children-Prop wird die gerenderte Ausgabe von app/product/[id]/page.js enthalten, und die cart-Prop wird die gerenderte Ausgabe von app/product/[id]/@cart/page.js enthalten.

4. Produktdetailseite (app/product/[id]/page.js)

Dies ist eine Standardseite mit dynamischer Route, die die Produktdetails basierend auf dem id-Parameter anzeigt.

// app/product/[id]/page.js
export default async function ProductDetails({ params }) {
  const { id } = params;
  // Produktdaten basierend auf ID abrufen
  const product = await fetchProduct(id);

  return (
    <div>
      <h1>Produktdetails</h1>
      <h2>{product.name}</h2>
      <p>{product.description}</p>
      <p>Preis: ${product.price}</p>
    </div>
  );
}

async function fetchProduct(id) {
  // Ersetzen Sie dies durch Ihre tatsächliche Datenabruflogik
  return new Promise(resolve => setTimeout(() => {
    resolve({ id, name: `Produkt ${id}`, description: `Beschreibung von Produkt ${id}`, price: 99.99 });
  }, 500));
}

5. Warenkorb-Komponente (app/product/[id]/@cart/page.js)

Diese Komponente repräsentiert den Warenkorb, der im @cart-Slot gerendert wird.

// app/product/[id]/@cart/page.js
export default function ShoppingCart() {
  return (
    <div>
      <h3>Warenkorb</h3>
      <p>Artikel im Warenkorb: 3</p>
      <button>Zur Kasse</button>
    </div>
  );
}

Erklärung

Wenn ein Benutzer zu /product/123 navigiert, wird Next.js:

  1. Das Root-Layout (app/layout.js) rendern.
  2. Das Produkt-Layout (app/product/[id]/layout.js) rendern.
  3. Innerhalb des Produkt-Layouts die Produktdetails-Komponente (app/product/[id]/page.js) in die children-Prop rendern.
  4. Gleichzeitig die Warenkorb-Komponente (app/product/[id]/@cart/page.js) in die cart-Prop rendern.

Das Ergebnis ist eine Produktdetailseite mit einer persistenten Warenkorb-Sidebar, die alle innerhalb eines einzigen Layouts gerendert werden.

Vorteile der Verwendung von Parallel Routen

Überlegungen und Best Practices

Erweiterte Nutzung: Bedingtes Rendering und Dynamische Slots

Parallel Routen sind nicht auf statische Slot-Definitionen beschränkt. Sie können auch bedingtes Rendering und dynamische Slots verwenden, um noch flexiblere Layouts zu erstellen.

Bedingtes Rendering

Sie können verschiedene Komponenten in einem Slot bedingt rendern, basierend auf Benutzerrollen, Authentifizierungsstatus oder anderen Faktoren.

// app/product/[id]/layout.js
import { getUserRole } from '../../utils/auth';

export default async function ProductLayout({ children, cart }) {
  const userRole = await getUserRole();

  return (
    <div style={{ display: 'flex' }}>
      <main style={{ flex: 1 }}>{children}</main>
      <aside style={{ width: '300px', marginLeft: '20px' }}>
        {userRole === 'admin' ? <AdminPanel /> : cart}
      </aside>
    </div>
  );
}

function AdminPanel() {
  return (
    <div>
      <h3>Admin-Panel</h3>
      <p>Produktdetails hier verwalten.</p>
    </div>
  );
}

In diesem Beispiel wird, wenn der Benutzer die Rolle 'admin' hat, eine AdminPanel-Komponente im @cart-Slot anstelle des Warenkorbs gerendert.

Dynamische Slots

Obwohl seltener, können Sie Slot-Namen theoretisch dynamisch konstruieren, dies wird jedoch aufgrund der Komplexität und potenzieller Leistungsbeeinträchtigungen generell nicht empfohlen. Es ist besser, bei vordefinierten und gut verstandenen Slots zu bleiben. Sollte der Bedarf an dynamischen "Slots" entstehen, ziehen Sie alternative Lösungen in Betracht, wie die Verwendung von Standard-React-Komponenten mit Props und bedingtem Rendering.

Praktische Beispiele und Anwendungsfälle

Fazit

Next.js Parallel Routen sind eine leistungsstarke Funktion, die eine neue Welt von Möglichkeiten für den Bau dynamischer und flexibler Webanwendungen eröffnet. Indem sie es Ihnen ermöglichen, mehrere unabhängige Abschnitte innerhalb desselben Seitenlayouts zu rendern, ermöglichen Parallel Routen Ihnen, ansprechendere Benutzererfahrungen zu schaffen, die Code-Wiederverwendbarkeit zu erhöhen und den Entwicklungsprozess zu vereinfachen. Während es wichtig ist, potenzielle Komplexitäten zu berücksichtigen und Best Practices zu befolgen, kann die Beherrschung von Parallel Routen Ihre Next.js-Entwicklungsfähigkeiten erheblich verbessern und es Ihnen ermöglichen, wirklich innovative Webanwendungen zu erstellen.

Während sich Next.js weiterentwickelt, werden Parallel Routen zweifellos ein immer wichtigeres Werkzeug für Entwickler werden, die die Grenzen des Möglichen im Web ausloten möchten. Experimentieren Sie mit den in diesem Leitfaden beschriebenen Konzepten und entdecken Sie, wie Parallel Routen Ihre Herangehensweise an die Erstellung moderner Webanwendungen transformieren können.