Introduction to Next.js
What Next.js is, why teams choose it over plain React, and core features — App Router, SSR, and …
Project Setup
Create a Next.js app with create-next-app, configure TypeScript and App Router, and run your first …
Project Structure
Understand the Next.js App Router directory layout — app/, layout.tsx, page.tsx, loading, and error …
Routing
File-based routing in the App Router — static routes, dynamic segments, catch-all routes, and nested …
Server and Client Components
Server Components vs Client Components in Next.js — when to use each, the use client directive, and …
Data Fetching
Fetch data in Next.js with async Server Components, caching, revalidation, and Server Actions for …
Rendering Strategies
SSR, SSG, ISR, and CSR in Next.js — how each strategy works, when to use it, and how to configure …
API Routes and Route Handlers
Build backend API endpoints in Next.js with Route Handlers — GET, POST, PUT, DELETE, and …
Middleware
Use Next.js middleware for authentication checks, redirects, rewrites, and request interception …
Styling
Style Next.js apps with CSS Modules, Tailwind CSS, global styles, and CSS-in-JS — setup and best …
Metadata and SEO
Optimize SEO in Next.js with the Metadata API — static metadata, generateMetadata, Open Graph, and …
Authentication
Add authentication to Next.js with Auth.js (NextAuth) — providers, sessions, middleware protection, …
Deployment
Deploy a Next.js app to Vercel — connect Git, environment variables, preview deployments, and …