Complete Next.js 16 course in 18 lectures: App Router, Server & Client Components, data fetching, Cache Components, Server Actions, Proxy, SEO, auth, databases, MDX & CMS, i18n, View Transitions, PWAs and deployment.
Each lecture has detailed notes, code examples, interview questions and practice exercises. Follow them in order, or jump to the topic you need.
What Next.js is, why teams choose it over plain React, every rendering strategy explained (CSR, SSR, SSG, ISR, Streaming, PPR), what changed in Next.js 16, and a step-by-step project setup with a full tour of the folder structure.
Master the App Router's file-system routing: pages, nested routes, root and nested layouts, the Link component and prefetching, active links, programmatic navigation with useRouter, server redirects, route groups, private folders and how client-side navigation works under the hood.
Build data-driven URLs with dynamic segments, catch-all and optional catch-all routes. Learn the Next.js 16 async params and searchParams APIs, PageProps type helpers, useParams and useSearchParams on the client, notFound(), and prerendering pages with generateStaticParams and dynamicParams.
Handle every UI state of a route with special files: loading.js and streaming with Suspense, error.js and global-error.js with unstable_retry, not-found.js, template.js vs layout.js, then advanced patterns — parallel routes with slots and default.js, and intercepting routes for modals.
The core architecture of the App Router: how React Server Components work, the RSC Payload and hydration, when to use Server vs. Client Components, the 'use client' boundary, composition patterns, serializable props, context providers, third-party libraries, server-only code and the most common mistakes.
Fetch data the Next.js way: async Server Components with fetch, ORMs and databases, sequential vs. parallel requests and waterfalls, streaming with Suspense, passing promises to Client Components with React's use(), request memoization and React cache(), preloading, client-side libraries, and robust error handling.
Understand both caching models in Next.js 16. The previous model (fetch cache options, unstable_cache, route segment config) and the new Cache Components model: 'use cache', cacheLife profiles, cacheTag, revalidateTag, updateTag, revalidatePath, refresh, runtime APIs inside Suspense, connection(), and Partial Prerendering.
Mutate data without writing API routes: Server Functions and the 'use server' directive, progressive-enhancement forms, calling actions from Client Components, Zod validation, useActionState, useFormStatus, revalidation and redirects after mutations, optimistic UI with useOptimistic, the next/form component, and Server Action security.
Build backend endpoints inside your Next.js app with Route Handlers: HTTP methods, NextRequest and NextResponse, dynamic params, caching GET handlers, CORS, webhooks, streaming and file responses. Then master proxy.js — the Next.js 16 replacement for middleware — with matchers, redirects, rewrites, headers, cookies and optimistic auth checks.
Style and optimize your app: global CSS, CSS Modules, Tailwind CSS v4 and Sass; the next/image component (sizes, fill, preload, remotePatterns and the Next.js 16 image defaults); self-hosted fonts with next/font; third-party scripts with next/script strategies; and code splitting with next/dynamic.
Make every page discoverable and shareable: the static metadata object and generateMetadata, title templates, metadataBase, canonical URLs, Open Graph and Twitter cards, generated OG images with ImageResponse, favicons, sitemap.js, robots.js, manifest.js, viewport and themeColor, and safe JSON-LD structured data.
Secure a Next.js 16 app end to end: authentication vs. authorization, signup and login with Server Actions, stateless JWT sessions in httpOnly cookies with jose, the Data Access Layer with verifySession, DTOs, protecting pages, layouts, Server Actions and Route Handlers, optimistic checks in proxy, auth libraries, environment variables, the taint API and security headers.
Ship with confidence: Core Web Vitals and how Next.js helps each one, measuring with Lighthouse and useReportWebVitals, bundle analysis with next experimental-analyze, optimizePackageImports and the React Compiler, after() and instrumentation, testing with Vitest and Playwright, and deploying to Vercel, a Node.js server, Docker (standalone output) or a static export — plus a production checklist.
Build multilingual Next.js 16 apps: locale terminology, sub-path routing with a [lang] segment, detecting the visitor's language in proxy.js with Negotiator and intl-localematcher, server-only translation dictionaries, static generation per locale, a language switcher, formatting dates, numbers and currency with Intl, localized metadata and hreflang, RTL languages and when to reach for a library like next-intl.
Connect a real database to Next.js 16: choosing a database and host, connection management for dev hot-reload and serverless, Drizzle ORM schema and migrations, type-safe queries, joins, transactions, pagination and search, caching queries with 'use cache' and tags, CRUD with Server Actions, preventing SQL injection and N+1 queries, plus Prisma and MongoDB/Mongoose equivalents.
Build content-driven sites the Next.js 16 way: Markdown vs. MDX, setting up @next/mdx with the required mdx-components file, file-based and imported MDX, dynamic MDX blogs with generateStaticParams, metadata and frontmatter, remark/rehype plugins under Turbopack, remote MDX, integrating a headless CMS with cache tags and webhooks, and secure Draft Mode previews for editors.
Add polished, app-like motion and state handling: the browser View Transitions API, enabling React's <ViewTransition> in Next.js 16, shared-element morphs, animated Suspense reveals, directional navigation with Link transitionTypes, reduced-motion accessibility, React 19.2's <Activity> and useEffectEvent, and how Next.js 16 preserves page state with Activity when Cache Components is enabled.
Run Next.js without a server and make it installable: when a static export is the right choice, output: 'export' and what it supports, images and dynamic routes in static builds, hosting on S3, GitHub Pages and Nginx, building SPAs with Next.js, migrating a Vite or Create React App project, and turning your app into a PWA with a manifest, service worker, push notifications and offline support.