Next.js 14 — App Router
AdvancedServer Components, SSR/SSG/ISR/CSR, Layouts, Route Handlers, Server Actions, Middleware & more
Why Next.js?
Next.js is a React framework that adds file-based routing, server-side rendering, static generation, API routes, image optimization, and much more out of the box. The App Router (v13+) introduces React Server Components as the default, enabling a new mental model for data fetching and performance.File-system Routing & Special Files
beginnerNext.js App Router uses the file system for routing. Each folder becomes a route segment. Special filenames have reserved roles.
Server vs Client Components
intermediateThe most important mental model in App Router. Server Components run ONLY on the server. Client Components run on both server (SSR) and client.
Rendering Strategies — SSG / SSR / ISR / CSR
intermediateNext.js automatically determines rendering strategy based on your data fetching approach. No configuration needed — just fetch differently.
Layouts, Templates & Nested Routing
intermediateLayouts persist across navigations (state preserved). Templates re-mount. Parallel routes enable simultaneous UI segments on one page.
Server Actions — Write Operations from Components
advancedServer Actions are async functions that run on the server. Call them directly from forms or event handlers. No API route needed.
Route Handlers, Middleware & Next.js APIs
advancedRoute Handlers replace the pages/api directory. Middleware runs at the Edge before requests. Built-in Image, Font, and Script optimization.