The App Router Mental Model Understand route segments, pages, layouts, special files, and the rendered route tree before building more UI.
The App Router Mental Model The App Router is not a list of magic filenames. It is a file-system model that turns directories into route segments and special files into pieces of the rendered route tree.
Routes come from folders src/app/ |-- layout.tsx -> shared root layout |-- page.tsx -> / |-- projects/ | `-- page.tsx -> /projects `-- settings/ `-- page.tsx -> /settings
A folder becomes a URL segment when a page exists beneath it. The route is not created by the folder name alone; page.tsx provides the route UI.
app root
wraps route segment
layout.tsx page.tsx -> / projects/
route
page.tsx -> /projects
page.tsx A page is the UI exposed at a route. In this course, pages should usually compose feature components rather than contain every visual element and behavior inline.
layout.tsx A layout wraps child route content and persists across navigation within its segment. The root layout is required and owns the html/body shell. Nested layouts let areas share navigation or framing without duplicating markup.
Why layouts matter beyond convenience • They encode shared UI structure into the route hierarchy. • They reduce duplicated navigation and shell markup. • They create stable boundaries where state can be preserved across navigation. • They make route ownership visible from the filesystem.
page.tsx Route UI
layout.tsx Persistent shared UI around descendants
loading.tsx Route-segment pending UI
error.tsx Error boundary UI for a segment; requires client behavior
not-found.tsx Not-found UI
template.tsx Layout-like wrapper that remounts on navigation; use only when needed
route.ts HTTP route handler; not our primary business API in this course
Important boundary Next.js route handlers exist, but TaskFlow will use NestJS for the authoritative application API. We will not create duplicate business logic in route.ts just because the framework can host server code.
Route groups and private folders Later, parentheses can group routes without adding URL segments, and underscore-prefixed private folders can organize implementation details without becoming routes. Do not introduce these until the file tree needs them.
Dynamic routes - concept preview src/app/projects/[projectId]/page.tsx
URL: /projects/42 projectId: "42"
The brackets represent a dynamic segment. We will use them later when projects and tasks come from the API. Phase 03 only needs the mental model.
Rendering tree versus URL The URL tells you which route segments are active. The rendered tree combines each active layout with the leaf page. This is why layout placement is an architectural choice, not only a styling decision.
children
children
Checkpoint questions • What makes /projects exist?
• Why is layout.tsx different from a shared Header component? • Why might a nested layout be preferable to copying a sidebar into three pages? • Why are route handlers intentionally not our main backend in this architecture?
Next.js is useful only when you can explain what runs on the server, what crosses into the browser, and which route owns a user-visible state.
Restate the goal of “App Router Mental Model” as one observable behavior. Write the success signal before touching code.
Trace the boundary map: route → Server Component → client boundary → request/data source → rendered UI. Mark the one boundary this lesson changes.
Inspect the current repository state and record the exact files, route, table, or runtime involved. Avoid creating an abstraction before you can name the existing owner.
Implement the smallest vertical slice. Add one coherent change, run the narrowest verification command, and read the output before continuing.
Connect the slice to TaskFlow’s phase artifact: A navigable TaskFlow web shell with route groups/layouts, server-first composition, selective client interactivity, and verified environment handling.. Verify behavior from the outside as a user or API client would.
Create one controlled failure that is safe to reproduce. Predict the symptom first, capture evidence, locate the earliest broken boundary, then fix only that cause.
Close the reference and rebuild or explain the core change from memory. Record what you would monitor or test before trusting the same change in production.
// app/tasks/page.tsx
import { TaskList } from "./task-list";
export default async function TasksPage() {
const tasks = await loadTasks();
return <TaskList initialTasks={tasks} />;
}Do not copy this as a finished answer. Predict what each boundary does, type the smallest useful slice, run it, then compare the result with your prediction.
Locate the first browser-only API or stateful hook and move the client boundary to the smallest component that needs it.
Verify route params, fetch location, cache behavior, and the exact server response before changing JSX.
Without copying the final source, create a second small scenario that applies “App Router Mental Model” to a different TaskFlow resource or input. Write the acceptance criteria first, implement it, and provide the evidence that each criterion is satisfied.
Create nested routes and a shared layout, then predict which layouts persist across navigation.
Use the smallest change that demonstrates this lesson. Stop after it works and capture evidence.Accessing browser APIs from Server Components
Predict the symptom before causing the failure. Then locate the earliest boundary where reality diverges from expectation.Why does this responsibility live here, what input does it trust, what output proves success, and what would go wrong if another layer owned it?
If your explanation is vague, repeat the boundary trace before moving on.Close the reference. Reproduce the core idea from memory or explain the exact request/data flow aloud. Then check your diff or notes for accidental shortcuts that bypass validation, authorization, error handling, or verification earned in earlier phases.