Next.js Mastery
Master Next.js — app router, server components, data fetching, API routes, rendering strategies, caching, and deployment. 16 phases from setup to production-grade React applications.
Your Progress
Complete all 16 phases to master this track
Master Next.js — app router, server components, data fetching, API routes, rendering strategies, caching, and deployment. 16 phases from setup to production-grade React applications.
Phase 1: Project Setup and File Conventions
Scaffold a Next.js app and learn what each default file and folder is responsible for.
Scaffolding with create-next-app
Generate a project with routing, TypeScript, and styling preconfigured.
App Directory Conventions
Understand which files create routes, layouts, and shared code.
Environment Variables
Configure secrets for server and client without leaking them.
next.config Options
Adjust build behavior, redirects, and image domains in config.
Phase 2: App Router, Layouts, and Pages
Compose pages from nested layouts that persist across client-side navigation.
App Router Fundamentals
Turn folders into URL segments without route configuration files.
Root Layouts
Wrap every route in a shell that owns html and body tags.
Nested Layouts
Stack per-section layouts that keep state between visits.
loading.tsx and error.tsx Files
Show instant feedback and recoverable fallbacks per segment.
Handling Missing Routes
Render a 404 view for unknown URLs and missing records.
Phase 3: Server and Client Components
Choose the right rendering side for each component and pass data safely across the boundary.
Server Components by Default
Render components on the server for zero client JavaScript.
The use client Directive
Mark the boundary below which code runs in the browser.
Crossing the Client Boundary
Compose interactive islands inside server-rendered trees.
Props Serialization Constraints
Understand which values can cross from server to client.
Phase 4: File-Based and Advanced Routing
Capture URL parameters and build complex navigation patterns with special route files.
Dynamic Route Segments
Match any value in a URL position with bracket folders.
Reading Route Params
Await async params in pages, layouts, and server code.
Catch-All and Optional Segments
Match one or many remaining path pieces with one file.
Route Groups and Private Folders
Organize files without affecting the emitted URL.
Parallel and Intercepting Routes
Render multiple zones and modal-style route previews.
Phase 5: Data Fetching and Caching
Load data on the server and decide exactly when each result is reused or refreshed.
Fetching Data in Async Components
Await fetch directly inside server components.
Request Memoization and the Data Cache
Understand when identical fetch calls are reused.
Revalidation with Time and Tags
Refresh cached data on a schedule or on demand.
Client-Side Fetching with SWR
Load data interactively with caching and revalidation.
Suspense and Loading States
Stream fallbacks while slow data resolves.
Phase 6: Server Actions and Forms
Write mutations that run on the server and wire forms directly to them without API routes.
Defining Server Actions
Create mutation functions marked with use server.
Progressive Forms with Actions
Submit forms that work before any client JavaScript loads.
Tracking Form State with useActionState
Expose pending, success, and error states during submission.
Validating Action Input
Check server-side input with schemas before mutating.
Optimistic UI Updates
Reflect changes instantly while the server confirms.
Phase 7: Route Handlers and APIs
Expose JSON endpoints, secure them with sessions, and verify webhook payloads safely.
Creating GET and POST Handlers
Export per-method functions from a route file.
Handling Request Methods
Read bodies, headers, and cookies from the Request.
Protecting Endpoints with Sessions
Verify credentials before handling any API request.
Verifying Webhook Signatures
Confirm payloads really came from the expected provider.
Streaming Responses
Send large or live payloads incrementally to clients.
Phase 8: Rendering Strategies: SSR, SSG, and ISR
Pick how each route is rendered and control when it regenerates.
Server Rendering per Request
Rebuild HTML on every request for fresh dynamic data.
Static Generation with generateStaticParams
Pre-render known paths at build time.
Incremental Static Regeneration
Refresh static pages in the background after they expire.
Forcing Dynamic Rendering
Mark segments that must never be cached statically.
Streaming with Suspense Boundaries
Flush fast content first and slower sections after.
Phase 9: Metadata, SEO, and Social Sharing
Describe each page for search engines and link previews with generated metadata.
The Metadata API
Export static title and description from routes.
Dynamic generateMetadata
Build titles and descriptions from fetched records.
Open Graph and Twitter Cards
Craft preview images and copy for shared links.
Sitemaps and robots.txt
Generate crawl guides from your route data.
JSON-LD Structured Data
Describe products and articles for rich results.
Phase 10: Authentication and Sessions
Add sign-in flows and protect routes with verified sessions checked on the server.
OAuth and Credentials Providers
Delegate sign-in to providers or verify passwords yourself.
Session Reads in Server Components
Use the current user in pages, layouts, and actions.
Protecting Routes in Middleware
Redirect unauthenticated visitors before the route runs.
Verifying JWTs on the Server
Validate token signatures and expiry before trusting claims.
Role-Based Access Control
Gate pages and actions by user roles and permissions.
Phase 11: Databases and ORM Integration
Connect a database, model your schema, and query it safely from Next.js code.
Connecting a Database
Open a pooled connection from server code safely.
Modeling Data with Prisma
Declare models and migrate schema changes.
Querying with Prisma Client
Read and write rows with type-safe query builders.
Applying Schema Migrations
Evolve the database safely across environments.
HTTP Drivers at the Edge
Query databases from runtimes without TCP sockets.
Phase 12: Client State and Libraries
Decide where each piece of state belongs and connect the libraries that manage it.
Local State with useState and useReducer
Hold ephemeral UI state inside client components.
Keeping Filters in the URL
Shareable filter and pagination state via search params.
Global Client State with Zustand
Share mutable state across distant client components.
Context Providers on the Client
Wrap server trees with client-only providers cleanly.
Complex Forms with react-hook-form
Manage large forms with validation and field arrays.
Phase 13: Testing Next.js Applications
Cover units, components, route handlers, and full flows with the right test layer.
Unit Testing Utilities
Test pure functions and helpers with a fast runner.
Component Tests with Testing Library
Render components and query the DOM by role.
Testing Route Handlers
Invoke handlers with constructed Request objects.
Testing Server Actions in Isolation
Call actions directly with fake form data.
End-to-End Tests with Playwright
Cover critical user journeys in a real browser.
Phase 14: Images, Fonts, and Performance
Serve optimized media and keep bundles lean so pages load quickly on any device.
Optimizing Images with next/image
Serve responsive, lazily loaded images automatically.
Self-Hosted Fonts with next/font
Load web fonts without layout shift or extra requests.
Loading Scripts with next/script
Control when third-party scripts execute on the page.
Router Prefetching Behavior
Understand how links warm caches during idle time.
Auditing Core Web Vitals
Measure LCP, INP, and CLS and fix regressions.
Phase 15: Middleware and Edge Runtime
Run request-level logic before routing and execute it close to the user at the edge.
Writing Middleware
Intercept requests with a single matcher function.
Redirects and Rewrites
Send users elsewhere or serve another path invisibly.
Edge vs Node Runtimes
Choose where code executes and know the limits of each.
A/B Tests and Personalization at the Edge
Split traffic and vary responses before rendering.
Throttling Abuse at the Edge
Limit request frequency before work reaches your origin.
Phase 16: Deployment and Production Capstone
Ship the app to a live environment with monitoring, then complete the capstone storefront release.
Managing Secrets Across Environments
Separate development, staging, and production configuration.
Deploying to a Node Platform
Push a production build to a hosting provider.
Self-Hosting with Standalone Output
Run the app on your own servers in a small container.
Logging and Error Tracking
Capture failures and traces from the running app.
Capstone: Production Storefront
Assemble the full stack into one deployed storefront release.