Topolearn

Learn Next.js

Full-stack React framework with file-based routing, Server Components and caching

24 lessons · 5 hours · 4 levels · covers Next.js 16

Next.js is the most widely used React framework: it adds file-system routing, server rendering, React Server Components, Server Actions, caching and built-in optimisations for images, fonts and metadata. With the App Router you build full-stack apps where data fetching and mutations live next to the components that use them. It deploys to Vercel, any Node.js server, containers or static hosting.

Sign in free to track progressOfficial docs ↗

Before you start

Next.js builds on these; the tree links to the exact lessons you need.

ReactPractical level

How deep do you want to go?

1. EssentialsRead and write simple code, do the everyday basics8 lessons · 2 hours in total
2. PracticalUse it productively at work, with the usual idioms15 lessons · 3 hours in total
3. AdvancedThe less common features, performance and trade-offs21 lessons · 4 hours in total
4. ExpertInternals and the edge cases experts know24 lessons · 5 hours in total

The Next.js tree

Next.jsCreating a Next.js appCreating a Next.jsappPages, layouts and file-based routingPages, layouts andfile-based routingLinking and navigationLinking andnavigationDynamic routes, params and searchParamsDynamic routes,params and search…Server and Client ComponentsServer and ClientComponentsFetching data in Server ComponentsFetching data inServer ComponentsStyling: global CSS, CSS Modules and TailwindStyling: global CSS,CSS Modules and T…Optimised images and fontsOptimised imagesand fontsLoading UI and streamingLoading UI andstreamingErrors and not-found pagesErrors and not-foundpagesServer Actions and formsServer Actions andformsRoute Handlers (API endpoints)Route Handlers (APIendpoints)Metadata, SEO and OG imagesMetadata, SEO andOG imagesEnvironment variables and configurationEnvironmentvariables and confi…Prerendering and the static shellPrerendering and thestatic shellYour first componentsYour firstcomponentsState with useStateState with useStateData fetching patternsData fetchingpatternsForms and controlled inputsForms and controlledinputs
Essentials and Practical shown (15 of 24 lessons); the full list is below. Click a lesson to read it.

All 24 lessons, in order

Getting started

  1. Creating a Next.js app · Essentials · 10 min

    Scaffold a project with create-next-app, run the dev server, and understand the files and folders it generates.

  2. Environment variables and configuration · Practical · 10 min

    Load secrets and settings from .env files, expose only NEXT_PUBLIC_ variables to the browser, and configure next.config.ts.

Routing

  1. Pages, layouts and file-based routing · Essentials · 12 min

    Create routes with folders and page files, and share UI between them with nested layouts.

  2. Linking and navigation · Essentials · 10 min

    Navigate with <Link>, understand prefetching and client-side transitions, and navigate programmatically.

  3. Dynamic routes, params and searchParams · Essentials · 11 min

    Create [slug] and catch-all segments, read params and searchParams as promises, and type them with PageProps.

  4. Route groups, parallel and intercepting routes · Advanced · 14 min

    Organise routes with (groups), render several pages at once with @slots, and build URL-backed modals with intercepting routes.

Server and client rendering

  1. Server and Client Components · Essentials · 14 min

    Know what runs where: Server Components by default, 'use client' boundaries for interactivity, and the rules for props across the boundary.

  2. Loading UI and streaming · Practical · 11 min

    Show instant loading states with loading.tsx and Suspense, and stream slow parts of a page as they become ready.

  3. Errors and not-found pages · Practical · 12 min

    Handle expected errors as return values, uncaught errors with error.tsx boundaries, and missing resources with notFound().

Data fetching and mutations

  1. Fetching data in Server Components · Essentials · 13 min

    Load data with async Server Components using fetch or a database, avoid waterfalls, and dedupe with React cache.

  2. Server Actions and forms · Practical · 15 min

    Mutate data with Server Functions: 'use server', form actions, useActionState for pending and error state, then revalidate or redirect.

Styling, assets and SEO

  1. Styling: global CSS, CSS Modules and Tailwind · Essentials · 9 min

    Style a Next.js app with global stylesheets, locally scoped CSS Modules and Tailwind CSS.

  2. Optimised images and fonts · Essentials · 11 min

    Serve responsive, lazy-loaded images with next/image and self-hosted, layout-stable fonts with next/font.

  3. Metadata, SEO and OG images · Practical · 11 min

    Set titles, descriptions and Open Graph data with the Metadata API, generate dynamic metadata, OG images, sitemaps and robots files.

Server features and security

  1. Route Handlers (API endpoints) · Practical · 11 min

    Build HTTP endpoints with route.ts files using the Web Request and Response APIs.

  2. Proxy (formerly Middleware) · Advanced · 11 min

    Run code before requests complete with proxy.ts: redirects, rewrites, headers and lightweight auth checks, scoped with matchers.

  3. Authentication and data security · Advanced · 15 min

    Secure a Next.js app: sessions in cookies, a server-only Data Access Layer, authorisation in every action and handler, and safe data passed to clients.

Caching and prerendering

  1. Prerendering and the static shell · Practical · 14 min

    Understand what Next.js prerenders at build time, what must wait for a request, and how Suspense, connection() and generateStaticParams shape the static shell.

  2. Caching with 'use cache' · Advanced · 15 min

    Cache functions, components and pages with the use cache directive, control lifetimes with cacheLife and label entries with cacheTag.

  3. Revalidating cached data · Advanced · 13 min

    Keep cached data fresh with time-based lifetimes and on-demand invalidation: revalidateTag, updateTag, revalidatePath and refresh.

  4. Caching without Cache Components · Advanced · 13 min

    Read and maintain apps on the previous caching model: fetch cache options, route segment config, unstable_cache and static vs dynamic routes.

Production and internals

  1. RSC payload, prefetching and the client cache · Expert · 16 min

    Understand what actually travels over the wire: the RSC payload, how the router prefetches and caches segments, and what makes navigations instant or slow.

  2. How Server Actions work · Expert · 14 min

    Know the mechanics behind Server Actions: action IDs, POST requests, closure encryption, sequential dispatch, limits and deployment skew.

  3. Deployment, runtimes and self-hosting · Expert · 15 min

    Deploy Next.js to Vercel, a Node.js server, containers or static hosting, and understand runtimes, cache handlers, after() and version skew.