Vercel-teamet har valgt en enkel tilgang til routing. De har besluttet at bruge mapper som ruter. Det betyder, at jo flere mapper du tilføjer til din app-mappe, desto flere ruter får du. Derudover, hvis du opretter en ny mappe inde i en anden mappe (rute), får du indlejrede ruter. For bedre at forstå disse koncepter anbefales det at se på billedet nedenfor.

Mappestrukturen er nu på plads, men lad os nu se nærmere på filerne, der ligger i disse mapper. Next.js understøtter to forskellige filtyper: page.tsx og layout.tsx. Forskellen ligger i deres funktioner:

• layout.tsx fungerer som filen, der omslutter særlige UI-elementer, som deles på tværs af flere sider;
• Omvendt håndterer page.tsx det UI, der er specifikt for den aktuelle rute, og tilpasser sig dynamisk til ændringer i URL'en. Den repræsenterer den visuelle fremstilling, der er forbundet med det unikke indhold og de funktioner, der er relevante for den pågældende rute.

Tilbage til projektet

Opret en indlejret rute kaldet /dashboard til applikationen. Følg nedenstående trin for at gøre dette:

1. Opret en ny mappe med navnet dashboard inde i app-mappen;
2. Inde i den nyoprettede dashboard-mappe oprettes en ny fil kaldet page.tsx;
3. Kopiér og indsæt følgende indhold i filen page.tsx.

Når alle nødvendige trin er gennemført, åbnes følgende URL http://localhost:3000/dashboard. Du bør nu se den oprettede side (Dashboard Page tekst).

I det følgende kapitel fortsættes arbejdet med siderne. Bare rolig, vi fortsætter stadig.