File-based routing and nested layouts, simulated
A model of what the App Router does with your folders (the real one also handles route groups, parallel routes and more). Click layout clicks, then switch pages: the count stays, because the same layout stays mounted around a different page.
Next.js is the most used React framework: in its App Router, folders inside app/ are URL segments, special files (page, layout, loading, error, not-found) build each route's UI, components are server components unless a file says "use client", and next/link and next/image handle fast navigation and optimised images.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write the files for a docs section with URLs /docs and /docs/<topic>, a shared sidebar layout, and a loading state.
Write a not-found.tsx and the code in app/docs/[topic]/page.tsx that shows it for unknown topics.
Explain it without notes
How does file-based routing work in the App Router? Include dynamic segments.
What is the difference between a layout, a template and a page?
What do loading.tsx and error.tsx do under the hood?
When does a component in a Next.js app need "use client"?
What does next/link add over a plain <a>, and what does next/image add over <img>?
Preview
Console
Nothing logged yet.Expected console output
/ -> app/page {}
/blog -> app/blog/page {}
/blog/hello-next -> app/blog/[slug]/page {"slug":"hello-next"}