Vercel-teamet har valt en enkel metod för routing. De har beslutat att använda mappar som rutter. Det innebär att ju fler mappar du lägger till i din app-mapp, desto fler rutter får du. Dessutom, om du skapar en ny mapp inuti en annan mapp (rutt), får du nästlade rutter. För att bättre förstå dessa koncept rekommenderar vi att du tittar på bilden nedan.

Vi har ordnat mappstrukturen, men nu ska vi titta närmare på filerna som finns i dessa mappar. Next.js hanterar två olika filtyper: page.tsx och layout.tsx. Skillnaden ligger i deras roller:

• layout.tsx fungerar som filen som kapslar in speciella UI-element som delas mellan flera sidor;
• Däremot ansvarar page.tsx för det UI som är specifikt för den aktuella rutten och anpassar sig dynamiskt efter URL-förändringar. Den representerar den visuella framställningen av det unika innehållet och de funktioner som är relevanta för den aktuella rutten.

Tillbaka till projektet

Skapa en nästlad rutt som heter /dashboard för vår applikation. Följ stegen nedan för att genomföra detta:

1. Skapa en ny mapp som heter dashboard inuti app-mappen;
2. Skapa en ny fil som heter dashboard i den nyskapade page.tsx-mappen;
3. Kopiera och klistra in följande innehåll i filen page.tsx.

När alla nödvändiga steg är slutförda, öppna följande URL http://localhost:3000/dashboard. Du bör se den skapade sidan (Dashboard Page text).

I nästa kapitel fortsätter vi vårt arbete med sidorna. Men oroa dig inte, vi fortsätter fortfarande.