App Router Architecture
The App Router is Next.js's modern routing system, introduced in Next.js 13. It represents a fundamental shift in how Next.js applications are structured, built on React Server Components.
The app Directory
Everything starts with the app directory at your project root:
app/
├── layout.tsx # Root layout (wraps entire app)
├── page.tsx # Home page (/)
├── globals.css # Global styles
├── about/
│ └── page.tsx # About page (/about)
└── blog/
├── layout.tsx # Blog layout (wraps blog pages)
├── page.tsx # Blog index (/blog)
└── [slug]/
└── page.tsx # Dynamic blog post (/blog/my-post)
Special Files
The App Router uses special file conventions:
| File | Purpose |
|---|---|
page.tsx | Unique UI for a route, makes it publicly accessible |
layout.tsx | Shared UI that wraps pages and child layouts |
loading.tsx | Loading UI shown while page content loads |
error.tsx | Error UI for catching errors in a subtree |
not-found.tsx | UI for 404 errors |
route.ts | API endpoint (Route Handler) |
template.tsx | Like layout, but remounts on navigation |
Layouts: The Power Feature
Layouts persist across navigations, preserving state and avoiding re-renders:
// app/layout.tsx - Root Layout (required)
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<nav>Site Navigation</nav>
{children}
<footer>Site Footer</footer>
</body>
</html>
)
}
Nested layouts compose automatically:
// app/dashboard/layout.tsx
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<div className="dashboard">
<Sidebar />
<main>{children}</main>
</div>
)
}
Quiz: Test Your Understanding
Key Mental Model
Think of the App Router like a tree:
- Root Layout is the trunk (required, wraps everything)
- Nested Layouts are branches (optional, wrap subtrees)
- Pages are leaves (the actual content)
When you navigate, React only re-renders the parts that changed. Layouts above remain mounted.
Metadata
Every page can export metadata for SEO:
// Static metadata
export const metadata = {
title: 'My Page',
description: 'Page description',
}
// Dynamic metadata
export async function generateMetadata({ params }) {
const post = await getPost(params.slug)
return {
title: post.title,
description: post.excerpt,
}
}
Summary
- The App Router uses file-system conventions for routing
page.tsxmakes routes accessible,layout.tsxprovides shared UI- Layouts persist across navigation, preserving state
- Special files like
loading.tsxanderror.tsxhandle common UI patterns - Metadata can be static or dynamically generated