What is the App Router?
Next.js introduced the App Router in version 13 as a fundamental shift in how you build React applications. Instead of the pages directory, you now use an app directory where every folder becomes a route segment and every page.tsx file becomes a publicly accessible page.
Server Components by Default
The biggest change is that all components in the App Router are React Server Components by default. This means they run on the server, have zero impact on your JavaScript bundle, and can directly access databases and server-side resources.
// This runs on the server — no useEffect, no loading states
export default async function Page() {
const data = await fetch('https://api.example.com/data')
const json = await data.json()
return <div>{json.title}</div>
}Layouts and Nested Routing
Layouts allow you to share UI between routes without re-rendering. A layout.tsx file wraps all pages at and below its level in the directory tree.
// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
return (
<div>
<Sidebar />
<main>{children}</main>
</div>
)
}Loading and Error States
Special files like loading.tsx and error.tsx give you automatic Suspense boundaries and error boundaries without any manual wiring. Drop them in a folder and Next.js handles the rest.
When to Use Client Components
Add the "use client" directive only when you need interactivity — event handlers, state, browser APIs. Keep them as leaf nodes in your component tree to minimize the client-side bundle.