Before you begin
Prerequisites
Hidden — select the eye to show
Block 05 · FULL-STACK REACT PATH
Next.js
The second half of the imported React course: routing, rendering, server components, APIs, and deployment.
16 modules70 activitiesAbout 55 hoursIntermediate to advancedLesson → Quiz → Exercise → Project
What you will master
Course outcomes
Hidden — select the eye to show
Final proof of skill
Mastery capstone
Hidden — select the eye to show
Completion standard
Earn the Mastery title
Hidden — select the eye to show
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.
LessonQuizExerciseProjectStart module - Module 024 activities
Routing & Navigation
File-based routing:
LessonQuizExerciseProjectStart module - Module 034 activities
Layouts & Assets
// app/layout.jsx — Root layout (required)
LessonQuizExerciseProjectStart module - Module 044 activities
Static Generation
Pages are built at npm run build time and served as static HTML — ultra-fast, CDN-cacheable.
LessonQuizExerciseProjectStart module - 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.
LessonQuizExerciseProjectStart module - Module 064 activities
Route Handlers
// app/api/users/route.js
LessonQuizExerciseProjectStart module - Module 074 activities
Server & Client Components
App Router has two component types. Server Components (default) run on the server. Client Components run in the browser with interactivity.
LessonQuizExerciseProjectStart module - Module 084 activities
Data Fetching & Streaming
// Await data directly in JSX — no useEffect needed
LessonQuizExerciseProjectStart module - Module 094 activities
TypeScript + Next.js
Rename files to .tsx and TypeScript errors appear in the terminal and browser overlay — zero config needed.
LessonQuizExerciseProjectStart module - Module 104 activities
Deployment & Production
Vercel is built by the Next.js team — zero-config deployment with automatic CI/CD on every push.
LessonQuizExerciseProjectStart module - Module 115 activities
Database & Data Modeling
Design server-side data access, schemas, migrations, transactions, pagination, and clear repository boundaries.
LessonQuizExerciseReviewProjectStart module - Module 125 activities
Authentication & Authorization
Implement sessions, protected routes, server-side authorization, ownership checks, and secure account flows.
LessonQuizExerciseReviewProjectStart module - Module 135 activities
Caching, Revalidation & Performance
Choose static, dynamic, cached, and revalidated behavior intentionally while measuring real page performance.
LessonQuizExerciseReviewProjectStart module - Module 145 activities
Next.js Testing Strategy
Test domain logic, components, server actions, route handlers, database boundaries, and critical browser journeys.
LessonQuizExerciseReviewProjectStart module - Module 155 activities
Security & Observability
Validate boundaries, protect secrets, apply secure headers and rate limits, log structured events, and monitor production failures.
LessonQuizExerciseReviewProjectStart module - Module 165 activities
Next.js Mastery Capstone
Combine App Router architecture, database data, auth, caching, APIs, testing, security, observability, and deployment.
LessonQuizExerciseReviewProjectStart module