Why this lesson matters

Understand app router basics and use it correctly in an App Router project. The App Router maps folders to route segments while page and layout files define UI and shared structure; nesting is part of the URL and rendering model.

How to reason about it

  • For App Router Basics, the outcome to verify is: A folder represents a route segment and page.tsx supplies that route UI.
  • In App Router Basics, keep this failure controlled: Adding folders without understanding whether they create URL segments can produce accidental routes and duplicated layouts.
  • App Router Basics practice target: Build a nested dashboard route with a shared layout and verify which UI persists while navigating between child pages.
Diagram

App Router structure

Practical walkthrough

In the App Router Basics walkthrough: A folder represents a route segment and page.tsx supplies that route UI.

app/dashboard/page.tsxtsx
export default function DashboardPage() {
  return <main><h1>Dashboard</h1></main>;
}

Practice it yourself

Practice

App Router Basics exercise

Build a nested dashboard route with a shared layout and verify which UI persists while navigating between child pages.

  • Record the expected result before execution
  • Test one valid path and one lesson-specific failure path
  • Explain in two lines which boundary owns the decision

Summary