Skip to content
Yassir Halaoui
Read in English

Compétence

React, Next.js et TypeScript, des micro-frontends aux sites qui se positionnent

J’écris du React depuis la version 17, dans des back-offices bancaires, un portail de paiement et tous les produits que j’ai construits. Dernièrement : un micro-frontend React 19 dans un portail multi-pays, et des sites Next.js qui se positionnent.

En bref

Yassir Halaoui est développeur React senior. Il travaille avec React 17 à 19, Next.js, TypeScript et des micro-frontends en Module Federation. Il a livré un micro-frontend React 19 dans un portail de paiement multi-pays, avec un client typé généré depuis l’OpenAPI, et construit RevealTogether, TheQuizMaster et ce site avec Next.js.

Où je l'ai utilisée

  1. Pluxee · depuis 2025

    Livraison d’un micro-frontend React 19 et TypeScript en Module Federation dans un portail hôte multi-pays, avec un client BFF typé généré depuis la spécification OpenAPI par un hook Git.

  2. Société Générale · 2022 à 2024

    Développement du front React et TypeScript d’une application de signature électronique de documents bancaires, avec des écrans pilotés par les rôles et les permissions.

  3. Docaposte · 2024 à 2025

    Développement d’écrans React et TypeScript pour une plateforme d’échange de données entre assureurs.

  4. RevealTogether

    Du Next.js en anglais, français et espagnol, avec un compte à rebours en direct et des votes synchronisés sur l’écran de chaque invité.

  5. Ce site

    Next.js 16 avec React 19 et le React Compiler, toutes les routes pré-rendues, en deux langues, sans JavaScript côté client pour ses animations.

Tout ce que couvre ce domaine

React
  • React 17
  • React 18
  • React 19
  • React Compiler
  • Server Components
Frameworks et build
  • Next.js
  • Vite
  • Module Federation
Langages
  • TypeScript
  • JavaScript
  • HTML5
  • CSS3
État et données
  • Redux
  • Redux Toolkit
  • RTK Query
  • TanStack Query
  • Zustand
  • Context API
  • Zod
Interface
  • Tailwind CSS
  • Material UI
  • Chakra UI
  • Emotion
  • i18next
Tests
  • Vitest
  • Jest
  • React Testing Library

En profondeur

Les micro-frontends, quand l’organisation les exige

Module Federation règle un problème d’équipes plus qu’un problème technique : plusieurs équipes qui livrent dans un même portail à leur propre rythme. Le prix, c’est une discipline sur les dépendances partagées et un contrat entre hôte et remote. Ce qui a sécurisé le nôtre, c’est la régénération du client d’API depuis l’OpenAPI à chaque commit : un changement backend cassait le build, pas la page.

Le serveur d’abord

Sur Next.js, je pars des Server Components et de la génération statique, et j’ajoute du code client seulement là où une API du navigateur l’exige. C’est pour ça que ce site n’envoie aucun JavaScript pour ses animations et que chaque page est pré-rendue : rapide pour les visiteurs, complète pour les robots.

Typé de l’API jusqu’au bouton

TypeScript en mode strict, Zod partout où les données viennent de l’extérieur, et des clients générés plutôt que des fetch écrits à la main. L’objectif est simple : un champ renommé échoue en CI, pas devant un client.

Questions

Pouvez-vous développer des micro-frontends React avec Module Federation ?

Oui. J’en ai livré un dans un portail de paiement multi-pays, en React 19 et TypeScript. Le travail qui compte porte sur la politique de dépendances partagées et un client d’API typé et généré, plus que sur la configuration de la fédération.

Pouvez-vous migrer une application vers Next.js App Router ou React 19 ?

Oui. Ce site tourne sur Next.js 16 et React 19 avec le compilateur activé. Une migration avance route par route, en déplaçant d’abord la récupération des données côté serveur, là où se trouve l’essentiel des gains de performance et de SEO.

React est-il mauvais pour le SEO ?

Le React rendu uniquement côté client peut l’être. Le React rendu côté serveur ou généré statiquement ne l’est pas : le robot reçoit un HTML complet. La plupart des problèmes de SEO avec React sont des choix de rendu, et ils se corrigent.

Quelle gestion d’état recommandez-vous ?

L’état serveur dans TanStack Query ou RTK Query, très peu d’état global, et Zustand ou le contexte pour le reste. La plupart des applications qui sortent un gros store global mettent en cache des données serveur à la main.

Notes de terrain

Réalisations

Compétences liées