Stage 2 · Lesson 7 of 8
App Router pages, layouts and navigation
In the , folders inside app/ become parts of the . A page.tsx file makes that folder a public page. So app/projects/page.tsx serves /projects.
app/projects/[id]/page.tsx serves /projects/42, and the page receives 42 as its id param. A layout.tsx file wraps every page below it. It stays on screen while users move between those pages, so a sidebar keeps its state.
Some special files handle common situations. loading.tsx shows while a page is still loading. error.tsx catches errors in that part of the site.
not-found.tsx shows when your code calls notFound(). Move between pages with the Link component, so can load pages ahead of time and skip a full reload. Check the current docs for your version, since params became asynchronous in recent releases.
A question to check yourself, an AI practice session and 1 cheat sheet entry come with the full roadmap. Unlock
Resources for this stage
Start with· follow one of these
- GuideFreeReact Documentation
Meta
Free official course; Thinking in React and Managing State matter most
- CourseFreeNext.js Learn
Vercel · Intermediate
Free official course: the first chapters build pages, layouts and navigation