Cours Next.js : applications React rendues côté serveur
Next.js (rendu serveur) est un cours de niveau avancé de 5 leçons (environ 1 h 49), avec 16 exercices et 15 questions de quiz. Prérequis : React. Le cours demande un environnement de projet complet, prévu dans une phase ultérieure de la plateforme.
- Front-end
- Avancé
- 5 leçons
- 1 h 49
- 16 exercices
- Environnement de projet complet (phase 2)
Le cours en bref
Ce cours vous apprend à construire des applications React complètes avec Next.js et son App Router. Vous choisirez le bon mode de rendu pour chaque page, organiserez les routes et les layouts, chargerez et mettrez en cache les données côté serveur, écrirez des API avec les Route Handlers et des formulaires avec les Server Actions, puis déploierez l'application. La logique serveur est testée automatiquement en JavaScript et les tâches guidées se réalisent dans un vrai projet Next.js.
Ce que tu sauras faire
- Choisir entre rendu statique, prérendu partiel et régénération incrémentale pour chaque page
- Séparer composants serveur et composants client en limitant le JavaScript envoyé au navigateur
- Organiser une application avec l'App Router : layouts, segments dynamiques, chargement, erreurs et métadonnées
- Charger les données côté serveur, les mettre en cache et les invalider après une modification
- Écrire des Route Handlers et des Server Actions validés et sécurisés
- Construire et déployer une application Next.js en conteneur ou en export statique sans exposer de secret
Programme des 5 leçons
- Distinguer rendu côté client, rendu statique, prérendu partiel et régénération incrémentale
- Expliquer la différence entre composant serveur et composant client dans l'App Router
- Placer la directive "use client" au bon endroit pour limiter le JavaScript envoyé au navigateur
Rendu serveur (SSR)Rendu statique et ISRComposants serveur et client
- 02
Routage avec l'App Router
- Créer des routes, des layouts imbriqués et des segments dynamiques avec des dossiers
- Gérer chargement, erreurs et pages introuvables avec les fichiers spéciaux
- Prérendre des pages dynamiques avec generateStaticParams et définir leurs métadonnées
- 03
Charger les données et maîtriser le cache
- Charger des données dans des composants serveur, en parallèle et avec un affichage progressif
- Mettre en cache des données ou des composants avec "use cache", cacheLife et cacheTag
- Invalider le cache après une modification avec updateTag, revalidateTag et revalidatePath
Chargement de données côté serveurCache des donnéesRevalidation
- 04
API intégrées : Route Handlers et Server Actions
- Exposer une API HTTP avec des Route Handlers (route.ts)
- Traiter un formulaire avec une Server Action, la valider et revalider les pages concernées
- Sécuriser les Route Handlers et Server Actions comme de véritables points d'entrée publics
- 05
Construire et déployer une application Next.js
- Produire un build de production et choisir un mode d'hébergement (serveur Node, conteneur, export statique)
- Gérer les variables d'environnement sans exposer de secret
- Préparer le référencement et les performances : images, sitemap, robots
Build de productionVariables d'environnementDéploiementRéférencement technique
Projet final
Boutique Next.js avec catalogue mis en cache et espace d'administration
Réalisez une boutique avec Next.js (App Router) : accueil statique, catalogue et fiches produits prérendus et mis en cache ("use cache", cacheLife, cacheTag), fiche produit avec métadonnées et 404, panier en composant client, espace d'administration protégé où des Server Actions validées modifient les produits et invalident le cache, une API /api/v1/produits paginée pour une future application mobile, et un déploiement en conteneur standalone.
Livrables
- Le code source du projet Next.js (app/, lib/, next.config.ts)
- Le rapport de next build montrant le mode de rendu de chaque route, commenté
- Les Server Actions d'administration avec validation, contrôle des droits et revalidation
- Le Route Handler paginé et ses tests unitaires
- Le Dockerfile standalone, le .dockerignore et un .env.example
- Un README expliquant les choix de rendu et de cache page par page
Critères d'évaluation
- Mode de rendu de chaque page justifié et conforme au rapport de build
- Directive "use client" limitée aux composants interactifs
- Données chargées côté serveur, en parallèle quand c'est possible, et invalidées après chaque écriture
- Server Actions et Route Handlers validés, authentifiés et autorisés
- Aucun secret exposé côté client ; variables documentées
- Image Docker fonctionnelle et pages correctement référençables (métadonnées, sitemap, robots)
Questions fréquentes
Faut-il connaître React avant de suivre ce cours ?
Oui. Le cours React est le prérequis : composants, props, état, effets et formulaires doivent être acquis. Next.js ajoute le rendu serveur, le routage et le code back-end au même projet.
Le cours utilise-t-il l'App Router ou le Pages Router ?
L'App Router (dossier app/), le routeur recommandé pour les nouveaux projets. Les principes de rendu restent utiles si vous maintenez un projet plus ancien en Pages Router.
Quelle version de Next.js est couverte ?
Le cours suit Next.js 16.4 tel que le crée create-next-app, avec Cache Components activé : prérendu partiel, "use cache", cacheLife, updateTag, params asynchrones et proxy.ts. Les options des anciens projets (export const revalidate, cache de fetch) sont signalées.
Faut-il un hébergeur particulier pour déployer Next.js ?
Non. Une application Next.js se déploie sur un serveur Node.js, dans un conteneur Docker en mode standalone, ou en export statique pour un site sans fonctionnalité serveur. Des plateformes gérées existent aussi.
Ce cours, raconté pour ton métier
Dis ce que tu veux savoir faire : « Next.js (rendu serveur) » prend sa place dans ton parcours, avec des exemples de ton secteur. Les notions restent celles du cours.