Block 05 · FULL-STACK REACT PATH
Next.js
The second half of the imported React course: routing, rendering, server components, APIs, and deployment.
Progress one module at a time
Course map
- Module 014 activities
Getting Started with Next.js
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.
LessonQuizExerciseProject - Module 024 activities
Routing & Navigation
File-based routing maps folder names directly to URL segments — a `[slug]` folder becomes a dynamic segment, `[...path]` becomes a catch-all.
LessonQuizExerciseProject - Module 034 activities
Layouts & Assets
A root `layout.jsx` is required — it wraps every page and is the one place that renders `<html>` and `<body>`.
LessonQuizExerciseProject - Module 044 activities
Static Generation
Pages are built at `npm run build` time and served as static HTML — ultra-fast, CDN-cacheable.
LessonQuizExerciseProject - Module 054 activities
Server-Side Rendering
When you opt out of caching, Next.js renders the page fresh on every request — perfect for personalized or real-time data.
LessonQuizExerciseProject - Module 064 activities
Route Handlers
A `route.js` (or `.ts`) file defines an API endpoint — each exported function name IS the HTTP method it handles (`GET`, `POST`, `DELETE`, ...).
LessonQuizExerciseProject - Module 074 activities
Server & Client Components
App Router has two component types. Server Components (default) run on the server. Client Components (`'use client'`) run in the browser with interactivity.
LessonQuizExerciseProject - Module 084 activities
Data Fetching & Streaming
A Server Component can `await` data directly inside its own body — no `useEffect` or loading state needed.
LessonQuizExerciseProject - Module 094 activities
TypeScript + Next.js
Rename files to `.tsx` and TypeScript errors appear in the terminal and browser overlay — zero config needed.
LessonQuizExerciseProject - Module 104 activities
Deployment & Production
Vercel is built by the Next.js team — zero-config deployment with automatic CI/CD on every push to your repository.
LessonQuizExerciseProject - Module 115 activities
Database & Data Modeling
Design server-side data access, schemas, migrations, transactions, pagination, and clear repository boundaries.
LessonQuizExerciseReviewProject - Module 125 activities
Authentication & Authorization
Implement sessions, protected routes, server-side authorization, ownership checks, and secure account flows.
LessonQuizExerciseReviewProject - Module 135 activities
Caching, Revalidation & Performance
Choose static, dynamic, cached, and revalidated behavior intentionally while measuring real page performance.
LessonQuizExerciseReviewProject - Module 145 activities
Next.js Testing Strategy
Test domain logic, components, server actions, route handlers, database boundaries, and critical browser journeys.
LessonQuizExerciseReviewProject - Module 155 activities
Security & Observability
Validate boundaries, protect secrets, apply secure headers and rate limits, log structured events, and monitor production failures.
LessonQuizExerciseReviewProject - Module 165 activities
Next.js Mastery Capstone
Combine App Router architecture, database data, auth, caching, APIs, testing, security, observability, and deployment.
LessonQuizExerciseReviewProject