NextJS Roadmap

Get up to speed and master NextJS

Complete Roadmap for NextJS in 2025. Covers all the concepts from getting started all the way to advanced NextJS features that can help you tackle the toughest of tasks that even AI struggles with 🔥

Before You Start

Professional Modern JavaScript

Professional TypeScript Masterclass

Professional React

Get Started

Get started with NextJS, setup your development environment to start learning by doing.

Course Intro

Get Setup

Project Template

NextJS Basics

Learn the basics of NextJS, how to create a project and how to use the app router.

Introducing FullStack React

App Router Reference

Server vs Client Rendering

Master the difference between server and client rendering, how to nest components in both directions.

NextJS Server vs. "use client" Rendering

Client Only Components

Nesting Server and Client Components

React Serializable Types

Styling NextJS Applications

Master styling your NextJS application, including global CSS, CSS modules, Tailwind and custom fonts

Global CSS in NextJS

CSS Modules and SASS

Tailwind CSS

NextJS Custom Fonts

NextJS Link Component

The NextJS Link component is a core part of the app router. Master the Link component and its features.

NextJS Link Component

NextJS Link Prefetching

Navigation Scroll with Link

Replace Navigation History

Optimizing Images

Learn how to optimize images in NextJS and master the NextJS Image component.

NextJS Image Component

Dynamic Image URLs

NextJS Router Deep Dive

Deep dive with code examples in various NextJS router features, including dynamic routes, catch all routes, optional catch all routes and more.

Safe Colocation with Private Folders

NextJS Route Groups

Dynamic Routes

Mastering NextJS Layout Files

NextJS API Routes

Learn how to create HTTP API routes in NextJS, and how to use them effectively.

NextJS API Routes

NextRequest and NextResponse

NextJS Route Groups

Cookies in API Handlers

Advanced React Features unlocked by NextJS

Learn about advanced React features that are unlocked by NextJS, including RSC, Suspense and Streaming.

React Suspense Simplified

Power of Suspense Boundaries

use Promises

Stream Promise Results from Server to Client

use Requires a Cached Promise

Suspense Error Boundaries

Master Server Functions

Learn how to use server functions in NextJS, including forms, server actions and pending states.

React Server Functions

Server Actions for Powerful Forms

useActionState to Simplify Form Actions

The Secret Guide to NextJS State Management

Understand the concepts that simplify the complicated world of state management in NextJS including hydration and using different state management libraries.

Client State Management with NextJS

Client State Management In Action

Using Client State Management Libraries

Optimizing Rendering

Learn about static vs dynamic rendering, SSR, ISR and SSG in NextJS, how to use it and when to use it.

Static vs Dynamic Rendering

Detecting Server vs Client Runtime and useEffect

Demystifying ISR vs SSR vs SSG

Static Site Generation or SSG with NextJS

Incremental Static Regeneration (ISR) Simplified

API Routes Caching with NextJS

Reference Guide to Caching for Modern NextJS

Deploying your NextJS Application

Learn how to deploy your NextJS application, master DevOps concepts like creating environments and using environment variables effectively for things like databases.

Deploy NextJS Application to Production

NextJS Environment Variables Masterclass

Deploying and Managing Environment Variables

Using Databases for Dynamic Server Side State

Search Engine Optimization (SEO)

Learn how to optimize your NextJS application for search engines, including meta tags, sitemap and dynamic images for high quality social media embeds.

Create Dynamic Images with NextJS ImageResponse

Setup a BASE_URL for client and server

Creating a sitemap.xml

Provide metadata with NextJS

Created High Quality Social Media Previews

Continue Your Journey

Professional Microsoft Playwright

Coding Interview

NextJS Learning Path

While a roadmap helps categorize the different concepts you need to learn, it doesn't provide the best learning experience. This is because you often need to jump between concepts in order to internalize the ideas presented and incrementally build the experience.

That is why our courses follow a linear learning path, where each lesson is presented in an order that ensures introducing sub-concepts before we use them in later lessons.