Foundations
Folders are routes
Lesson 1 of 3
What you'll learn
- Map folders to URL segments
- Recognize the special files (
page,layout,loading,error) - Predict what renders for a given URL
In the App Router, the folder structure is the routing table. Each folder under app/ is a URL segment, and a small set of special files defines what that segment renders:
app/
layout.tsx → wraps everything (persistent chrome)
page.tsx → "/"
dashboard/
page.tsx → "/dashboard"
courses/
page.tsx → "/courses"
[courseSlug]/
page.tsx → "/courses/:courseSlug"
page.tsx is the leaf UI for a URL. layout.tsx wraps a segment and everything nested under it. [courseSlug] is a dynamic segment — it matches any value and hands it to you as a param.
Read the tree, predict the screen
Once folders mean routes, you can open a repo you've never seen and know what /courses/react renders without running it: the courses/[courseSlug]/page.tsx, wrapped by every layout.tsx above it.
The challenge resolves a URL against a route table — the same lookup the router does. Run it.
Run it. Static segments win; a [dynamic] segment matches anything and captures the value.
Next: how layouts and pages split the work.
Sign in to save your progress across devices.