Skip to content
aviral gupta
Get in touch

// LEARN · LANGUAGES & FRAMEWORKS

Next.js

A practical Next.js course from a first App Router app to Server Components, data mutations, caching, security and deployment. Every example is built and checked against Next.js 16.3.

Level: Beginner to advanced · For: Developers who know React and want to build full-stack web apps with the Next.js App Router.

Syllabus

Beginner

Coming soon

After this level you can

  • Create a Next.js 16.3 app, explain its project structure, and run it in development and production mode
  • Build nested layouts, pages, dynamic routes and navigation with <Link>
  • Decide which components are Server Components and which need 'use client', and pass data across the boundary
  • Style an app, optimise images and fonts, and set page metadata
  • Fetch data in Server Components and stream slow parts with loading.js and Suspense
  1. B1Installation and project structureComing soon · 5 lessonsRuns on your computer

    Create, run and understand a new app

    You build: A site skeleton built with next build and served with next start

    1. B1.1Coming soon
    2. B1.2Coming soon
    3. B1.3Coming soon
    4. B1.4Coming soon
    5. B1.5Coming soon
  2. B2Layouts, pages and navigationComing soon · 5 lessonsRuns on your computer

    Build a multi-page site with shared layouts and dynamic routes

    You build: A blog skeleton

    1. B2.1Coming soon
    2. B2.2Coming soon
    3. B2.3Coming soon
    4. B2.4Coming soon
    5. B2.5Coming soon
  3. B3Server and Client ComponentsComing soon · 5 lessonsRuns on your computer

    Put each component on the right side of the server-client boundary

    You build: An interactive like button on a server-rendered post

    1. B3.1Coming soon
    2. B3.2Coming soon
    3. B3.3Coming soon
    4. B3.4Coming soon
    5. B3.5Coming soon
  4. B4Styling, images, fonts and metadataComing soon · 5 lessonsRuns on your computer

    Make pages look right and describe themselves

    You build: Open Graph images

    1. B4.1Coming soon
    2. B4.2Coming soon
    3. B4.3Coming soon
    4. B4.4Coming soon
    5. B4.5Coming soon
  5. B5Fetching data and streamingComing soon · 5 lessonsRuns on your computer

    Load data on the server without blocking the page

    You build: A blog reading posts from Markdown files

    1. B5.1Coming soon
    2. B5.2Coming soon
    3. B5.3Coming soon
    4. B5.4Coming soon
    5. B5.5Coming soon

Beginner project

Markdown blog

A blog that reads posts from Markdown files, with a shared layout, dynamic post routes, per-post metadata and a streamed related-posts section.

Runs on your computerSelf-checked against a rubric

Intermediate

Coming soon

After this level you can

  • Mutate data with Server Functions and forms, then revalidate or redirect
  • Cache with 'use cache', cacheLife and cacheTag, and revalidate with revalidateTag, updateTag and revalidatePath
  • Handle errors and not-found states with error.js, not-found.js and catchError, and build Route Handlers
  • Protect routes with Proxy and server-side checks, handle cookies and headers, and apply a Content Security Policy
  • Test an app with Vitest and Playwright, and debug server and client code
  1. I1Mutating dataComing soon · 5 lessonsRuns on your computer

    Change data from forms and buttons with Server Functions

    You build: Comments with add and delete

    1. I1.1Coming soon
    2. I1.2Coming soon
    3. I1.3Coming soon
    4. I1.4Coming soon
    5. I1.5Coming soon
  2. I2Caching and revalidatingComing soon · 6 lessonsRuns on your computer

    Serve fast pages that stay correct

    You build: A cached product catalogue with admin updates

    1. I2.1Coming soon
    2. I2.2Coming soon
    3. I2.3Coming soon
    4. I2.4Coming soon
    5. I2.5Coming soon
    6. I2.6Coming soon
  3. I3Errors and Route HandlersComing soon · 5 lessonsRuns on your computer

    Fail gracefully and expose HTTP endpoints

    You build: A JSON API with error responses

    1. I3.1Coming soon
    2. I3.2Coming soon
    3. I3.3Coming soon
    4. I3.4Coming soon
    5. I3.5Coming soon
  4. I4Proxy, authentication and securityComing soon · 5 lessonsRuns on your computer

    Protect routes and data

    You build: A sign-in-protected dashboard with demo credentials

    1. I4.1Coming soon
    2. I4.2Coming soon
    3. I4.3Coming soon
    4. I4.4Coming soon
    5. I4.5Coming soon
  5. I5Testing and debuggingComing soon · 5 lessonsRuns on your computer

    Prove the app works and find faults fast

    You build: A test suite for the dashboard

    1. I5.1Coming soon
    2. I5.2Coming soon
    3. I5.3Coming soon
    4. I5.4Coming soon
    5. I5.5Coming soon

Intermediate project

Team notes

A notes app with demo sign-in, a data access layer, Server Functions for editing, cached lists with tag revalidation and a Route Handler for export.

Runs on your computerSelf-checked against a rubric

Advanced

Coming soon

After this level you can

  • Use parallel and intercepting routes, route groups, static params and root params, including for internationalisation
  • Choose between static, dynamic and partially prerendered pages, and adopt Instant Navigations and Partial Prefetching
  • Measure and improve performance with lazy loading, bundle analysis, Web Vitals and OpenTelemetry
  • Build, self-host or deploy an app, and configure caching for a CDN
  • Upgrade an app between Next.js versions with codemods, and migrate it to Cache Components
  1. A1Advanced routing and internationalisationComing soon · 5 lessonsRuns on your computer

    Model complex navigation with parallel, intercepting and localised routes

    You build: A bilingual site with [lang]

    1. A1.1Coming soon
    2. A1.2Coming soon
    3. A1.3Coming soon
    4. A1.4Coming soon
    5. A1.5Coming soon
  2. A2Rendering strategies and Instant NavigationsComing soon · 5 lessonsRuns on your computer

    Choose how and when each page renders

    You build: A static export

    1. A2.1Coming soon
    2. A2.2Coming soon
    3. A2.3Coming soon
    4. A2.4Coming soon
    5. A2.5Coming soon
  3. A3Performance and observabilityComing soon · 5 lessonsRuns on your computer

    Measure and improve real-world speed

    You build: The production checklist applied to the capstone draft

    1. A3.1Coming soon
    2. A3.2Coming soon
    3. A3.3Coming soon
    4. A3.4Coming soon
    5. A3.5Coming soon
  4. A4Building and deployingComing soon · 5 lessonsRuns on your computer

    Run the app in production, self-hosted or deployed

    You build: A CI pipeline with build caching

    1. A4.1Coming soon
    2. A4.2Coming soon
    3. A4.3Coming soon
    4. A4.4Coming soon
    5. A4.5Coming soon
  5. A5Upgrading and maintainingComing soon · 4 lessonsRuns on your computer

    Keep an app current with release notes and codemods

    You build: Migrating a sample app to Cache Components

    1. A5.1Coming soon
    2. A5.2Coming soon
    3. A5.3Coming soon
    4. A5.4Coming soon

Advanced project

Bilingual storefront

A two-language product catalogue with root params, a quick-view modal from intercepting routes, Cache Components, Web Vitals and a self-hosted Docker build.

Runs on your computerSelf-checked against a rubric

Capstone

Capstone

Full-stack portfolio app

An app of your choice, such as a reading tracker, typed end to end, with authenticated mutations, a documented caching strategy, tests, CI and a deployment.

Runs on your computerSelf-checked against a rubric