MétierDéveloppement webIntermédiaire

React et Next.js : construire des applications web modernes

Deux applications React et Next.js en ligne dans ton portfolio

  • 24 h de formation
  • 8 modules · 40 leçons
  • 97 exercices
  • 8 projets
  • Certificat inclus

Ce que vous saurez faire

  • Développement d'interfaces React (composants, props, hooks, formulaires contrôlés)
  • Gestion d'état React (useState, useReducer, Context, hooks personnalisés)
  • Next.js App Router (routing, Server Components, Server Actions, Route Handlers)
  • Validation de données avec Zod et authentification par session
  • Tests automatisés avec Vitest et Testing Library
  • Optimisation des Core Web Vitals et déploiement sur Vercel ou VPS

Ce que vous produisez

  • La carte d'un restaurant découpée en composants React
  • Un panier interactif avec total, frais de livraison et état dérivé
  • Un formulaire de commande validé avec états d'envoi
  • Un menu chargé depuis une API avec hooks personnalisés
  • Une application de commande complète avec panier global persistant
  • Un site Next.js multi-pages avec SEO et pages dynamiques
  • Une prise de rendez-vous par Server Actions avec espace d'administration protégé
  • L'application de réservation testée, optimisée et en ligne, avec son README de portfolio

Revenus possibles

Un développeur React et Next.js junior peut facturer une application de commande ou de réservation pour PME entre 400 000 et 1 200 000 FCFA à Dakar ou à Abidjan, ou viser un stage puis un premier poste payé 200 000 à 400 000 FCFA par mois à Dakar en 2026, jusqu'à 500 000 FCFA en start-up en forte croissance (les projets avec base de données, paiement et API relèvent du niveau 5).

Estimation indicative, selon votre marché, votre rythme et votre travail. Aucun revenu n’est garanti.

Outils utilisés

  • React 19
  • Next.js 15
  • Vite
  • Node 22 et npm
  • Zod
  • Vitest
  • Testing Library
  • Lighthouse
  • Vercel
  • Git et GitHub

Ce que vous allez apprendre

  • Découper une interface en composants React réutilisables avec props et children
  • Gérer l'état local, les événements et l'état dérivé sans muter les données
  • Construire des formulaires contrôlés avec validation et messages d'erreur utiles
  • Charger des données avec gestion du chargement et des erreurs, et écrire des hooks personnalisés
  • Organiser un état global avec useReducer et Context, persisté dans le navigateur
  • Construire une application Next.js App Router avec Server Components, Server Actions et pages protégées
  • Tester, optimiser et déployer une application Next.js en production

Prérequis

  • Niveau 3 du parcours (JavaScript : rendre un site vivant et interactif) recommandé, ou maîtriser fonctions, tableaux, objets, DOM, modules ES et fetch
  • Bases de HTML et CSS (niveau 2 ou équivalent)
  • Un ordinateur avec Node 22, VS Code, Git et Google Chrome
  • 4 à 5 heures par semaine pendant 5 à 6 semaines

À propos de cette formation

## Passe du script qui manipule le DOM à l'application qu'on livre à un client À Dakar comme à Abidjan, les PME ne demandent plus seulement un site vitrine. Elles veulent une commande en ligne, une prise de rendez-vous, un espace d'administration, un tableau de bord. Ces applications se construisent aujourd'hui avec React et Next.js. Cette formation t'apprend à les écrire proprement, à les tester et à les mettre en ligne. ### À qui s'adresse cette formation - Tu as suivi le niveau 3 (JavaScript : rendre un site vivant et interactif) ou tu maîtrises déjà fonctions, tableaux, objets, DOM et `fetch`. - Tu veux passer à un outil professionnel, celui que demandent les offres de stage et de mission. - Tu es freelance et tu veux proposer des applications, pas seulement des pages. ### Ce que tu fais pendant la formation - Tu découpes une interface en composants React, tu gères l'état, les événements et les formulaires validés. - Tu charges des données, tu écris tes propres hooks et tu organises un état global avec `useReducer` et Context. - Tu passes à Next.js : App Router, Server Components, métadonnées et SEO. - Tu traites les formulaires côté serveur avec les Server Actions et Zod, tu protèges un espace d'administration. - Tu testes ta logique avec Vitest et Testing Library, tu mesures la performance et tu déploies. ### Ce avec quoi tu repars Deux applications complètes : la commande en ligne d'un restaurant de Thiès en React, puis l'application de réservation d'un salon de beauté de Dakar en Next.js, testée et en ligne. Chaque module produit un livrable de portfolio. ### Ta place dans le parcours Développement web C'est le niveau 4 : après le niveau 3 (JavaScript : rendre un site vivant et interactif), avant le niveau 5 (Développeur full-stack JavaScript), qui ajoute la base de données, l'API, les paiements et le portfolio complet.

Public visé : Développeurs débutants qui maîtrisent les bases de JavaScript (fonctions, tableaux, DOM, fetch), étudiants en informatique, intégrateurs et freelances de Dakar, Thiès, Abidjan, Bamako, Cotonou ou de la diaspora qui veulent livrer des applications web modernes avec React et Next.js.

Programme

Un chemin module par module : leçons, exercices, quiz et projets à rendre.

  1. Module 1· 12 exercices

    Démarrer avec React : composants, JSX et props

    Tu crées ton premier projet React avec Vite et tu découpes la carte d'un restaurant en composants réutilisables.

    • Pourquoi React : du DOM à la main aux composantsAperçu gratuit18 min
    • Créer le projet avec Vite et écrire du JSXAperçu gratuit20 min
    • Les props : des composants réutilisablesAperçu gratuit20 min
    • Composer une page : children, listes simples et stylesAperçu gratuit20 min
    • Support du module (PDF)Aperçu gratuit5 min
    • Quiz : composants, JSX et propsQuiz de validation
    • La carte de Chez Fatou en composants ReactProjet à rendre

  2. Module 2· 13 exercices

    State et événements : rendre l'interface interactive

    Tu donnes une mémoire à tes composants avec useState, tu réagis aux clics et tu construis un panier dont le total se calcule tout seul.

    • useState : la mémoire d'un composant20 min
    • Gérer les événements et mettre à jour sans muter20 min
    • Lever le state : partager des données entre composants18 min
    • State dérivé : calculer plutôt que stocker18 min
    • Support du module (PDF)5 min
    • Quiz : state et événementsQuiz de validation
    • Le panier interactif de Chez FatouProjet à rendre

  3. Module 3· 12 exercices

    Listes, formulaires et validation

    Tu affiches des listes filtrées et triées, tu construis un formulaire de commande contrôlé et tu le valides avant l'envoi.

    • Afficher, filtrer et trier des listes avec des clés stables18 min
    • Formulaires contrôlés : champs, listes déroulantes et cases à cocher20 min
    • Valider les saisies : numéros, champs obligatoires et messages d'erreur20 min
    • Soumettre proprement : états d'envoi, blocage du double clic et confirmation18 min
    • Support du module (PDF)5 min
    • Quiz : listes et formulairesQuiz de validation
    • Le formulaire de commande validéProjet à rendre

  4. Module 4· 12 exercices

    Effets, données et hooks personnalisés

    Tu charges des données depuis une API avec chargement, erreur et annulation, puis tu ranges cette logique dans tes propres hooks.

    • useEffect : synchroniser un composant avec l'extérieur20 min
    • Charger des données : chargement, erreur et liste vide20 min
    • Écrire ses propres hooks : useFetch et useLocalStorage20 min
    • useRef, useMemo et les effets dont tu n'as pas besoin18 min
    • Support du module (PDF)5 min
    • Quiz : effets et hooksQuiz de validation
    • Le menu du jour chargé depuis une APIProjet à rendre

  5. Module 5· 12 exercices

    État global et architecture d'une application React

    Tu centralises les transitions d'état avec useReducer, tu partages le panier avec Context et tu organises le projet pour qu'il tienne dans la durée.

    • useReducer : centraliser les transitions d'état20 min
    • Context : partager un état sans passer les props partout18 min
    • Un panier global persistant : reducer, Context et localStorage20 min
    • Organiser les dossiers et choisir une bibliothèque d'état18 min
    • Support du module (PDF)5 min
    • Quiz : état global et architectureQuiz de validation
    • L'application de commande complète de Chez FatouProjet à rendre

  6. Module 6· 12 exercices

    Next.js : App Router, rendu serveur et SEO

    Tu passes à Next.js : routes par fichiers, layouts, Server et Client Components, données chargées sur le serveur et métadonnées pour Google.

    • De React à Next.js : pourquoi le rendu serveur compte18 min
    • Routing par fichiers, layouts et routes dynamiques20 min
    • Server Components, Client Components et chargement des données20 min
    • Métadonnées, images et SEO d'une application Next.js18 min
    • Support du module (PDF)5 min
    • Quiz : Next.js App RouterQuiz de validation
    • Le site Next.js du salon Awa BeautéProjet à rendre

  7. Module 7· 12 exercices

    Server Actions, validation serveur et authentification

    Tu traites les formulaires sur le serveur avec les Server Actions et Zod, tu exposes une API avec un Route Handler et tu protèges l'espace d'administration.

    • Server Actions : traiter un formulaire sans écrire d'API20 min
    • Valider côté serveur avec Zod et renvoyer les erreurs au formulaire20 min
    • Route Handlers : exposer une API propre18 min
    • Authentification : session, middleware et pages protégées22 min
    • Support du module (PDF)5 min
    • Quiz : Server Actions et authentificationQuiz de validation
    • La réservation en ligne et l'espace géranteProjet à rendre

  8. Module 8· 12 exercices

    Tests, performance et mise en production

    Tu testes la logique et les composants, tu mesures et améliores la performance sur mobile, puis tu déploies l'application et tu la présentes dans ton portfolio.

    • Tester la logique avec Vitest20 min
    • Tester les composants avec Testing Library20 min
    • Performance : Core Web Vitals, poids du JavaScript et réseau mobile18 min
    • Déployer : Vercel ou VPS, variables d'environnement et checklist de livraison20 min
    • Support du module (PDF)5 min
    • Quiz : tests, performance et déploiementQuiz de validation
    • Projet final : l'application Awa Beauté testée et en ligneCapstone

  9. Certificat inclus

Votre certificat à la fin

Un certificat numéroté, avec les compétences validées, une page publique et un QR code de vérification. À ajouter sur LinkedIn en un clic.

Kolonell Academy
Vérifié par Kolonell Academy

Certificat de compétences

Votre nom

a suivi et validé la formation

React et Next.js : construire des applications web modernes

Compétences certifiées

  • Développement d'interfaces React (composants, props, hooks, formulaires contrôlés)
  • Gestion d'état React (useState, useReducer, Context, hooks personnalisés)
  • Next.js App Router (routing, Server Components, Server Actions, Route Handlers)
  • Validation de données avec Zod et authentification par session
  • Tests automatisés avec Vitest et Testing Library
  • Optimisation des Core Web Vitals et déploiement sur Vercel ou VPS

Numéro KOL-CERT-2026-XXXXX

Mohamed Bah

Fondateur, Kolonell Academy

Affiche de la formation React et Next.js : construire des applications web modernes

Affiche de la formation

Téléchargez l'affiche pour l'imprimer, l'envoyer à votre employeur ou la partager avec vos collègues. Le programme complet détaille chaque module.

Télécharger PNGTélécharger PDFProgramme complet (PDF)

Ce cours fait partie du parcours

Développement web

Niveau 4 sur 5 · Métier

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
Voir les 5 niveaux du parcours

Niveau suivant · 5/5 Parcours Pro

Développeur Full-Stack JavaScript

Le niveau senior, projets et encadrement

Ton application full-stack en ligne et 8 projets sur GitHub à la fin du parcours

200 000 FCFA 45 h

Voir le niveau suivant

Votre formateur

Mohamed Bah

Docteur en informatique et fondateur de Kolonell, agence-plateforme digitale basée à Dakar. Il conçoit et déploie des sites et des applications web pour des PME au Sénégal, en Côte d'Ivoire et dans la diaspora, avec les outils enseignés dans ce parcours : React, Next.js, Node et Git.

Questions sur cette formation

Faut-il avoir suivi le niveau 3 ?

C'est recommandé. Si tu sais déjà écrire des fonctions, utiliser map et filter, manipuler le DOM et appeler une API avec fetch, tu peux commencer directement ici.

Pourquoi React et Next.js plutôt que Vue ou Angular ?

React est la bibliothèque la plus demandée dans les offres de stage et de mission en Afrique francophone comme en Europe en 2026, et Next.js est le cadre le plus utilisé pour la livrer en production. Les notions apprises (composants, état, rendu serveur) se transposent ensuite à Vue ou Svelte.

Mon ordinateur est ancien, est-ce que ça suffit ?

Un ordinateur avec 8 Go de RAM fait tourner Vite et Next.js en développement sans problème. Avec 4 Go, ferme Chrome pendant les builds et privilégie Vite pour les modules 1 à 5.

Faut-il connaître TypeScript ?

Non. Les modules 1 à 5 sont en JavaScript. À partir du module 6, les exemples Next.js sont en TypeScript léger, expliqué au fil de l'eau : des types de props et d'objets, rien de plus.

Les exercices de code sont-ils corrigés ?

Oui. Les exercices sur la logique (calculs de panier, validation, reducers, helpers) sont testés automatiquement dans le navigateur. Les notions propres à React et Next.js sont vérifiées par des questions et par les projets de fin de module.

Combien de temps par semaine ?

Compte 4 à 5 heures par semaine pendant 5 à 6 semaines, projets compris. Le projet final demande à lui seul 4 heures environ.

Comment payer ?

Par Wave ou Orange Money. Après inscription, vous recevez une facture pro forma par email avec le numéro à créditer. Envoyez la preuve sur WhatsApp : votre accès est activé sous 24 h ouvrées.

Combien de temps ai-je accès à la formation ?

À vie, mises à jour comprises. Vous avancez à votre rythme et vous pouvez revenir sur les leçons autant de fois que nécessaire.

Comment obtenir le certificat ?

Terminez les leçons et validez chaque quiz de module avec au moins 70 %. Le certificat est généré automatiquement, avec un numéro unique et une page publique vérifiable.

Nos engagements

  • Accès à vie et mises à jour incluses
  • Certificat vérifiable publiquement
  • Paiement Wave / Orange Money, activation sous 24 h ouvrées
  • Support WhatsApp

100 000 FCFA · 152 €

Métier