NX
Cours complet — Next.js 16 — 2026

Apprendre Next.js 16
de zéro à full-stack

Le cours le plus complet pour maîtriser Next.js 16 : App Router, Cache Components, Turbopack, Server Actions et déploiement. La dernière version, expliquée simplement.

10Leçons
60+Exemples
100%Pratique
GratuitAccès libre

Plan du cours

Leçon 01

Installation & create-next-app

Installer Node.js 20+, créer un projet Next.js 16 avec TypeScript et Tailwind, comprendre la structure de base et lancer Turbopack en dev.

  • create-next-app
  • TypeScript
  • Turbopack
  • App Router
Commencer
Leçon 02

App Router : pages, layouts, routes

Maîtriser les fichiers spéciaux de l’App Router : page.tsx pour les routes, layout.tsx pour les wrappers persistants, loading.tsx et error.tsx pour les états de l’UI.

  • page.tsx
  • layout.tsx
  • loading.tsx
  • error.tsx
Commencer
Leçon 03

Composants Serveur vs Client

Comprendre la frontière server/client, quand utiliser « use client », comment composer des Server et Client Components sans perdre les bénéfices du rendu serveur.

  • « use client »
  • async/await
  • Composition
  • Zéro JS client
Commencer
Leçon 04

Fetching de données & Cache Components

Le nouveau système de cache explicite de Next.js 16 : directive « use cache », profils cacheLife, tags de cache, revalidateTag() et updateTag() pour des invalidations précises.

  • « use cache »
  • cacheLife
  • cacheTag
  • revalidateTag
Commencer
Leçon 05

Routing dynamique & navigation

Routes dynamiques [slug], params en Promise (Next.js 16), generateStaticParams pour le SSG, composant Link, useRouter et le prefetching incrémental ultra-rapide.

  • [slug]
  • generateStaticParams
  • Link
  • useRouter
Commencer
Leçon 06

Server Actions & mutations

Écrire des Server Actions avec « use server », gérer les formulaires avec useActionState, valider avec Zod, et déclencher des revalidations ciblées sans API REST.

  • « use server »
  • useActionState
  • FormData
  • updateTag
Commencer
Leçon 07

Middleware & proxy.ts

Utiliser proxy.ts (le successeur de middleware.ts) pour protéger des routes, gérer l’authentification, écrire des redirections et des rewrites proprement.

  • proxy.ts
  • Auth protection
  • Redirects
  • Rewrites
Commencer
Leçon 08

Turbopack & optimisation

Exploiter Turbopack au maximum : cache filesystem, builds incrémentaux, React Compiler automatique, optimisation d’images avec next/image et polices avec next/font.

  • Turbopack
  • React Compiler
  • next/image
  • next/font
Commencer
Leçon 09

Déploiement (Vercel & autres)

Déployer sur Vercel en deux commandes, mais aussi sur un VPS avec PM2, dans Docker, ou avec les Build Adapters API pour cibler n’importe quelle plateforme.

  • Vercel CLI
  • VPS + PM2
  • Docker
  • Build Adapters
Commencer

Pourquoi apprendre Next.js 16 en 2026 ?

Next.js 16 est la version la plus aboutie du framework React full-stack le plus utilisé au monde. Avec Turbopack stable par défaut, les Cache Components et le React Compiler intégré, c’est aujourd’hui la référence pour construire des apps React performantes et scalables — que ce soit un blog, un SaaS ou un e-commerce.

Les grandes nouveautés de Next.js 16

  • Turbopack stable — le nouveau bundler par défaut, 2 à 5x plus rapide que Webpack pour les builds, jusqu’à 10x pour le Fast Refresh
  • Cache Components — nouveau modèle de cache explicite avec la directive "use cache", bien plus simple et prévisible
  • React Compiler stable — mémoïsation automatique des composants, zéro useMemo/useCallback à écrire
  • proxy.ts — remplace middleware.ts pour gérer les redirections et l’auth côté réseau
  • Server Actions améliorées — updateTag() et refresh() pour des mutations propres
  • React 19.2 — View Transitions, useEffectEvent, composant Activity

Ce que vous allez apprendre

  • Créer et structurer un projet Next.js 16 de zéro avec TypeScript
  • Maîtriser l’App Router : pages, layouts, routes dynamiques
  • Comprendre la différence entre composants Serveur et Client
  • Fetcher des données efficacement avec le nouveau système de cache
  • Écrire des Server Actions pour remplacer les API REST classiques
  • Optimiser avec Turbopack et le React Compiler
  • Déployer en production sur Vercel ou votre propre serveur

À qui s’adresse ce cours ?

Ce cours est fait pour vous si vous connaissez déjà les bases de JavaScript et idéalement un peu de React. Pas besoin d’avoir utilisé Next.js avant — on repart de zéro. Si vous débutez complètement en JavaScript, commencez d’abord par notre cours JavaScript gratuit.