Gestalten wir ein Layout für die gesamte App. In diesem Szenario erstellen wir eine Komponente, die beim Navigieren durch die Seiten der App hilft und auch die Möglichkeit bietet, sich abzumelden (mehr zur Autorisierung in den kommenden Kapiteln).

Zurück zum Projekt

Nun, lassen Sie uns ein layout.tsx für das Dashboard erstellen. Erstellen Sie innerhalb des /dashboard-Ordners eine neue Datei namens layout.tsx und fügen Sie den folgenden Code ein:

In diesem Code passieren einige wichtige Aktionen. Werfen wir einen genaueren Blick darauf:

• Wir bringen die <SideNav />-Komponente ein und machen sie zu einem Teil unseres Layouts. Alle Komponenten, die wir hier importieren, werden Teil des gesamten Seitendesigns;
• Die <Layout />-Komponente hat eine children-Eigenschaft. Dieses "Kind" kann entweder eine Seite oder ein anderes Layout sein. Insbesondere die Seiten, die sich in /dashboard befinden, werden automatisch innerhalb eines <Layout /> platziert.

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