Tutorial Series // Next.js

The Complete Next.js Tutorial

App Router, server components, server actions, and deployments that actually scale in prod. Every topic ships working code.

13 topics ~126 min total read 100% free
  1. 01 Introduction to Next.js & the App Router What Next.js adds on top of React, why server rendering matters, and scaffolding a project with create-next-app. 8 min →
  2. 02 Routing — Pages, Layouts & Navigation File conventions (page, layout, loading, error, not-found), nested layouts that persist, and Link navigation. 10 min →
  3. 03 Server Components vs Client Components The mental model that defines modern Next.js — what runs where, "use client", and composing the two correctly. 11 min →
  4. 04 Data Fetching & Caching fetch on the server, static vs dynamic rendering, revalidation (ISR), and revalidatePath/Tag on demand. 11 min →
  5. 05 Dynamic Routes & generateStaticParams [slug] folders, params and searchParams, notFound(), catch-all routes, and pre-building pages at deploy time. 9 min →
  6. 06 Route Handlers — Building APIs route.js files as API endpoints — GET/POST handlers, dynamic params, validation, status codes, and when you need them. 9 min →
  7. 07 Server Actions — Mutations Without APIs "use server" functions called from forms and buttons — validation, revalidatePath, useActionState, and pending UI. 10 min →
  8. 08 Styling — CSS Modules, Tailwind & Fonts The styling options in Next — global CSS, scoped CSS Modules, Tailwind setup, and zero-layout-shift fonts with next/font. 9 min →
  9. 09 Metadata, SEO & Open Graph The Metadata API — static and dynamic titles/descriptions, OG images, sitemap.js, robots.js, and JSON-LD. 9 min →
  10. 10 Authentication in Next.js Sessions and cookies, Auth.js setup with OAuth, protecting pages, server actions and route handlers, and middleware. 11 min →
  11. 11 Working with Databases — Prisma Schema-first modelling, migrations, type-safe queries from server components and actions, and the singleton client pattern. 10 min →
  12. 12 Images, Performance & Optimization next/image done right, Suspense streaming, bundle analysis, dynamic imports, and Core Web Vitals. 9 min →
  13. 13 Deploying Next.js to Production Environment variables, Vercel deployment, self-hosting with Docker + Nginx, standalone output, and the launch checklist. 10 min →