Next.js — Beginner

Next.js — Build the App You Deploy: 7 topics and 30 interactive cards with runnable examples and quizzes.

Topics

1. What Next.js Adds — The Gap React Leaves · Server-First, and Why It Matters Here · The Shape of a Project · Check Yourself
2. Routes Are Folders — A Folder Plus page.tsx Is a URL · Layouts Wrap Pages · Dynamic Routes · Linking Between Pages · Not Found, and Loading
3. Server and Client — Server Components Are the Default · When You Need the Browser · Choosing Between Them · Fix the Bug
4. Getting Data Onto the Page — fetch in a Server Component · Caching, and the Setting That Bites · Handling the Empty Case · Check Yourself
5. Your Own API — Route Handlers · Reading a Request Body · Status Codes That Mean Something · Do You Even Need One?
6. Talking to Postgres — A Real Database, Not a File · Never Build SQL With + · Secrets Live in the Environment · Closing the Loop · Check Yourself
7. The Project — An Order Tracker That Persists · Try to Break It · What Makes This Portfolio-Ready · Check Yourself