Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Erstellung Einer Gemeinsamen Layout-Komponente | Erstellen von Seiten und Layouts in Next.js
Next.js 14 Mastery Für Den Aufbau Moderner Webanwendungen

bookErstellung Einer Gemeinsamen Layout-Komponente

Entwurf eines Layouts für die gesamte Anwendung. In diesem Szenario wird eine Komponente erstellt, die die Navigation durch die Seiten der Anwendung unterstützt und zudem die Möglichkeit zum Ausloggen bietet (weitere Informationen zur Autorisierung folgen in den nächsten Kapiteln).

Zurück zum Projekt

Nun wird eine layout.tsx für das Dashboard generiert. Im Verzeichnis /dashboard eine neue Datei mit dem Namen layout.tsx anlegen und den folgenden Code einfügen:

In diesem Code finden einige wichtige Aktionen statt. Eine genauere Betrachtung:

  • Die Komponente <SideNav /> wird eingebunden und ist Teil des Layouts. Alle Komponenten, die hier importiert werden, sind Bestandteil des gesamten Seitendesigns;
  • Die Komponente <Layout /> verfügt über eine children-Prop. Dieses "Child" kann entweder eine Seite oder ein weiteres Layout sein. Insbesondere werden die Seiten im Verzeichnis /dashboard automatisch innerhalb eines <Layout /> platziert.

Versuchen Sie nun, dem Link http://localhost:3000/dashboard zu folgen und zwischen der Dashboard- und der Rechnungsseite zu navigieren.

carousel-imgcarousel-img
War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 3

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you explain how the SideNav component works?

What happens if I add more pages to the /dashboard directory?

How does the children prop get populated in this layout?

Awesome!

Completion rate improved to 2.08

bookErstellung Einer Gemeinsamen Layout-Komponente

Swipe um das Menü anzuzeigen

Entwurf eines Layouts für die gesamte Anwendung. In diesem Szenario wird eine Komponente erstellt, die die Navigation durch die Seiten der Anwendung unterstützt und zudem die Möglichkeit zum Ausloggen bietet (weitere Informationen zur Autorisierung folgen in den nächsten Kapiteln).

Zurück zum Projekt

Nun wird eine layout.tsx für das Dashboard generiert. Im Verzeichnis /dashboard eine neue Datei mit dem Namen layout.tsx anlegen und den folgenden Code einfügen:

In diesem Code finden einige wichtige Aktionen statt. Eine genauere Betrachtung:

  • Die Komponente <SideNav /> wird eingebunden und ist Teil des Layouts. Alle Komponenten, die hier importiert werden, sind Bestandteil des gesamten Seitendesigns;
  • Die Komponente <Layout /> verfügt über eine children-Prop. Dieses "Child" kann entweder eine Seite oder ein weiteres Layout sein. Insbesondere werden die Seiten im Verzeichnis /dashboard automatisch innerhalb eines <Layout /> platziert.

Versuchen Sie nun, dem Link http://localhost:3000/dashboard zu folgen und zwischen der Dashboard- und der Rechnungsseite zu navigieren.

carousel-imgcarousel-img
War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 3
some-alt