LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 816 min read

The App Router

Understand the App Router — the routing and rendering system built around React Server Components.

What Is the App Router?

The App Router is the routing system built around the app/ directory. Instead of configuring routes in a file, you express them through folder structure: every folder is a URL segment, and a page.tsx inside it makes that segment visitable.

Request comes in
↓
Next.js matches the URL to a folder path in app/
↓
Matching layout.tsx files wrap the page
↓
page.tsx renders
↓
HTML (and/or a stream) is sent to the browser

Route Segments

Each folder between app/ and a page.tsx is called a route segment, and it maps directly to a segment of the URL path.

app/
├── page.tsx           →  /
├── about/
│   └── page.tsx       →  /about
└── blog/
    └── page.tsx        →  /blog

Special Files Reserved by the App Router

FileRole
page.tsxUnique UI for a route, and what makes the segment public.
layout.tsxShared UI that wraps a segment and its children, and persists across navigation.
template.tsxLike layout, but re-mounts on every navigation instead of persisting.
loading.tsxAutomatic loading UI, shown via React Suspense while the segment loads.
error.tsxAutomatic error boundary UI for the segment.
not-found.tsxUI shown when notFound() is called or a segment doesn't match.
route.tsA Route Handler — defines an API endpoint instead of a page.
Colocation

You can put components, tests, and styles inside a route's folder alongside page.tsx — only files with these exact reserved names become special. Everything else is just a regular file the router ignores.

App Router vs Pages Router

Pages Router (pages/)

  • Every file in pages/ is a route
  • Data fetching via getServerSideProps / getStaticProps
  • Components are Client Components by default
  • One _app.tsx wraps every page

App Router (app/)

  • Folder + page.tsx makes a route
  • Data fetching via async Server Components + fetch
  • Components are Server Components by default
  • Nested layout.tsx files wrap each segment

Common Beginner Mistakes

Forgetting that a folder needs page.tsx to be visitable

A folder full of components with no page.tsx is invisible to visitors — it has no URL of its own.

Mixing up layout.tsx and template.tsx

layout.tsx persists state across navigations within it; template.tsx re-creates itself every time — pick based on whether you want state preserved.

FAQs

Yes, temporarily — Next.js supports both simultaneously, which is how existing projects migrate incrementally. New projects should just use app/.

No — the App Router replaces that entirely. Routing is driven by your folder structure.

Summary

The App Router turns folder structure into routing, and reserves a small set of special file names for layouts, loading states, and errors. Next, you'll dig deeper into file-based routing conventions.

Next Lesson →

File-based Routing