Concevons une mise en page pour l'ensemble de l'application. Dans ce scénario, nous allons créer un composant qui aide à naviguer à travers les pages de l'application et offre également la possibilité de se déconnecter (plus d'informations sur l'autorisation dans les chapitres à venir).

Retour au Projet

Maintenant, générons un layout.tsx pour le tableau de bord. Dans le dossier /dashboard, introduisez un nouveau fichier nommé layout.tsx et insérez le code suivant :

Dans ce code, quelques actions clés se produisent. Regardons de plus près :

• Nous intégrons le composant <SideNav /> et l'intégrons à notre mise en page. Tous les composants que nous importons ici font partie du design global de la page ;
• Le composant <Layout /> a une prop 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 placées dans un <Layout />.

Maintenant, essayez de suivre le lien http://localhost:3000/dashboard et naviguez entre le tableau de bord et la page des factures.