Next.js
The App Router and routing, Server and Client Components, data fetching and caching, Server Actions, APIs and security, SEO, performance and deploying to Vercel. On Next.js 16, the same version SeaCode is built with.
Every chapter is an island. Finish its lessons, beat its challenge, and sail on ⛵
Island 1
Next.js foundations
- What is Next.js?Why React alone isn't enough: server rendering, routing and project structure.8 min1 🎮
- The App Router: folders are routespage and layout, nested routes, Link, and route groups.9 min3 🎮
- Dynamic routes[slug] and params, searchParams, generateStaticParams, and notFound.10 min2 🎮
- Client-side navigationusePathname, useRouter and useSearchParams, and an active navbar link.8 min2 🎮
Island 2
Server, client and data
- Server and Client ComponentsWhich code runs where, "use client", and the boundary between them.11 min2 🎮
- Fetching data on the serverAsync components, waterfalls, Promise.all, and data from Supabase.10 min2 🎮
- loading, error and not-foundSpecial files for loading and error states, and streaming.9 min1 🎮
- Caching and revalidation"use cache", cacheLife and cacheTag, and refreshing data after changes.12 min2 🎮
Island 3
Mutations, APIs and security
- Server ActionsServer functions called from forms, validation, and useActionState.12 min2 🎮
- Route Handlers: building an APIroute.ts, GET and POST, Request and Response, and status codes.10 min2 🎮
- Proxy (formerly Middleware)Code that runs before each request: redirects, route protection and headers.10 min2 🎮
- Authentication and protecting pagesSessions in cookies, checking at every layer, and Supabase Auth.11 min2 🎮
Island 4
Going to production
- Metadata and SEOmetadata and generateMetadata, share images, sitemap and robots.9 min2 🎮
- Images, fonts and performancenext/image, next/font, next/dynamic, and Core Web Vitals.10 min1 🎮
- Environment variables and deploying to VercelNEXT_PUBLIC_, server-only, preview deployments and production.9 min2 🎮
- Project: a course catalogueA server page, client search, an API and a server action, together.15 min3 🎮