stackademic

The leading education platform for anyone with an interest in software development.

Learning Paths / Learn Next.js

nextjs
intermediate
8h estimated

Learn Next.js

Build production apps with the Next.js App Router: routing, server and client components, data fetching, and caching.

Start learning →

Routing

  1. 1

    App Router

    File-system routing, layouts, and the app directory architecture

  2. 2

    Routing

    Dynamic segments, catch-all routes, navigation, and route groups

  3. 3

    Metadata

    Set page titles, Open Graph tags, and SEO with the Metadata API

Components

  1. 1

    Server Components

    Render on the server by default with async data fetching and zero client JS

  2. 2

    Client Components

    Add interactivity with use client, hooks, and browser APIs

Data

  1. 1

    Data Fetching

    Fetch data in Server Components with async/await, revalidation, and request deduping

  2. 2

    Server Actions

    Run server-side mutations directly from components without building API endpoints

  3. 3

    API Routes

    Build HTTP endpoints with Route Handlers in the App Router

  4. 4

    Route Handlers

    Build custom HTTP endpoints in the App Router using Web Request and Response APIs

Performance

  1. 1

    Streaming & Suspense

    Stream UI progressively using React Suspense boundaries and loading files

  2. 2

    Caching

    Control the Data Cache and Full Route Cache with revalidation and tags

  3. 3

    Image Optimization

    Serve responsive, lazy-loaded images with the built-in next/image component

  4. 4

    Middleware

    Run code before requests complete for auth, redirects, and headers