Next.js App Router Complete Guide 2026: Server Components, Layouts, and Data Fetching

The Next.js App Router changed everything. If you're still on Pages Router, it's time to migrate. Here's everything you need to know. App Router vs Pages Router The fundamental difference: App Router uses React Server Components by default . app/ ├── layout.tsx # Root layout (always server component) ├── page.tsx # Home page ├── about/ │ └── page.tsx # /about ├── blog/ │ ├── layout.tsx # Blog-specific layout │ ├── page.tsx # /blog │ └── [slug]/ │ └── page.tsx # /blog/[slug] └── api/ └── users/ └── route.ts # API endpoint Server Components (Default) Server components run on the server. They can fetch data directly: // app/blog/page.tsx — Server Component (no 'use client' needed) async function BlogPage () { // Direct database query — no useEffect needed! const posts = await db . query ( ' SELECT * FROM posts ORDER BY created_at DESC ' ); return ( < div > { posts . map ( post => ( < article key = { post . id } > < h2 > { post . title } </ h2 > < p > { post . excerpt } </ p > </ article >