Que saurez-vous faire à la fin de la formation Next.js et React, et que laisse-t-elle de côté ?
React est une bibliothèque qui construit des interfaces à partir de composants ; Next.js est un framework bâti sur React qui ajoute le routage, le rendu côté serveur, la lecture des données et la mise en production. Depuis l'arrivée des composants serveur, la frontière entre ce qui s'exécute sur le serveur et ce qui part dans le navigateur est devenue la vraie difficulté. Cette formation est construite autour de cette frontière : savoir où placer chaque morceau de code, pourquoi, et ce que l'erreur coûte en vitesse ou en sécurité.
À la fin des quatre jours, chaque participant sait découper une maquette en composants réutilisables, gérer l'état d'un formulaire sans bricolage, organiser les adresses d'une application avec l'App Router, décider pour chaque composant s'il reste sur le serveur ou passe dans le navigateur, lire des données sans exposer de secret, écrire des données avec des Server Actions qui revérifient les droits, et mettre en ligne une application sur une plateforme ou sur un serveur Node.js. Il repart avec un projet fil rouge en ligne, versionné, et une liste de contrôle de déploiement.
La formation suppose acquis le JavaScript moderne. Quelqu'un qui découvre les fonctions, les objets ou les promesses doit d'abord passer par la formation au développement web, qui pose ce socle. Elle n'enseigne pas non plus la conception d'une API publique destinée à des partenaires, l'architecture d'un produit vendu par abonnement à plusieurs clients, ni le développement mobile : ces sujets ont leurs propres fiches, listées en bas de page. Le framework Laravel, autre voie du domaine, est présenté avec les autres formations sur la page formations en développement.
Enfin, cette formation transmet une compétence ; elle ne livre pas une application à votre place. Si votre besoin est un logiciel en service dans trois mois, avec un code dont vous resterez propriétaire, le bon interlocuteur est la prestation d'application web sur mesure. Les deux se combinent souvent : une application livrée par un prestataire, puis une formation intra pour que l'équipe interne sache la faire évoluer sans la casser.
Quels gestes chaque participant doit-il réussir seul le dernier jour ?
- Transformer une maquette d'écran en arbre de composants nommés, avant d'écrire la moindre ligne.
- Construire un formulaire contrôlé avec validation et messages d'erreur lisibles par un lecteur d'écran.
- Expliquer, pour chaque fichier du projet, s'il s'exécute sur le serveur, dans le navigateur, ou aux deux moments.
- Créer une route dynamique avec ses états de chargement, d'erreur et de page introuvable.
- Lire des données dans un composant serveur à travers une couche d'accès qui filtre les champs renvoyés.
- Écrire une Server Action qui valide sa saisie, vérifie l'identité et les droits de l'appelant, puis rafraîchit l'affichage.
- Repérer dans un projet une variable NEXT_PUBLIC_ qui contient un secret, et la corriger.
- Mesurer le JavaScript envoyé par une page et le réduire en déplaçant la frontière client.
- Déployer l'application, régler sa région d'exécution et restaurer la version précédente en cas de problème.
- Monter le projet d'une version mineure de Next.js sur une branche, tests compris.
À qui s'adresse la formation, avec quel niveau et quel matériel ?
Le groupe compte huit participants au plus, de niveau proche. Un court test de positionnement, avant l'inscription, vérifie le JavaScript de chacun : il vaut mieux décaler une inscription que laisser un participant décrocher dès le deuxième jour.
-
Développeurs front-end qui veulent passer à React
Ils écrivent déjà du JavaScript dans des pages classiques, souvent avec jQuery ou du code maison. Ils gagnent une façon structurée de construire des interfaces qui grossissent sans devenir illisibles.
-
Développeurs React qui découvrent Next.js
Ils connaissent les composants et les hooks, mais leurs applications tournent entièrement dans le navigateur. Ils commencent au jour 2 et passent l'essentiel du temps sur la frontière serveur et client, les données et le déploiement.
-
Développeurs back-end qui doivent toucher à l'interface
Habitués à PHP, Python ou Java, ils maîtrisent les bases de données et la sécurité, mais pas la logique d'un composant. Les composants serveur leur paraîtront familiers ; l'état côté client demandera plus d'attention.
-
Équipes qui reprennent une application Next.js existante
Une application livrée par un prestataire, parfois sur une ancienne version ou avec l'ancien Pages Router. En intra, les exercices portent sur une copie de leur propre code, avec un plan de montée de version à la clé.
-
Prérequis vérifiés
Savoir lire sans aide des fonctions fléchées, la déstructuration d'objets, les méthodes map et filter, les modules import et export, et un appel fetch avec async et await. Avoir déjà utilisé Git en ligne de commande et un terminal.
-
Matériel
Un ordinateur portable sous Windows, macOS ou Linux avec droits d'installation et 8 Go de mémoire vive conseillés, Node.js 24 installé, un compte GitHub. Un compte gratuit sur une plateforme d'hébergement suffit pour les exercices ; la liste précise arrive une semaine avant la session.
Quel est le programme, demi-journée par demi-journée ?
Jour 1, matin : penser une interface en composants3 h 30
- Vérification des postes : Node.js 24 LTS, éditeur, Git, navigateur avec les outils de développement React.
- Découper une maquette réelle en arbre de composants, en partant de ce qui se répète à l'écran.
- JSX, props et composition : un composant qui reçoit des données et n'en invente aucune.
- Afficher des listes avec une clé stable, et comprendre pourquoi l'index du tableau ne suffit pas.
- Exercice : la page catalogue du projet fil rouge, en composants purs, sans aucun état.
Jour 1, après-midi : état, événements et formulaires3 h 30
- useState : l'état comme mémoire d'un composant, et l'instantané qui surprend tous les débutants.
- Où placer l'état : le remonter au parent commun, le dériver plutôt que le dupliquer.
- Formulaires contrôlés, validation à la saisie, messages d'erreur accessibles.
- Les Effets : à quoi ils servent vraiment, et la longue liste des cas où l'on n'en a pas besoin.
- Typer les props avec TypeScript, à la mesure de ce que l'équipe saura maintenir.
Jour 2, matin : le routage par fichiers de l'App Router3 h 30
- Créer un projet avec create-next-app et lire ce qu'il installe : TypeScript, Tailwind CSS, ESLint, fichier AGENTS.md.
- Dossiers, page.tsx et layout.tsx : une adresse égale un dossier, une mise en page partagée égale un layout.
- Routes dynamiques entre crochets, paramètres lus de façon asynchrone avec await params.
- Navigation avec le composant Link, préchargement, et fichiers loading, error et not-found.
- Exercice : la fiche détaillée de chaque élément du catalogue, avec sa page 404 propre.
Jour 2, après-midi : composants serveur et composants client3 h 30
- Par défaut, pages et layouts sont des composants serveur : ce qu'ils peuvent faire, et ce qu'ils ne peuvent pas.
- La directive « use client » trace une frontière : tout ce que le fichier importe part dans le navigateur.
- Garder l'interactivité dans de petites feuilles de l'arbre pour envoyer moins de JavaScript.
- Passer des composants serveur en children d'un composant client, et des props sérialisables seulement.
- Le paquet server-only pour qu'un module contenant un secret refuse d'être importé côté client.
Jour 3, matin : lire les données et maîtriser le cache3 h 30
- Lire une base de données ou une API depuis un composant serveur, sans route intermédiaire inutile.
- Une couche d'accès aux données qui vérifie les droits et ne renvoie que les champs utiles.
- Suspense et streaming : afficher tout de suite la structure de la page, puis les blocs lents.
- Cache Components et la directive « use cache » : rien n'est mis en cache sans qu'on le demande.
- Exercice : un tableau de bord dont un bloc lent ne bloque plus le reste de la page.
Jour 3, après-midi : écrire des données sans ouvrir de faille3 h 30
- Server Actions et formulaires : envoyer, valider sur le serveur, renvoyer un état avec useActionState.
- Une action est joignable par une requête POST directe : authentification et autorisation vérifiées dans chacune.
- Ne renvoyer au navigateur que ce dont l'interface a besoin, jamais l'enregistrement brut de la base.
- Rafraîchir l'affichage après une écriture : updateTag, revalidatePath et refresh.
- proxy.ts, l'ancien middleware.ts : rediriger, filtrer, et ne pas en faire le seul contrôle d'accès.
Jour 4, matin : performance, référencement et tests3 h 30
- Images avec next/image, polices locales, métadonnées et balises pour les moteurs de recherche.
- Mesurer le JavaScript réellement envoyé, page par page, sur un téléphone d'entrée de gamme simulé.
- Tests des composants et test de parcours avec Playwright, dont l'assistant instant() de Next.js 16.3.
- Accessibilité vérifiée au clavier et au lecteur d'écran sur les composants interactifs.
- Revue croisée du code du projet fil rouge avec une grille commune.
Jour 4, après-midi : déployer, surveiller et monter de version3 h 30
- next build, next start et variables d'environnement : ce que le préfixe NEXT_PUBLIC_ grave dans le JavaScript public.
- Quatre façons de mettre en ligne : Vercel, autre plateforme, serveur Node.js ou conteneur Docker, export statique.
- Choisir la région d'exécution selon les utilisateurs et la base de données, pas selon la valeur par défaut.
- Suivre les publications de sécurité et monter de version avec npx next upgrade sur une branche testée.
- Mise en ligne du projet fil rouge, liste de contrôle cochée, évaluation individuelle et remise des supports.
Sur quel projet les participants travaillent-ils pendant les quatre jours ?
-
Choisir le projet fil rouge
Avant la session
Un catalogue de produits ou de services avec fiches détaillées, recherche et formulaire de demande, puis un petit espace réservé pour traiter ces demandes. Le sujet est adapté à chacun : biens immobiliers, formations, pièces détachées, chambres d'hôtel. En intra, c'est une copie d'une interface de l'organisation.
-
Découper la maquette
Jour 1, 1 heure
Chaque participant dessine l'arbre de ses composants sur papier, nomme chaque boîte, et indique où vit chaque donnée. Le dessin est relu par un voisin, qui cherche les composants trop gros et l'état dupliqué.
-
Construire les pages et les adresses
Jour 2, 2 heures
Liste, fiche détaillée, recherche par paramètre d'adresse, page introuvable. Chaque adresse doit s'afficher correctement après un rechargement complet, et pas seulement en naviguant depuis l'accueil.
-
Tracer la frontière serveur et client
Jour 2, 1 h 30
Exercice de mesure : on place volontairement la directive « use client » en haut du layout, on note le JavaScript envoyé, puis on la redescend sur le seul champ de recherche et on compare. La différence parle davantage que tout discours.
-
Brancher les données
Jour 3, 2 heures
Une base de démonstration, ou une API fournie, lue à travers une couche d'accès unique. Un bloc volontairement lent est isolé dans un Suspense pour que le reste de la page s'affiche sans attendre.
-
Attaquer sa propre action
Jour 3, 1 heure
Chacun appelle la Server Action d'un autre participant sans passer par l'interface, avec un compte non autorisé ou l'identifiant d'un enregistrement qui ne lui appartient pas. Chaque faille trouvée est corrigée et couverte par un test.
-
Mettre en ligne et documenter
Jour 4, 2 heures
Déploiement réel, variables d'environnement réglées, région choisie, retour à la version précédente essayé une fois. Le fichier LISEZMOI du dépôt explique comment installer, lancer, tester et déployer.
Composant serveur ou composant client : comment trancher, cas par cas ?
| Besoin du composant | Où le placer | Pourquoi |
|---|---|---|
| Afficher un contenu lu en base ou dans une API | Composant serveur | La lecture se fait près de la source, sans exposer les identifiants de connexion et sans JavaScript supplémentaire dans le navigateur. |
| Utiliser une clé d'API, un jeton ou un mot de passe | Composant serveur, dans un module marqué server-only | Le secret ne quitte jamais le serveur ; une importation par erreur côté client déclenche une erreur de compilation. |
| Réagir à un clic, à une saisie, ouvrir un menu | Composant client | Les gestionnaires d'événements et l'état n'existent que dans le navigateur. |
| Lire le stockage local, la géolocalisation, la taille de la fenêtre | Composant client | Ces interfaces sont propres au navigateur ; React 19.3 ajoute browser() pour signaler ce cas proprement au rendu serveur. |
| Envelopper un composant d'une bibliothèque qui utilise l'état | Petit composant client qui le réexporte | Sans cette enveloppe, l'importer dans un composant serveur provoque une erreur. |
| Partager un thème ou une langue avec toute l'interface | Fournisseur de contexte client, placé le plus bas possible | Le contexte React n'existe pas dans les composants serveur ; un fournisseur trop haut empêche d'optimiser le reste. |
| Afficher une grande mise en page avec une seule zone interactive | Layout serveur, et un seul composant client pour la zone | Tout ce qu'importe un fichier client part dans le navigateur ; isoler la zone réduit le poids de la page. |
Comment la formation est-elle animée, et que reçoit-on ensuite ?
Peu de diapositives, beaucoup de code écrit par les participants eux-mêmes, et des mesures plutôt que des affirmations : le poids d'une page, le temps d'affichage, la requête qui passe ou qui échoue.
-
Huit participants au plus
La frontière entre serveur et client se comprend en relisant le code de chacun, écran par écran. Au-delà de huit postes, cette relecture devient superficielle et les erreurs de placement passent inaperçues.
-
Une démonstration, puis le projet de chacun
Chaque notion est montrée en dix minutes sur un exemple, puis appliquée au projet fil rouge du participant. Les erreurs intéressantes sont projetées pour tout le groupe, avec l'accord de leur auteur.
-
Sur votre code, en intra
Quand une équipe se forme, les exercices partent d'une copie de son application, avec des données fictives ou anonymisées. Les écarts relevés par rapport aux pratiques recommandées deviennent une liste de corrections priorisées, remise en fin de session.
-
La documentation officielle comme référence
Les participants apprennent à vérifier dans react.dev et nextjs.org plutôt que dans un tutoriel daté. Next.js évolue vite : savoir lire les notes de version et le guide de montée de version vaut plus qu'une recette apprise par cœur.
-
Supports remis
Le dépôt du projet fil rouge et ses corrigés, la grille de décision serveur ou client, la grille de revue de code, la liste de contrôle de déploiement et la procédure de montée de version, dans un format modifiable.
-
Suivi après la session
Pendant la période prévue au devis, les questions d'application restent possibles par écrit, et une relecture d'une branche ou d'une montée de version peut être planifiée quelques semaines plus tard.
Quels outils et quelles versions utilise-t-on, et combien coûtent-ils ?
| Outil | Usage dans la formation | Version retenue | Coût d'éditeur |
|---|---|---|---|
| React | Bibliothèque des composants | 19.3, publiée le 9 septembre 2026 | Gratuit, code ouvert |
| Next.js | Framework : routage, rendu serveur, données, compilation | 16.3.8, version Active LTS publiée le 30 septembre 2026 | Gratuit, code ouvert |
| Node.js | Environnement d'exécution en local et sur serveur | 24 LTS, ou 22 LTS ; la 20 n'est plus maintenue | Gratuit |
| TypeScript | Typage des props et des données | 5.1 au minimum ; la version 7 accélère la vérification avec Next.js 16.3 | Gratuit |
| Visual Studio Code ou Cursor | Éditeur de code | Version stable du jour | Visual Studio Code gratuit ; Cursor dispose d'une formule gratuite |
| Git et GitHub | Versionnage, revue de code, déploiement automatique | Offre gratuite de GitHub | Gratuit pour la formation |
| Playwright | Tests de parcours dans un vrai navigateur | Version stable du jour | Gratuit, code ouvert |
| Vercel | Plateforme de déploiement la plus intégrée à Next.js | Hobby pour les exercices, Pro pour un usage professionnel | Hobby gratuit, réservé à un usage personnel et non commercial ; Pro à 20 dollars par mois et par développeur, avec 20 dollars de consommation incluse |
| Netlify | Plateforme de déploiement alternative | Free, Personal ou Pro | Free à 0 dollar avec 300 crédits par mois ; Personal à 9 dollars avec 1 000 crédits ; Pro à partir de 20 dollars avec membres illimités |
| Cloudflare Workers | Plateforme alternative, exécution répartie | Workers Free ou Workers Paid | Gratuit jusqu'à 100 000 requêtes par jour ; formule payante à partir de 5 dollars par mois et par compte, sans frais de bande passante |
| Serveur privé virtuel | Hébergement autonome avec Node.js ou Docker | Linux, Node.js 24 LTS | Variable selon l'hébergeur et le pays ; maintenance du serveur à votre charge |
Où héberger une application Next.js : Vercel, Netlify, Cloudflare ou votre propre serveur ?
| Critère | Vercel | Netlify | Cloudflare Workers | Serveur Node.js ou Docker |
|---|---|---|---|---|
| Formule gratuite | Hobby, réservée à un usage personnel et non commercial | Free, plafonnée à 300 crédits par mois | Workers Free, 100 000 requêtes par jour et 10 millisecondes de calcul par appel | Aucune : vous payez le serveur, même modeste |
| Premier palier payant relevé le 5 octobre 2026 | Pro à 20 dollars par mois et par développeur, 20 dollars de consommation incluse | Personal à 9 dollars par mois, 1 000 crédits | 5 dollars par mois et par compte, 10 millions de requêtes incluses | Prix du serveur, plus le temps passé à l'administrer |
| Fonctions de Next.js prises en charge | Toutes ; adaptateur vérifié par l'équipe de Next.js | Intégration propre à Netlify, non vérifiée par l'équipe de Next.js ; un adaptateur vérifié est en cours | Intégration propre à Cloudflare, non vérifiée ; un adaptateur vérifié est en cours | Toutes, selon la documentation de Next.js |
| Ce que vous gérez vous-même | Peu de choses : surveiller la consommation et la région | Surveiller les crédits consommés | Vérifier la compatibilité des fonctions utilisées | Mises à jour du système, certificat, cache partagé, sauvegardes, redémarrages |
| Le bon choix quand | L'équipe veut déployer sans administrer de serveur | Le site mêle contenu et formulaires, avec un budget serré | Le trafic est réparti et le calcul par requête reste léger | Les données doivent rester dans un pays ou chez un hébergeur précis |
Pour apprendre, n'importe quelle formule gratuite convient. Pour une application professionnelle, la formule gratuite de Vercel est exclue par ses conditions, et le choix se fait sur trois questions : où doivent se trouver les données, qui administrera le serveur, et quel budget mensuel l'entreprise accepte de voir varier.
Que faut-il savoir sur le coût et la région d'hébergement avant la mise en ligne ?
Selon la page tarifaire de Vercel, consultée le 5 octobre 2026, la formule Hobby est gratuite mais réservée à un usage personnel et non commercial ; elle inclut 100 Go de transfert de données et un million d'appels de fonctions par mois, sans possibilité d'acheter davantage. La formule Pro coûte 20 dollars par mois, avec 20 dollars de consommation incluse, puis une facturation à l'usage ; chaque développeur supplémentaire coûte 20 dollars par mois, les comptes en lecture seule restant gratuits. Les prix sont hors taxes.
La même page indique que toute nouvelle équipe reçoit un budget de consommation à la demande de 200 dollars, avec des alertes par courriel, sur le web et par SMS, et la possibilité de suspendre tous les projets une fois la limite atteinte. Pendant la formation, chaque participant règle ce plafond lui-même : une boucle de requêtes mal écrite ou un robot qui aspire les images peut faire grimper la facture en une nuit.
Reste la région. D'après la documentation des régions de Vercel, les fonctions s'exécutent par défaut dans la région iad1, à Washington, aux États-Unis, sur 19 régions de calcul disponibles, dont Paris (cdg1) et Le Cap (cpt1). La documentation conseille de faire tourner les fonctions dans la région de la base de données, ou au plus près. Une application destinée à Cotonou ou à Dakar, avec sa base en Europe, n'a donc aucune raison de garder le réglage par défaut.
Les alternatives ont leur propre logique. Netlify compte en crédits mensuels qui couvrent déploiements, calcul, formulaires et bande passante. Cloudflare Workers facture les requêtes et le temps de calcul, mais ni la bande passante ni les fichiers statiques. Un serveur privé virtuel coûte un prix fixe, mais tout le travail d'administration revient à l'équipe : c'est souvent ce coût caché qui fait pencher la balance.
Quels chiffres situent React et Next.js aujourd'hui ?
- 44,7 % Part des 23 678 répondants de l'enquête 2025 qui ont travaillé avec React dans l'année, contre 20,8 % pour Next.js Source : Stack Overflow, Developer Survey 2025
- 10 % Part des pages web mesurées qui utilisent React en 2024, contre 8 % l'année précédente Source : HTTP Archive, Web Almanac 2024
- 558 Ko JavaScript médian chargé par une page sur mobile en 2024, en hausse de 14 % sur un an Source : HTTP Archive, Web Almanac 2024
- 44 % Part du JavaScript téléchargé qui reste inutilisé au chargement d'une page médiane sur mobile, soit 206 Ko (2024) Source : HTTP Archive, Web Almanac 2024
- 10,0 Score de gravité CVSS de la faille d'exécution de code à distance dans les composants serveur de React, publiée le 3 décembre 2025 (CVE-2025-55182) Source : Blog de React
- 7 Failles corrigées par la publication de sécurité de Next.js du 30 septembre 2026 : une élevée, cinq moyennes, une faible Source : Blog de Next.js
Pourquoi la sécurité et les montées de version font-elles partie du programme ?
Parce qu'un framework qui exécute du code sur le serveur hérite des risques du serveur. Le 3 décembre 2025, le blog de React a annoncé une faille notée 10,0 sur 10 : une requête forgée vers une Server Function permettait d'exécuter du code sur le serveur sans être authentifié. Next.js figurait parmi les frameworks touchés. Les applications React qui tournent uniquement dans le navigateur ne l'étaient pas ; celles qui utilisaient les composants serveur devaient être mises à jour sans attendre.
Depuis juillet 2026, Next.js publie des correctifs de sécurité chaque mois, et sa politique de support distingue deux statuts. La version majeure en cours, la 16, est en Active LTS : nouveautés, corrections et sécurité. La précédente passe en Maintenance LTS, avec seulement les correctifs critiques, et pendant deux ans après sa sortie initiale. Next.js 15, sorti le 21 octobre 2024, arrive au bout de cette période le 21 octobre 2026 ; Next.js 14 ne figure déjà plus parmi les versions prises en charge.
La publication du 30 septembre 2026 illustre ce que cela change au quotidien. Elle corrige une falsification de requête côté serveur dans l'optimisation des images, active seulement si des sources d'images distantes sont autorisées, et un empoisonnement du cache qui ne touche que les applications auto-hébergées. Savoir lire un tel bulletin et dire en dix minutes si son application est concernée fait partie des gestes enseignés le dernier jour, avec la commande npx next upgrade appliquée sur une branche de test.
À quoi sert la formation selon le secteur, en Afrique francophone et en Europe ?
Média en ligne, Abidjan ou Dakar
Les articles s'affichent lentement sur les téléphones des lecteurs, et chaque pic d'audience fait tomber le site rendu entièrement dans le navigateur.
L'équipe technique apprend à rendre les articles sur le serveur, à mettre en cache explicitement ce qui change peu et à garder le JavaScript pour les seuls blocs interactifs (commentaires, partage).
Agence web, Cotonou ou Lomé
L'agence a hérité d'une application Next.js livrée par un indépendant, restée sur une ancienne version et sans aucun test ; personne n'ose la mettre à jour.
Formation intra sur une copie du code : lecture de l'architecture, premiers tests de parcours, plan de montée de version par étapes, puis application du premier palier pendant la session.
Fintech ou microfinance, Afrique de l'Ouest
Le tableau de bord des agents affiche des données de clients ; un composant client reçoit l'enregistrement complet de la base, numéros de pièce d'identité compris.
Les développeurs construisent une couche d'accès aux données qui ne renvoie que les champs utiles, revérifient les droits dans chaque Server Action et règlent la région d'exécution au plus près de la base.
ONG régionale, Burkina Faso ou Niger
Le portail de suivi des projets doit rester utilisable sur des connexions lentes et intermittentes, par des équipes de terrain équipées de téléphones Android modestes.
Pages rendues sur le serveur et légères, chargement progressif avec Suspense, et un exercice dédié à l'option expérimentale de reprise après coupure apparue avec Next.js 16.3.
Commerce en ligne, France ou Belgique
La boutique tourne encore sur l'ancien Pages Router, et l'équipe hésite à migrer vers l'App Router faute de comprendre le nouveau modèle de cache.
Les deux premiers jours sont condensés pour cette équipe, puis la migration d'une section du site sert d'exercice, avec la comparaison du poids des pages avant et après.
Éditeur de logiciel, Suisse ou Québec
Des développeurs back-end doivent reprendre l'interface d'un produit, sans expérience de React, alors que le développeur front-end vient de partir.
Parcours complet de quatre jours à distance, calé sur le fuseau horaire de l'équipe, avec la grille de décision serveur ou client appliquée au code réel du produit.
Intra, inter, à distance ou hybride : quel format choisir ?
| Format | Pour qui | Organisation | Durée |
|---|---|---|---|
| Intra-entreprise | Une équipe qui développe ou reprend une application React ou Next.js | Exercices sur une copie du code de l'organisation, liste de corrections priorisées et plan de montée de version en fin de session | 4 jours, ou 3 jours si l'équipe pratique déjà React |
| Inter-entreprises | Développeurs de structures différentes, indépendants | Chacun sur son projet fil rouge, aucun code interne montré au groupe | 4 jours, sur deux à quatre semaines |
| À distance | Équipes réparties entre l'Afrique, l'Europe et le Canada | Séances de 3 h 30 avec partage d'écran, relecture dans le dépôt Git de chacun | 8 séances, deux par semaine au plus |
| Hybride | Équipes qui préfèrent démarrer ensemble | Premier jour en salle à Cotonou ou dans vos locaux, la suite à distance | 4 jours, dont 1 en présentiel |
| Module « Next.js pour développeurs React » | Développeurs qui écrivent déjà des composants et des hooks sans hésiter | Démarrage au jour 2, après vérification du niveau par le test de positionnement | 3 jours |
Combien coûte la formation Next.js et React, et qu'est-ce qui fait varier le prix ?
Aucun tarif n'est publié : le prix est établi sur devis, après un premier échange et le test de positionnement, tous deux gratuits. Il se règle par Mobile Money (MTN, Moov), carte bancaire, PayPal, virement ou espèces. Les abonnements éventuels aux plateformes d'hébergement se paient directement aux éditeurs.
Formation complète
Sur devis
- Huit demi-journées
- Projet fil rouge mis en ligne
- Revue de code croisée
- Supports, corrigés et attestation
Module pour développeurs React
Sur devis
- Six demi-journées, à partir du jour 2
- Frontière serveur et client, données, déploiement
- Liste de contrôle de mise en ligne
Intra sur le code de l'équipe
Sur devis
- Lecture préalable d'une copie du code
- Exercices sur l'application réelle
- Liste de corrections priorisées
- Plan de montée de version
Suivi après la formation
Sur devis
- Questions d'application par écrit
- Relecture d'une branche
- Accompagnement d'une montée de version
Ce qui fait varier le prix
- Le nombre de participants et de groupes, huit développeurs au plus par groupe.
- La formule : quatre jours, module de trois jours, ou formation suivie d'un accompagnement.
- La préparation d'exercices sur le code de l'organisation, qui demande une lecture préalable.
- Le mode : sur place à Cotonou, dans vos locaux, à distance ou en formule hybride, et les déplacements.
- La durée du suivi après la dernière séance.
- La langue des séances et des supports, en français ou en anglais.
Un fonds de formation continue peut-il financer la formation ?
Cela dépend du fonds, du dossier et du prestataire ; aucune prise en charge n'est promise ici. En Côte d'Ivoire, la page du FDFP consacrée à l'habilitation, lue le 5 octobre 2026, soumet à cette habilitation annuelle tout opérateur de formation privé, mais en exclut les structures installées hors du pays : c'est le cas d'un formateur basé au Bénin. Au Bénin, le fonds de la formation continue a vu ses statuts approuvés par le décret n° 2022-286 du 11 mai 2022. Au Sénégal, le 3FPT reçoit en ligne les demandes de financement pour le personnel des entreprises.
En France, France Compétences rappelle que, depuis le 1er janvier 2022, un prestataire doit être certifié Qualiopi pour accéder aux fonds publics ou mutualisés, ceux des OPCO compris. Richard SALANON ne détient pas cette certification et n'a aucun agrément de fonds. Posez donc la question au fonds par écrit, avec le programme détaillé et le devis, et bâtissez votre budget comme si la réponse était négative. Les dispositifs pays par pays sont décrits sur la page formation en entreprise.
Quelles erreurs voit-on dans les projets après la formation, et comment les éviter ?
Ces erreurs reviennent dans presque toutes les applications Next.js relues en audit ou en formation intra. Elles se corrigent facilement quand on sait les chercher.
-
Mettre « use client » en haut du layout
C'est la solution de facilité quand une erreur bloque : tout devient composant client, et l'application perd l'intérêt du rendu serveur. On redescend la directive jusqu'au plus petit composant qui a réellement besoin du navigateur.
-
Charger les données dans un useEffect
Réflexe hérité des applications qui tournaient entièrement dans le navigateur : la page s'affiche vide, puis se remplit. Dans l'App Router, la lecture se fait dans le composant serveur, et la documentation française de React consacre une page entière aux Effets dont on n'a pas besoin.
-
Passer l'enregistrement complet à un composant client
Tout ce qui est transmis en props à un composant client part dans le navigateur, même si l'écran n'en affiche qu'une partie. On transmet un objet réduit aux champs affichés, préparé par la couche d'accès aux données.
-
Laisser filer les versions
Une application restée deux ans sans mise à jour accumule les correctifs de sécurité manqués et les changements à rattraper d'un coup. Une montée de version mineure chaque mois, sur une branche testée, coûte beaucoup moins cher qu'une migration forcée par une faille.
-
Héberger un site commercial sur une formule gratuite
La formule Hobby de Vercel est réservée à un usage personnel et non commercial. Le site d'une entreprise y contrevient aux conditions de la plateforme et ne peut pas acheter de consommation supplémentaire lors d'un pic de trafic.
-
Oublier que tous les serveurs doivent servir la même version
En auto-hébergement sur plusieurs serveurs, chacun doit exécuter la même compilation et partager la même clé de chiffrement des Server Actions. L'histoire de Knight Capital, où un seul serveur sur huit a gardé l'ancien code, montre ce que coûte un déploiement partiel.
-
Ne jamais regarder le poids des pages
Une bibliothèque de graphiques ou de dates importée dans un composant client peut doubler le JavaScript d'une page sans que personne ne s'en aperçoive sur une connexion de bureau. On mesure à chaque ajout de dépendance, sur un profil mobile lent.
Connexion, langue, données personnelles : que change le contexte local pour une application Next.js ?
Le poids du JavaScript pèse plus lourd là où les données mobiles coûtent cher. Selon le Web Almanac 2024 de HTTP Archive, une page médiane charge 558 Ko de JavaScript sur mobile, dont 44 % restent inutilisés au chargement. Le rendu serveur de Next.js permet de faire beaucoup mieux, à condition de tracer correctement la frontière client. La formation mesure chaque page du projet fil rouge sur un profil de téléphone d'entrée de gamme et de réseau lent, et compare avant et après chaque correction.
La langue joue aussi. La documentation de Next.js n'existe qu'en anglais, et la traduction française de la documentation de React, fr.react.dev, affichait encore la version 18.3.1 le 5 octobre 2026, alors que react.dev documente la 19.3. Les fondamentaux s'apprennent très bien en français ; les composants serveur, les actions et les nouveautés de 2026 se vérifient en anglais. Les séances se donnent en français, ou en anglais à la demande, et apprennent à lire efficacement la documentation d'origine.
Les données personnelles, enfin, voyagent avec la région d'exécution. Au Bénin, l'article 391 de la loi n° 2017-20 portant code du numérique encadre le transfert de données personnelles vers un État tiers ; une fonction qui traite des données de clients béninois dans la région par défaut de Vercel, aux États-Unis, constitue un tel transfert. En Europe, le RGPD s'applique, et le guide RGPD du développeur de la CNIL détaille ses conséquences sur le code. Tous les exercices utilisent des données fictives.
Côté infrastructure, les hébergements mutualisés courants en Afrique francophone proposent PHP, rarement Node.js. Selon la documentation de déploiement de Next.js, un export statique peut être servi par Apache ou Nginx, mais sans les fonctions qui exigent un serveur. La formation aide à choisir en connaissance de cause : export statique sur l'hébergement existant pour un site de contenu, plateforme ou serveur Node.js dès qu'il y a des comptes, des formulaires traités sur le serveur ou des données privées.
Pourquoi se former à Next.js et React avec Richard SALANON ?
Richard SALANON est consultant en digitalisation et développeur logiciel, basé à Cotonou, au Bénin. Il crée des sites, des applications web et mobiles, des automatisations et des intégrations d'intelligence artificielle, déploie Odoo et Dolibarr, et forme les équipes à ces outils, pour des entreprises d'Afrique francophone, d'Europe et du Canada.
Il conçoit des applications web sur mesure en Laravel, Vue ou React, et choisit Next.js quand l'interface est riche ou partagée avec une application mobile : il enseigne donc des arbitrages qu'il fait lui-même pour des projets réels. Avec 6 ans d'expérience dans le numérique et une formation à EPITECH (2022), il a créé Wapy, un assistant WhatsApp à intelligence artificielle pour les entreprises d'Afrique francophone, et il est co-fondateur d'Audyxa. Il indique avoir formé plus de 200 personnes au numérique, à l'IA, à l'automatisation et aux ERP.
Il a travaillé, sur place ou à distance, dans 15 pays d'Afrique francophone, d'Europe et d'Amérique du Nord. Sa manière de former tient en engagements que l'on peut contrôler : huit participants au plus, un test de positionnement avant tout devis, un projet réel par participant, des mesures plutôt que des affirmations, une mise en ligne avant la fin, et la franchise de conseiller une autre formation, ou une prestation, quand elle convient mieux. Son parcours est détaillé sur la page Richard SALANON, les pays servis sur la page zones d'intervention, et l'ensemble du catalogue sur la page formations.
Que retenir avant de s'inscrire ?
Vérifiez votre JavaScript avant de commencer, venez avec un projet précis, et gardez trois réflexes : un composant reste sur le serveur tant qu'il n'a pas besoin du navigateur, chaque Server Action revérifie qui l'appelle, et rien de secret ne porte le préfixe NEXT_PUBLIC_. Ensuite, choisissez l'hébergement selon l'endroit où doivent vivre vos données, et prévoyez une montée de version chaque mois.
Voulez-vous former vos développeurs à Next.js et React ?
Indiquez le nombre de développeurs, leur niveau en JavaScript et en React, l'application sur laquelle ils travaillent et le format souhaité. Vous recevez une réponse sous 24 heures, un test de positionnement, puis un programme ajusté et un devis.
Demander la formation Next.jsQuestions fréquentes
Quel niveau de JavaScript faut-il avant la formation Next.js et React ?
Il faut lire sans aide les fonctions fléchées, la déstructuration, map et filter, les modules import et export, et un appel fetch avec async et await. Le test de positionnement le vérifie en quelques minutes ; en cas de lacune, la formation au développement web ou une remise à niveau ciblée passe avant.
Faut-il apprendre React avant Next.js ?
Oui, et c'est l'objet du premier jour : composants, props, état, événements et formulaires. Next.js ajoute le routage, le rendu serveur et le déploiement, mais tout ce qu'il affiche reste du React. Les développeurs qui pratiquent déjà React commencent au deuxième jour.
Quelles versions de React et de Next.js sont enseignées ?
Les versions en cours au moment de la session. Le 5 octobre 2026, ce sont React 19.3, publié le 9 septembre 2026, et Next.js 16.3.8, version Active LTS publiée le 30 septembre 2026, avec Node.js 24 LTS. Le programme est mis à jour à chaque version majeure.
La formation couvre-t-elle l'ancien Pages Router ?
Elle enseigne l'App Router, recommandé par la documentation de Next.js. Pour une équipe dont l'application tourne encore sur le Pages Router, la formation intra ajoute une séquence sur la cohabitation des deux et sur la migration progressive, section par section.
TypeScript est-il obligatoire ?
Non, mais il est conseillé : create-next-app l'active par défaut et il évite beaucoup d'erreurs de props. La formation l'utilise à un niveau raisonnable, en typant les props et les données, sans exiger de connaissance préalable avancée.
Faut-il payer Vercel pour suivre la formation ?
Non. Une formule gratuite suffit pour les exercices, chez Vercel, Netlify ou Cloudflare. En revanche, la formule Hobby de Vercel est réservée à un usage personnel et non commercial : pour le site d'une entreprise, il faut une formule payante ou un autre hébergement.
Peut-on héberger une application Next.js sur un hébergement PHP mutualisé ?
Seulement sous forme d'export statique, servi par Apache ou Nginx, sans les fonctions qui exigent un serveur : Server Actions, rendu à la demande, authentification côté serveur. Pour une application avec comptes et données privées, il faut Node.js, un conteneur Docker ou une plateforme.
Quelle différence avec la formation Laravel et PHP ?
Laravel convient aux applications de gestion sur un hébergement PHP courant ; Next.js aux interfaces très interactives et aux équipes déjà à l'aise en JavaScript. Les deux fiches sont reliées en bas de page, et la page du domaine Développement aide à choisir selon le projet.
La formation apprend-elle à construire une API pour des partenaires ?
Non. Elle montre les Route Handlers de Next.js et la lecture d'API existantes, mais la conception, la documentation et la sécurisation d'une API publique relèvent de la formation API REST, reliée en bas de page.
Combien coûte la formation ?
Le prix est fixé sur devis, après un premier échange gratuit. Il dépend du nombre de développeurs, de la formule (quatre jours ou module de trois jours), de la préparation d'exercices sur votre code, du mode et du suivi prévu. Le règlement se fait par Mobile Money, carte bancaire, PayPal, virement ou espèces.
Peut-on suivre la formation entièrement à distance ?
Oui, en huit séances de trois heures et demie avec partage d'écran et relecture dans le dépôt Git de chacun. Les installations sont vérifiées avant la première séance, et chaque séance prévoit une solution de repli en cas de coupure.
Que reçoit-on à la fin ?
Le projet fil rouge en ligne et son dépôt, les corrigés, la grille de décision entre composant serveur et composant client, la grille de revue de code, la liste de contrôle de déploiement, la procédure de montée de version et une attestation de fin de formation. Aucune certification d'éditeur n'est délivrée.
Sources
- React, versions publiées (dernière version : 19.3), consulté le
- React, blog : React 19.3 (9 septembre 2026), consulté le
- React, blog : faille critique dans les composants serveur (3 décembre 2025), consulté le
- React, documentation en français (fr.react.dev), consulté le
- Next.js, blog : Next.js 16 (21 octobre 2025), consulté le
- Next.js, blog : Next.js 16.3 (3 août 2026), consulté le
- Next.js, blog : publication de sécurité de septembre 2026, consulté le
- Next.js, politique de support (Active LTS et Maintenance LTS), consulté le
- Next.js, documentation : installation et configuration requise, consulté le
- Next.js, documentation : composants serveur et composants client, consulté le
- Next.js, documentation : sécurité des données, consulté le
- Next.js, documentation : variables d'environnement, consulté le
- Next.js, documentation : déploiement, consulté le
- Node.js, versions publiées et statuts de support, consulté le
- Vercel, tarifs (Hobby, Pro, Enterprise), consulté le
- Vercel, documentation : régions, consulté le
- Netlify, tarifs, consulté le
- Cloudflare, tarifs de Workers, consulté le
- Stack Overflow, Developer Survey 2025 : technologies, consulté le
- HTTP Archive, Web Almanac 2024 : JavaScript, consulté le
- Secrétariat général du Gouvernement du Bénin, loi n° 2017-20 du 20 avril 2018 portant code du numérique, consulté le
- CNIL, guide RGPD du développeur, consulté le
- FDFP, procédures d'habilitation des opérateurs de formation, consulté le
- Secrétariat général du Gouvernement du Bénin, décret n° 2022-286 du 11 mai 2022 portant approbation des statuts du FODEFCA, consulté le
- 3FPT, guichets de financement, consulté le
- France Compétences, Qualiopi : l'obligation qualité en vigueur depuis le 1er janvier 2022, consulté le