Retour aux formations
Officiel

Next.js 14 & React Server Components — Intermédiaire

Par DevWorkWeb

Pas encore d'avis 4.9 h de contenu Intermédiaire
Aperçu Contenu Avis Enseignant

Ce cours reprend exactement là où s'arrête « Next.js : créer une application Web moderne » (cours gratuit) : pas de retour sur l'App Router de base ni la distinction Server/Client Components déjà acquise. On avance directement sur ce qui distingue une application Next.js de démonstration d'une application de production : récupération de données avancée, stratégies de rendu, cache et revalidation, et Server Actions complètes pour des formulaires robustes.

Ce que vous allez apprendre

Structurer des routes avancées (catch-all, route groups)
Récupérer des données avec parallélisation et gestion des erreurs
Choisir la bonne stratégie de rendu (Static, Dynamic, Streaming)
Maîtriser le cache Next.js et la revalidation par tag ou par chemin
Construire des Server Actions complètes avec validation et gestion d'état
Créer des Route Handlers pour une API REST complète

Prérequis

Avoir terminé « Next.js : créer une application Web moderne » (App Router, Server/Client Components, routing de base) et « React — Niveau Intermédiaire » recommandé pour TypeScript.

Public cible

  • • Développeurs ayant terminé le cours gratuit « Next.js : créer une application Web moderne »
  • • Développeurs React souhaitant maîtriser les spécificités serveur de Next.js au-delà des bases

Programme détaillé

6 modules · 21 leçons
1. App Router avancé 3 leçons

Au-delà des routes simples déjà vues dans le cours gratuit : les patterns de routing qui structurent une vraie application.

  • Routes catch-all avec [...slug] 14 min
  • Groupes de routes avec (nomDuGroupe) 14 min
  • Routes parallèles et interception (aperçu) 12 min
✓ Quiz de validation (2 questions)
2. Data Fetching avancé 4 leçons

Aller au-delà d'un simple fetch : gérer les erreurs, paralléliser les requêtes, et éviter les pièges de performance courants.

  • Le problème du waterfall 16 min
  • Paralléliser avec Promise.all 14 min
  • Gérer les erreurs de fetch proprement 14 min
  • Composants asynchrones et Suspense pour le streaming 16 min
✓ Quiz de validation (3 questions)
3. Stratégies de rendu 3 leçons

Comprendre précisément quand Next.js génère une page à la construction, à la requête, ou progressivement — et comment orienter ce choix.

  • Static Rendering : le comportement par défaut 14 min
  • Dynamic Rendering : quand une page ne peut pas être statique 14 min
  • Streaming avec plusieurs Suspense imbriqués 14 min
✓ Quiz de validation (2 questions)
4. Cache & Revalidation 4 leçons

Le module le plus subtil de Next.js : comprendre les différentes couches de cache et comment les invalider proprement.

  • Le cache de fetch par défaut 14 min
  • Contrôler le cache avec l'option fetch 14 min
  • Revalidation à la demande par tag 16 min
  • Revalidation par chemin 12 min
✓ Quiz de validation (3 questions)
5. Server Actions en profondeur 4 leçons

Construire des formulaires robustes avec validation, gestion d'état et retour utilisateur clair, entièrement traités côté serveur.

  • Anatomie d'une Server Action complète 14 min
  • Validation des données avec Zod 16 min
  • useFormState pour afficher les erreurs 16 min
  • useFormStatus pour l'état de soumission 12 min
✓ Quiz de validation (3 questions)
6. Route Handlers & API 3 leçons

Créer une véritable API REST directement dans Next.js, avec tous les verbes HTTP standards.

  • Créer un Route Handler GET et POST 14 min
  • PUT, PATCH et DELETE sur une ressource précise 14 min
  • Lire les paramètres de requête et le corps 12 min
✓ Quiz de validation (1 questions)

🎯 Projet final

API et pages dynamiques avec cache et Server Actions

Le projet fil rouge consiste à construire un mini catalogue de projets développeurs avec une API complète, un formulaire de soumission via Server Action, et une stratégie de cache réfléchie.

  • Accès à vie
  • Certificat inclus
  • Exercices pratiques
  • Mises à jour gratuites

Avis des apprenants

Aucun avis pour l'instant. Soyez le premier à donner le vôtre.

Formations similaires

Développement Web : créer son premier site de A à Z

DevWorkWeb Gratuit
JA

JavaScript de zéro : les fondamentaux

DevWorkWeb Gratuit
RE

React.js : créer sa première application moderne

DevWorkWeb Gratuit