Progettiamo un layout per l'intera applicazione. In questo scenario, creeremo un componente che facilita la navigazione tra le pagine dell'app e offre anche l'opzione di disconnessione (ulteriori dettagli sull'autorizzazione nei prossimi capitoli).

Ritorno al progetto

Ora, generiamo un file layout.tsx per la dashboard. All'interno della cartella /dashboard, crea un nuovo file chiamato layout.tsx e inserisci il seguente codice:

In questo codice avvengono alcune azioni chiave. Analizziamole più da vicino:

• Stiamo importando il componente <SideNav /> e lo rendiamo parte del nostro layout. Qualsiasi componente importato qui diventa parte del design complessivo della pagina;
• Il componente <Layout /> possiede una prop children. Questo "figlio" può essere una pagina o un altro layout. In particolare, le pagine presenti in /dashboard verranno automaticamente inserite all'interno di <Layout />.

Ora, prova a seguire il link http://localhost:3000/dashboard e naviga tra la pagina dashboard e la pagina delle fatture.