Concevons une mise en page pour l'ensemble de l'application. Dans ce contexte, nous allons créer un composant qui facilite la navigation entre les pages de l'application et offre également la possibilité de se déconnecter (plus d'informations sur l'autorisation dans les prochains chapitres).

Retour au projet

Créons maintenant un fichier layout.tsx pour le tableau de bord. Dans le dossier /dashboard, ajoutez un nouveau fichier nommé layout.tsx et insérez le code suivant :

Dans ce code, plusieurs actions clés sont réalisées. Examinons-les de plus près :

• Nous intégrons le composant <SideNav /> et l'ajoutons à notre mise en page. Tous les composants importés ici font partie de la structure globale de la page ;
• Le composant <Layout /> possède une propriété children. Cet « enfant » peut être soit une page, soit une autre mise en page. Plus précisément, les pages situées dans /dashboard seront automatiquement insérées dans un <Layout />.

Essayez maintenant de suivre le lien http://localhost:3000/dashboard et de naviguer entre la page du tableau de bord et la page des factures.