Next.js App Router — A Practical Guide

Why the App Router

The App Router, introduced in Next.js 13, is now the default way to build Next.js applications. It uses React Server Components by default, which gives you smaller bundles, streaming, and a new mental model for data fetching.

If you're still on the Pages Router, the good news is you can migrate route by route — they can live side by side in the same project.

Folder Structure

Every folder under app/ maps to a route. The special files inside determine what renders.

• page.tsx — the route's UI
• layout.tsx — wraps the page and all nested routes
• loading.tsx — shown while the page is streaming
• error.tsx — error boundary
• not-found.tsx — 404 for this segment

Server Components by Default

In the App Router, every component is a Server Component unless you mark it "use client". Server Components run on the server, never ship to the browser, and can fetch data directly without useEffect.

// app/products/page.tsx — Server Component
import { getProducts } from "@/lib/db";

export default async function ProductsPage() {
  const products = await getProducts();
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

When to Use Client Components

You need