End-to-end testing with Playwright (lab) | Next.js | Full Course Curriculum | Harsh Patel | Full Stack Developer & Engineer

Part 1: Basic

Introduction & Setup

What is Next.js & why use it over React (concept)

Installing Node.js, npm, and create-next-app (lab)

Project folder structure explained (lesson)

Running the dev server & hot reloading (lab)

Pages & File-Based Routing

How file-based routing works in pages/ (concept)

Creating static pages and linking between them (lab)

Dynamic routes with [slug] syntax (lesson)

Catch-all and optional catch-all routes (lesson)

Nested routes and layout nesting basics (lesson)

Components & JSX

Functional components and JSX recap (lesson)

Props, children, and component composition (lesson)

Importing and using third-party components (lab)

Styling in Next.js

Global CSS and scoped CSS Modules (lesson)

Setting up Tailwind CSS in Next.js (lab)

Using styled-jsx (built-in) (lesson)

Responsive design basics with Tailwind (lab)

Navigation & Links

next/link component and prefetching (lesson)

Programmatic navigation with useRouter (lesson)

Query params and route state (lesson)

Project — Blog Site

Planning the blog structure and routes (project)

Building the home, list, and post pages (project)

Shared layout with Header and Footer (project)

Deploying to Vercel (first deployment) (project)

Part 2: Intermediate

Data Fetching (Pages Router)

getStaticProps — static generation at build time (lesson)

getStaticPaths — dynamic static routes (lesson)

getServerSideProps — server-side rendering (lesson)

Incremental Static Regeneration (ISR) (concept)

Client-side fetching with SWR (lab)

App Router (Next.js 13+)

app/ directory vs pages/ — key differences (concept)

Layouts, templates, and nested layouts (lesson)

loading.tsx, error.tsx, and not-found.tsx (lesson)

Route groups with (groupName) syntax (lesson)

Parallel and intercepting routes (lesson)

Server vs Client Components

React Server Components — what and why (concept)

When to use "use client" directive (lesson)

Passing server data to client components (lesson)

Common mistakes with server/client split (lesson)

Authentication

Setting up NextAuth.js (Auth.js v5) (lab)

OAuth providers — GitHub, Google (lab)

Credentials provider + bcrypt password hashing (lab)

Protecting routes with middleware (lesson)

Session management & useSession hook (lesson)

Database Integration

Setting up Prisma with PostgreSQL (lab)

Defining schema, migrations, and seed data (lesson)

CRUD operations in Server Actions (lab)

Using Supabase as a hosted Postgres (lab)

Project — Full-Stack App

Building a task manager with auth + Prisma (project)

Protected routes and role-based access (project)

Form handling with Server Actions (project)

Deploy with Vercel Postgres (project)

Part 3: Advanced

Server Actions

Server Actions — revalidating cache after mutations (lesson)

Form submission without JS with Server Actions (lab)

Optimistic UI with useOptimistic (lesson)

Error handling and validation with Zod (lesson)

Route Handlers & API Design

Creating API routes in app/api/route.ts (lesson)

HTTP methods — GET, POST, PUT, DELETE (lesson)

Request/Response objects and headers (lesson)

Building a RESTful API layer in Next.js (lab)

Using Edge Runtime for route handlers (lesson)

Caching & Revalidation

Understanding Next.js 4-layer caching model (concept)

fetch() cache options — force-cache, no-store (lesson)

revalidatePath and revalidateTag (lesson)

unstable_cache for server-side memoization (lesson)

On-demand ISR via API webhook trigger (lab)

State Management

When to reach for client state vs server state (concept)

Zustand with Next.js App Router (lab)

TanStack Query (React Query) for async state (lab)

Context API patterns in App Router (lesson)

Image, Font & Script Optimisation

next/image — lazy loading, sizes, formats (lesson)

next/font — zero layout shift font loading (lesson)

next/script — loading strategies (lesson)

Project — E-commerce Store

Product listing with ISR from headless CMS (project)

Cart state with Zustand + server sync (project)

Stripe Checkout integration via Route Handler (project)

Order confirmation with webhooks (project)

Image CDN with next/image + Cloudinary (project)

Part 4: Expert

Testing in Next.js

Unit testing with Jest and React Testing Library (lab)

Mocking fetch and Route Handlers with MSW (lab)

End-to-end testing with Playwright (lab)

Testing Server Components and Server Actions (lab)

CI integration — running tests on push (lesson)

Security & Hardening

Security headers with next.config headers() (lesson)

Content Security Policy (CSP) setup (lesson)

Rate limiting API routes with Upstash Redis (lab)

Environment secrets — .env, Vercel env vars (lesson)

Preventing SSRF and injection attacks (concept)

Internationalisation (i18n)

Built-in i18n routing in Next.js (lesson)

Setting up next-intl for translations (lab)

Locale-aware Server Components (lesson)

RTL support and bidirectional layouts (lesson)

Monorepos & Architecture

Monorepo with Turborepo — setup and pipelines (lab)

Shared UI package across multiple Next.js apps (lab)

Module federation patterns (concept)

Micro-frontend architecture with Next.js (concept)

Design system publishing to npm (lab)

Edge & Middleware

Next.js Middleware — request pipeline (lesson)

A/B testing and feature flags at the edge (lab)

Geolocation-based redirects (lab)

Edge-native APIs vs Node runtime (concept)

Project — Production SaaS

Multi-tenant architecture with subdomain routing (project)

Subscription billing with Stripe + webhooks (project)

Observability — Sentry, Datadog, Axiom (project)

Docker + self-hosted deployment (project)

Performance audit — LCP, CLS, TTFB targets (project)

Final architecture review and code quality (project)