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.