Full-Stack React Framework

Next.js Learning Roadmap

Next.js is the standard way to build production React apps — it adds server-side rendering, static generation, file-based routing, and API routes on top of React. It's used by Vercel, Airbnb, TikTok, Twitch, and the majority of React-based startups. If you know React, Next.js is the next step toward full-stack web development.

Total time

2–4 months

Stages

5 stages

Job-ready at

Stage 3

Career paths

3 paths

Before you start — Prerequisites

✓

React fundamentals (required)

Next.js is built on React — you need to understand components, props, state, and hooks before adding the Next.js layer.

✓

JavaScript async/await

Server components and data fetching in Next.js are async — comfortable async code is essential.

✓

Basic HTML and CSS

You'll be building real web pages — HTML structure and CSS styling are assumed.

Stage 1: Routing & Pages

File-based routing and the App Router

1–2 weeks

Topics to cover

App Router: app/ directory structurepage.tsx, layout.tsx, loading.tsx, error.tsxDynamic routes: [slug] and [...slug]Route groups: (group) for layout sharingLink component and useRouter hookNested layouts and shared UINot found pages: not-found.tsxParallel and intercepting routesMetadata API: title, description, OGnext.config.ts: redirects, rewrites

Bold = especially important

Milestone

You build a multi-page Next.js app with nested layouts, dynamic routes, and proper metadata — the file-system routing model feels natural.

Project to build

Multi-page blog site

Home page, dynamic post pages at /blog/[slug], shared header/footer layout, metadata per page — no database yet, static data.

Stage 2: Server & Client Components

React Server Components — Next.js's core concept

2–3 weeks

Topics to cover

Server Components: render on the server, zero JS bundle'use client' directive — when and whyData fetching in Server Components (async/await)Passing data from Server to Client componentsSuspense and streaming with loading.tsxClient-side interactivity: useState, useEffect in client componentsAvoiding prop drilling with Server → ClientServer Actions: form handling without API routesCaching in fetch(): revalidate optionsgenerateStaticParams for static rendering

Bold = especially important

Milestone

You understand where code runs (server vs client) and design components appropriately. Server Components fetch data; client components handle interaction.

Project to build

Product listing with filtering

Server Component fetches product list from JSON/API, client component handles filter/sort UI — correct server/client split.

Stage 3: API Routes, Auth & Database

✓ Min. Job Ready

Full-stack in a single codebase

3–4 weeks

Topics to cover

Route Handlers: route.ts for API endpointsReading request body, headers, and paramsNextResponse and status codesAuth.js (NextAuth) for authenticationOAuth providers: Google, GitHub sign-inPrisma ORM with PostgreSQLProtecting routes with middleware.tsServer Actions for form mutationsCookies and session handlingWebhook endpoints

Bold = especially important

Milestone

You build a full-stack Next.js app: Google OAuth login, protected pages, database-backed CRUD — all in one repository.

Project to build

Full-stack bookmarks app

Google OAuth login via Auth.js, save/delete bookmarks to PostgreSQL with Prisma, protected routes — deployed to Vercel.

Stage 4: Performance & SEO

Make it fast and discoverable

2–3 weeks

Topics to cover

next/image: automatic optimisationnext/font: zero-layout-shift font loadingStatic vs dynamic rendering trade-offsIncremental Static Regeneration (ISR)Metadata API for SEO: openGraph, robots, sitemapJSON-LD structured dataCore Web Vitals: LCP, CLS, INPBundle analysis with @next/bundle-analyzerEdge runtime for global low-latency routesPartial Prerendering (PPR, experimental)

Bold = especially important

Milestone

Your Next.js app scores 90+ on Lighthouse, has proper OG tags and JSON-LD, and you understand when to use static vs dynamic rendering.

Project to build

SEO-optimised content site

Static blog with ISR, generated sitemap, JSON-LD for articles, OG images, next/image and next/font — Lighthouse 95+ score.

Stage 5: Testing, CI/CD & Production

Ship with confidence

2–3 weeks

Topics to cover

Vitest for unit testsReact Testing Library for component testsPlaywright for end-to-end testsGitHub Actions: lint, test, deployVercel deploy preview per PREnvironment variables: local vs productionError monitoring with SentryEdge Config for feature flagsVercel Analytics and Web VitalsSelf-hosting on Docker/Railway/Fly.io

Bold = especially important

Milestone

Every commit is tested and deployed automatically. You catch regressions before users do, and your production app is monitored.

Project to build

Production-ready deployment

GitHub Actions CI: Vitest + Playwright tests, Vercel preview deployments, environment secrets management, Sentry integration.

What to learn next with Next.js

Skills that pair directly with Next.js in job postings

TypeScript

Next.js + TypeScript is the industry-standard combination

SQL

Server components fetch directly from databases — SQL is essential

Docker

Deploy Next.js outside Vercel with Docker containers

AWS

Self-host Next.js on Lambda, EC2, or ECS

Tailwind CSS

The most popular styling solution in the Next.js ecosystem

Career paths that use Next.js

Frontend Developer Full Stack Developer Backend Developer

Frequently asked questions

Do I need to learn React before Next.js?

Yes — absolutely. Next.js is React with extra capabilities. If you try to learn Next.js without knowing React, you'll be confused by JSX, components, props, and hooks. Spend 4–6 weeks on React first, then move to Next.js.

What is the difference between the Pages Router and App Router?

Pages Router (pages/ directory) is the original Next.js routing system — stable, well-documented, widely used in legacy codebases. App Router (app/ directory) is the newer system introduced in Next.js 13, using React Server Components. New projects should use the App Router. This roadmap teaches the App Router.

Next.js vs Remix vs SvelteKit — which should I learn?

Next.js has the largest ecosystem, most jobs, and best deployment story (Vercel). Remix is excellent for web standards-first development. SvelteKit is great if you prefer Svelte over React. If you want the most job opportunities, Next.js is the safe choice.

Do I need a backend if I use Next.js?

Not always. Next.js API Routes (or Route Handlers in the App Router) let you write server-side code in the same project. For simple apps — form handling, database queries, authentication — Next.js alone is enough. For complex microservices or a mobile app needing the same API, a separate backend makes sense.

Is Next.js only for Vercel?

No — Next.js is open source and can be deployed anywhere: Vercel (easiest), AWS (Lambda, ECS, EC2), Cloudflare Workers, Railway, Fly.io, or a plain Node.js server. Vercel is the company behind Next.js and provides the smoothest deployment experience, but you're not locked in.

Ready to start learning?

Browse our curated Next.js resources — every course, book, and video ranked by quality.

View Next.js Resources →