Skip to main content
Free courses · 11 lessons

Web App Skills: Next.js Lessons From a Real Production Site

Short Next.js lessons from a live site: server and client components, i18n routing, SEO metadata and API routes, tied to real code and checked to the docs.

By Matthews WongReviewed on

Key takeaway

Next.js is a React framework that renders pages on the server, routes by folder and ships one build for many locales. These lessons teach the parts a production site leans on, each one shown through a real file from this portfolio and checked against the official documentation on its review date.

Free, no sign-up, no certificate. Built from the setup that runs this website.

Start the course

What you will be able to do

  • Decide what runs on the server and what ships to the browser.
  • Build a bilingual, search-friendly page with correct metadata.
  • Design an API route that validates input and fails with a useful error.

Who it is for

Developers who know basic React and want to build and run a production Next.js site.

Before you start

  • Basic React and TypeScript, and Node.js installed.
Lessons

Web app skills

  1. Server vs Client Components in Next.js for BeginnersLearn Next.js server vs client components with real code: what runs where, the use client boundary, passing children, and what ships to the browser.13 min
  2. next-intl Routing in Next.js: i18n for BeginnersLearn i18n routing with next-intl in Next.js: locale prefix, middleware, getTranslations vs useTranslations, localized Link, static params and hreflang.14 min
  3. Next.js SEO Metadata Tutorial: generateMetadata to JSON-LDA Next.js SEO metadata tutorial from a live bilingual site: generateMetadata, canonical and hreflang, Open Graph, sitemap.ts, robots.ts and JSON-LD.14 min
  4. Next.js API Route Tutorial: Validate, Rate Limit, VersionA Next.js API route tutorial from a live site: validate input, rate limit per client, return one JSON error shape, version under /api/v1 and send email.14 min
  5. Static vs Dynamic Rendering in Next.js: Caching ExplainedLearn static vs dynamic rendering in Next.js: generateStaticParams, revalidate, fetch and route caching, Next 15 defaults, cache headers and real code.14 min
  6. Core Web Vitals in Next.js: next/image and next/font BasicsLearn web performance basics in Next.js: LCP, CLS and INP, next/image sizes and srcset, priority, and next/font, with the real files this site ships.14 min
  7. Next.js Middleware Tutorial: Matcher, Rewrites and AcceptLearn Next.js middleware with a real file: the matcher, rewrites vs redirects, and Accept header content negotiation that serves Markdown at the same URL.14 min
  8. Test a Next.js Site With node:test and Build GatesTest a Next.js site without Jest: node:test contract tests, prebuild gates like assertBlogParity, and how to decide what a test guards and a gate does.14 min
  9. Web Accessibility Basics for Beginners in a Next.js SiteLearn web accessibility basics from a real Next.js site: semantic HTML, keyboard focus, accessible names, contrast thresholds and reduced motion.14 min
  10. Self-Host Next.js: Standalone Output, Docker and Env VarsLearn to self-host Next.js: output standalone, the Docker runner image, build-time vs runtime env vars, NEXT_PUBLIC and a health check, from real files.14 min
  11. Playwright Smoke Test in GitHub Actions: Serve, Wait, FailAdd a Playwright smoke test to GitHub Actions: serve the built Next.js app, wait until it answers, install headless Chromium and print the log on failure.13 min