CareerWeb DevelopmentIntermediate

React et Next.js : construire des applications web modernes

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

  • 24 h of training
  • 8 modules · 40 lessons
  • 97 exercises
  • 8 projects
  • Certificate included

What you will be able to do

  • 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

What you will produce

  • 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

Possible earnings

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).

Indicative estimate, depending on your market, pace and work. No income is guaranteed.

Tools used

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

What you'll learn

  • 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

Prerequisites

  • 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

About this course

## 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.

Who it is for: 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.

Curriculum

A module-by-module path: lessons, exercises, quizzes and projects to submit.

  1. Module 1· 12 exercises

    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 composantsFree preview18 min
    • Créer le projet avec Vite et écrire du JSXFree preview20 min
    • Les props : des composants réutilisablesFree preview20 min
    • Composer une page : children, listes simples et stylesFree preview20 min
    • Support du module (PDF)Free preview5 min
    • Quiz : composants, JSX et propsModule quiz
    • La carte de Chez Fatou en composants ReactProject to submit

  2. Module 2· 13 exercises

    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énementsModule quiz
    • Le panier interactif de Chez FatouProject to submit

  3. Module 3· 12 exercises

    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 formulairesModule quiz
    • Le formulaire de commande validéProject to submit

  4. Module 4· 12 exercises

    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 hooksModule quiz
    • Le menu du jour chargé depuis une APIProject to submit

  5. Module 5· 12 exercises

    É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 architectureModule quiz
    • L'application de commande complète de Chez FatouProject to submit

  6. Module 6· 12 exercises

    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 RouterModule quiz
    • Le site Next.js du salon Awa BeautéProject to submit

  7. Module 7· 12 exercises

    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 authentificationModule quiz
    • La réservation en ligne et l'espace géranteProject to submit

  8. Module 8· 12 exercises

    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éploiementModule quiz
    • Projet final : l'application Awa Beauté testée et en ligneCapstone

  9. Certificate included

Your certificate at the end

A numbered certificate with your validated skills, a public page and a verification QR code. Add it to LinkedIn in one click.

Kolonell Academy
Verified by Kolonell Academy

Certificate of skills

Your name

has completed and validated the course

React et Next.js : construire des applications web modernes

Certified skills

  • 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

Number KOL-CERT-2026-XXXXX

Mohamed Bah

Founder, Kolonell Academy

Poster for React et Next.js : construire des applications web modernes

Course poster

Download the poster to print it, send it to your employer or share it with colleagues. The full programme details every module.

Download PNGDownload PDFFull programme (PDF)

This course is part of the track

Développement web

Level 4 of 5 · Career

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
See the 5 track levels

Next level · 5/5 Pro Track

Développeur Full-Stack JavaScript

Senior level, projects and leadership

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

200,000 FCFA 45 h

View the next level

Your instructor

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 about this course

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.

How do I pay?

Via Wave or Orange Money. After enrolling you receive a pro forma invoice by email with the number to pay. Send the proof on WhatsApp: your access is activated within 24 business hours.

How long do I keep access?

For life, updates included. Learn at your own pace and revisit lessons as often as you need.

How do I get the certificate?

Complete the lessons and pass each module quiz with at least 70%. The certificate is generated automatically, with a unique number and a public verification page.

Our commitments

  • Lifetime access, updates included
  • Publicly verifiable certificate
  • Wave / Orange Money payment, activation within 24 business hours
  • WhatsApp support

100,000 FCFA · 152 €

Career