Learn in blocks. Build after every lesson.

Next.js is a full-stack React framework by Vercel that adds server-side rendering, file-based routing, API routes, and built-in optimizations — zero config.

File-based routing maps folder names directly to URL segments — a `[slug]` folder becomes a dynamic segment, `[...path]` becomes a catch-all.

A root `layout.jsx` is required — it wraps every page and is the one place that renders `<html>` and `<body>`.

Pages are built at `npm run build` time and served as static HTML — ultra-fast, CDN-cacheable.

When you opt out of caching, Next.js renders the page fresh on every request — perfect for personalized or real-time data.

A `route.js` (or `.ts`) file defines an API endpoint — each exported function name IS the HTTP method it handles (`GET`, `POST`, `DELETE`, ...).

App Router has two component types. Server Components (default) run on the server. Client Components (`'use client'`) run in the browser with interactivity.

A Server Component can `await` data directly inside its own body — no `useEffect` or loading state needed.

Rename files to `.tsx` and TypeScript errors appear in the terminal and browser overlay — zero config needed.

Vercel is built by the Next.js team — zero-config deployment with automatic CI/CD on every push to your repository.

Design server-side data access, schemas, migrations, transactions, pagination, and clear repository boundaries.

Implement sessions, protected routes, server-side authorization, ownership checks, and secure account flows.

Choose static, dynamic, cached, and revalidated behavior intentionally while measuring real page performance.

Test domain logic, components, server actions, route handlers, database boundaries, and critical browser journeys.

Validate boundaries, protect secrets, apply secure headers and rate limits, log structured events, and monitor production failures.

Combine App Router architecture, database data, auth, caching, APIs, testing, security, observability, and deployment.