v16 • App Router • Turbopack

Learn Next.js
The Right Way

Hey, I'm Prasenjit. I built this guide while learning Next.js myself. No corporate docs language, just clear explanations, real examples, and the stuff I wish someone told me from day one.

Start Chapter 1 →View Roadmap
17
Chapters
50+
Code Examples
3
Skill Levels

How Next.js Works - The Big Picture

Browser (Client)Next.js ServerApp RouterAPI RoutesServer ComponentsMiddlewareDatabase / APIs

Next.js sits on top of React. It gives you routing, server-side rendering, API routes, and a build system. Stuff React alone doesn't provide.

Think of it like this: React is the engine, Next.js is the full car. You get steering (routing), fuel injection (data fetching), and a dashboard (dev tools) out of the box.

💡 The App Router (introduced in v13) is the current standard. Everything in this guide uses it.

BeginnerStart here. No prior Next.js knowledge needed.
01Beginner

What is Next.js & Getting Started

Why Next.js exists, what problems it solves, and how to set up your first project.

Start reading →
02Beginner

File-Based Routing (App Router)

How folders become URLs. Pages, nested routes, and the app directory structure.

Start reading →
03Beginner

Layouts, Templates & Metadata

Shared UI across pages, nested layouts, route groups, and SEO metadata.

Start reading →
04Beginner

Link, Image & Script Components

Next.js built-in components for navigation, optimized images, and third-party scripts.

Start reading →
05Beginner

Styling in Next.js

CSS Modules, Tailwind CSS, CSS-in-JS, and global styles. Pick your weapon.

Start reading →
IntermediateYou know the basics. Time to build real things.
06Intermediate

Dynamic Routes & Route Groups

Params, catch-all routes, optional segments, and organizing routes with groups.

Start reading →
07Intermediate

Server vs Client Components

The React Server Components mental model. When to use 'use client' and why.

Start reading →
08Intermediate

Data Fetching & Caching

Fetching data in Server Components, caching strategies, revalidation, and streaming.

Start reading →
09Intermediate

Server Actions & Forms

Mutate data without API routes. Forms, validation, optimistic updates, and revalidation.

Start reading →
10Intermediate

API Routes (Route Handlers)

Build your backend inside Next.js. GET, POST, dynamic routes, and middleware.

Start reading →
11Intermediate

Middleware

Run code before a request completes. Auth checks, redirects, rewrites, and geolocation.

Start reading →
12Intermediate

Loading & Error Handling

loading.tsx, error.tsx, not-found.tsx, and Suspense boundaries for better UX.

Start reading →
AdvancedProduction patterns, auth, and deployment.
13Advanced

Authentication (Auth.js)

Protect your app with Auth.js (NextAuth v5). OAuth, credentials, sessions, and guards.

Start reading →
14Advanced

Advanced Patterns

Parallel routes, intercepting routes, streaming with Suspense, and partial prerendering.

Start reading →
15Advanced

Deployment & Production

Deploy to Vercel, self-host, bundle analysis, performance tips, and production checklist.

Start reading →
16Advanced

Metadata & SEO

Page titles, Open Graph images, structured data, sitemaps, and robots.txt for discoverability.

Start reading →
17Advanced

Performance & Optimization

Bundle splitting, image optimization, font loading, Core Web Vitals, and Lighthouse scores.

Start reading →