Opbygning af en Fælles Layoutkomponent

Lad os designe et layout for hele appen. I dette scenarie opretter vi en komponent, der hjælper med navigation gennem appens sider og også giver mulighed for at logge ud (mere om autorisation i kommende kapitler).

Tilbage til projektet

Nu skal vi generere en layout.tsx til dashboardet. Inde i mappen /dashboard skal du oprette en ny fil med navnet layout.tsx og indsætte følgende kode:

I denne kode sker der nogle centrale handlinger. Lad os se nærmere på dem:

• Vi importerer <SideNav />-komponenten og gør den til en del af vores layout. Alle komponenter, vi importerer her, bliver en del af det overordnede sidedesign;
• <Layout />-komponenten har en children-prop. Dette "barn" kan enten være en side eller et andet layout. Specifikt vil siderne placeret i /dashboard automatisk blive indsat i et <Layout />.

Prøv nu at følge linket http://localhost:3000/dashboard og navigér mellem dashboardet og fakturasiden.