Laten we een lay-out ontwerpen voor de gehele app. In dit scenario maken we een component dat helpt bij het navigeren door de pagina's van de app en tevens de mogelijkheid biedt om uit te loggen (meer over autorisatie in de komende hoofdstukken).

Terug naar het project

Laten we nu een layout.tsx genereren voor het dashboard. Maak binnen de map /dashboard een nieuw bestand aan met de naam layout.tsx en voeg de volgende code toe:

In deze code vinden een aantal belangrijke acties plaats. Laten we deze nader bekijken:

• We importeren de <SideNav />-component en maken deze onderdeel van onze lay-out. Alle componenten die we hier importeren, worden onderdeel van het algemene paginadesign;
• De <Layout />-component heeft een children-prop. Dit "child" kan een pagina of een andere lay-out zijn. Concreet worden de pagina's die zich in /dashboard bevinden automatisch binnen een <Layout /> geplaatst.

Probeer nu de link http://localhost:3000/dashboard te volgen en navigeer tussen de dashboard- en de facturenpagina.