---
title: Next.js
description: Next.js is the React framework for full-stack web apps. You will learn the App Router, server components, data fetching, rendering strategies and deployment of fast, SEO-friendly sites.
category: programming-tech
subcategory: web-development
difficulty: beginner, intermediate, advanced
url: /subject/nextjs
---

# Next.js

Next.js is the React framework for full-stack web apps. You will learn the App Router, server components, data fetching, rendering strategies and deployment of fast, SEO-friendly sites.

## Available Resources

1 Courses • 4 Websites

## Websites

### 1. React for Two Computers

**Author:** Dan Abramov

Dan Abramov derives React Server Components from first principles, distinguishing imperative 'recipes' from declarative 'blueprints' and showing why splitting a program across two machines produces the server/client boundary the App Router is built on. Explains why the App Router's constraints exist rather than what its APIs are, which is the difference between a developer who fights the framework and one who predicts it.

**Difficulty:** Advanced | **Language:** English | **Price:** Free

**Link:** https://overreacted.io/react-for-two-computers/

**Tags:** react, react-server-components, app-router, nextjs, mental-models

### 2. Common Mistakes with the Next.js App Router and How to Fix Them

**Author:** Lee Robinson

Ten concrete anti-patterns with corrected code: needless Route Handlers between server components and data, misplaced Suspense boundaries, over-applied 'use client', broken context composition, missed revalidation after mutations, and redirect inside try/catch.

**Difficulty:** Intermediate | **Language:** English | **Price:** Free

**Link:** https://vercel.com/blog/common-mistakes-with-the-next-js-app-router-and-how-to-fix-them

**Tags:** nextjs, app-router, anti-patterns, server-actions, suspense

### 3. Making Sense of React Server Components

**Author:** Josh W. Comeau

Long-form explainer separating React Server Components from server-side rendering, then working through the 'use client' boundary, component composition rules, serialization of props across the boundary, and the bundle-size and hydration consequences.

**Difficulty:** Intermediate | **Language:** English | **Price:** Free

**Link:** https://www.joshwcomeau.com/react/server-components/

**Tags:** react, react-server-components, server-side-rendering, hydration, nextjs

### 4. Next.js App Router Documentation

**Author:** Vercel

Official reference for the App Router, currently documenting Next.js 16. Covers project structure, layouts, linking and prefetching, server versus client components, data fetching, mutations, caching, revalidation, route handlers, metadata and deployment.

**Difficulty:** Intermediate | **Language:** English | **Price:** Free

**Link:** https://nextjs.org/docs/app/getting-started

**Tags:** nextjs, app-router, documentation, data-fetching, caching, routing

## Youtubes

### 1. Composition, Caching, and Architecture in Modern Next.js

**Author:** Aurora Scharff

Next.js Conf 2025 talk on structuring App Router applications at scale: composing server and client components, where boundaries belong, and how the current caching model and routing behaviour shape real project architecture. It answers the question the docs deliberately do not — how to lay out a large App Router codebase — from someone inside the team.

**Difficulty:** Advanced | **Language:** English | **Price:** Free

**Link:** https://www.youtube.com/watch?v=iRGc8KQDyQ8

**Tags:** nextjs, app-router, caching, architecture, react-server-components

## Courses

### 1. Learn Next.js: App Router Foundations

**Author:** Vercel

Vercel's official 16-chapter course builds a Postgres-backed financial dashboard, covering App Router file conventions, layouts, server-side data fetching, streaming, Server Actions, error handling, authentication and metadata, with code checkpoints per chapter. Project-based rather than a feature tour: you ship a real app with a database, mutations and auth. Kept current with the framework, so it teaches the App Router as the primary path with no Pages Router legacy.

**Difficulty:** Beginner | **Language:** English | **Price:** Free

**Link:** https://nextjs.org/learn/dashboard-app

**Tags:** nextjs, app-router, react, full-stack, server-actions, project-based

---

*This content is part of Dantes.io - Your Treasure Map to Knowledge*

*Curated by humans at Dantes.io. Personal study use welcome; republishing this curation requires permission (team@dantes.io).*

View this page online: https://dantes.io/subject/nextjs