Vercel-teamet har valgt en enkel tilnærming til ruting. De har bestemt seg for å bruke mapper som ruter. Dette betyr at jo flere mapper du legger til i app-mappen, desto flere ruter får du. I tillegg, hvis du oppretter en ny mappe inne i en annen mappe (rute), får du nestede ruter. For å forstå disse konseptene bedre, anbefaler vi å se på bildet nedenfor.

Vi har nå gått gjennom mappestrukturen, men la oss nå se nærmere på filene som ligger i disse mappene. Next.js støtter to ulike filtyper: page.tsx og layout.tsx. Forskjellen ligger i deres roller:

• layout.tsx fungerer som filen som kapsler inn spesielle UI-elementer som deles på tvers av flere sider;
• page.tsx har derimot ansvaret for UI-et som er spesifikt for den aktuelle ruten, og tilpasser seg dynamisk til endringer i URL-en. Den representerer det visuelle uttrykket knyttet til det unike innholdet og funksjonene som gjelder for den aktuelle ruten.

Tilbake til prosjektet

Vi skal nå opprette en nestet rute kalt /dashboard for applikasjonen vår. Følg trinnene nedenfor for å gjøre dette:

1. Opprett en ny mappe med navnet dashboard inne i app-mappen;
2. Inne i den nye dashboard-mappen, opprett en ny fil som heter page.tsx;
3. Kopier og lim inn følgende innhold i page.tsx-filen.

Etter å ha fullført alle nødvendige trinn, åpne følgende URL http://localhost:3000/dashboard. Du skal nå se den opprettede siden (Dashboard Page tekst).

I neste kapittel fortsetter vi arbeidet med sidene. Men ikke bekymre deg, vi fortsetter videre.