Het Vercel-team heeft gekozen voor een eenvoudige benadering van routing. Zij hebben ervoor gekozen om mappen als routes te gebruiken. Dit betekent dat hoe meer mappen je toevoegt aan je app-map, hoe meer routes je krijgt. Daarnaast, als je een nieuwe map aanmaakt binnen een andere map (route), krijg je geneste routes. Om deze concepten beter te begrijpen, raden we aan om naar de onderstaande afbeelding te kijken.

We hebben de mappenstructuur uitgelegd, maar laten we nu ingaan op de bestanden die zich in deze mappen bevinden. Next.js ondersteunt twee verschillende bestandstypen: page.tsx en layout.tsx. Het verschil zit in hun functies:

• layout.tsx fungeert als het bestand dat verantwoordelijk is voor het omvatten van speciale UI-elementen die gedeeld worden over meerdere pagina's;
• Daarentegen beheert page.tsx de UI die specifiek is voor de huidige route en past zich dynamisch aan bij wijzigingen in de URL. Het vormt de visuele weergave die hoort bij de unieke inhoud en functies die relevant zijn voor de betreffende route.

Terug naar het project

Laten we een geneste route aanmaken genaamd /dashboard voor onze applicatie. Volg de onderstaande stappen om dit te realiseren:

1. Maak een nieuwe map dashboard aan in de app-map;
2. Maak in de nieuw aangemaakte map dashboard een nieuw bestand aan genaamd page.tsx;
3. Kopieer en plak de volgende inhoud in het bestand page.tsx.

Na het voltooien van alle benodigde stappen, open de volgende URL http://localhost:3000/dashboard. Je zou nu de aangemaakte pagina moeten zien (de tekst Dashboard Page).

In het volgende hoofdstuk gaan we verder met het werken aan de pagina's. Maak je geen zorgen, we gaan gewoon door.