
De MUI à shadcn/ui : reconstruire notre design system
Leçons d'une migration depuis une lib CSS-in-JS lourde vers une bibliothèque de composants que l'on possède.
Comment next-intl et un schéma Firestore localisé nous permettent de livrer chaque page dans les deux langues.
Par Kamga Simo Junior
La plupart des sites multilingues que j'ai vus sont anglais-first avec une traduction française ajoutée plus tard — et les coutures se voient. Nous voulions que l'anglais et le français soient pairs dès le premier jour.
Chaque URL commence par la locale : /en/about, /fr/about. Pas de changement de domaine, pas de sous-domaines. Le middleware next-intl gère la redirection à la première visite, persiste le choix dans NEXT_LOCALE et émet les bonnes balises hreflang.
Chaque document de contenu porte les deux traductions en champs frères : title.en et title.fr. Le rendu lit la locale active et bascule sur en avec un petit badge en mode dev si le champ FR manque. Pas de collection française séparée, pas de dérive de traduction.
Le français est en moyenne 25 % plus large que l'anglais pour le même texte. Chaque composant est conçu avec cette marge — boutons, items de navigation, titres — pour que la version FR ne casse pas la mise en page.

Leçons d'une migration depuis une lib CSS-in-JS lourde vers une bibliothèque de composants que l'on possède.

App Router, React Server Components, et un backend Firebase — la décision derrière la stack du site J7Soft.
Parcourez nos dernières notes d'ingénierie, de produit et de société.