Architecter l'internationalisation dans les applications React : guide complet de la localisation évolutive

Introduction

Au cours des trois derniers mois, j'ai travaillé en solo sur une idée Mega SaaS. Même si ce fut un voyage passionnant, les défis ont été immenses. À l'approche des deux dernières semaines, proposer des cas d'utilisation hautement prioritaires tout en maintenant la qualité a été ma priorité absolue.

L'une des décisions clés auxquelles j'ai été confronté était d'intégrer ou non l'internationalisation (i18n) pour prendre en charge plusieurs langues. Au départ, j'avais tendance à lancer une version uniquement en anglais, en tirant parti des LLM pour les traductions à l'avenir. Cependant, en tant qu'équipe composée d'une seule personne, j'ai choisi de me concentrer pour l'instant sur un seul marché lucratif.

Bien que facultative pour mon projet, l'internationalisation est indispensable dans le cadre professionnel en raison des exigences légales et réglementaires. Ce blog explique comment concevoir une architecture i18n évolutive et efficace, en évitant les pièges tels qu'une grande complexité ou une mauvaise structure : des informations qui peuvent profiter à la fois aux développeurs individuels et aux équipes.

Depuis que j'ai décidé de ne pas implémenter i18n dans mon projet, je partage ce guide pour aider les autres (et mon futur moi !).

---

Objectifs

Un bon système d'internationalisation doit :

• Évolutivité : Prise en charge d'une collaboration transparente entre les équipes pour les traductions et les mises à jour linguistiques.
• Modularité : Conserver une structure simple et facile à étendre sans frais généraux.
• Prévisibilité : Suivez des modèles cohérents et applicables pour la localisation.
• Adapté aux débutants : Soyez accessible aux développeurs de différents niveaux de compétence.

---

Outils disponibles

Pour l'internationalisation en JavaScript, voici quelques outils populaires :

• i18next : Une bibliothèque mature et riche en fonctionnalités, idéale pour une localisation évolutive et de qualité professionnelle.
• Alternatives : FormatJS, Polyglot.js, LinguiJS, GlobalizeJS, Fluent par Mozilla.

Chaque outil a ses avantages et ses inconvénients. Par souci de simplicité, ce guide se concentre sur i18next.

---

Concevoir l'architecture

Structure des dossiers pour l'internationalisation

L'architecture est centrée autour d'un dossier i18n contenant trois composants clés :

1. Dossier de traductions : Stocke les fichiers JSON pour chaque langue (par exemple, en.json, ar.json, ch.json) et un modèle base.json pour les nouvelles langues.

2. index.js : Configure et initialise la bibliothèque i18n (par exemple, i18next), en définissant des langues de secours et d'autres options.

3. keys.js : Une structure centralisée définissant les clés de traduction, garantissant la cohérence et évitant les duplications.

Exemple de structure de dossier :

src/
├── i18n/
│   ├── translations/
│   │   ├── en.json       # English translations
│   │   ├── ar.json       # Arabic translations
│   │   ├── ch.json       # Chinese translations
│   │   └── base.json     # Template for new languages
│   ├── index.js          # i18n configuration
│   └── keys.js           # Centralized keys for consistency

---

keys.js comme hub central

Le fichier keys.js reflète la structure du projet, regroupant les clés par fonctionnalité ou module. Cette structure rend la gestion des clés intuitive et évolutive.

Exemple de clés.js :

const keys = {
  components: {
    featureA: {
      buttonText: "components.featureA.buttonText",
      label: "components.featureA.label",
    },
    featureB: {
      header: "components.featureB.header",
    },
  },
};

export default keys;

---

Fichiers de traduction

Les fichiers JSON de traduction s'alignent sur la structure de keys.js, garantissant ainsi la cohérence.

Exemple en.json :

{
  "components": {
    "featureA": {
      "buttonText": "Submit",
      "label": "Enter your name"
    },
    "featureB": {
      "header": "Welcome to Feature B"
    }
  }
}

Exemple ar.json :

{
  "components": {
    "featureA": {
      "buttonText": "إرسال",
      "label": "أدخل اسمك"
    },
    "featureB": {
      "header": "مرحبًا بكم في الميزة ب"
    }
  }
}

---

Configuration d'i18next

Installer i18next et son intégration React :

npm install i18next react-i18next

i18n/index.js :

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import en from "./translations/en.json";
import ar from "./translations/ar.json";

i18n.use(initReactI18next).init({
  resources: { en: { translation: en }, ar: { translation: ar } },
  lng: "en", // Default language
  fallbackLng: "en",
  interpolation: { escapeValue: false }, // React handles escaping
});

export default i18n;

---

Intégration de i18n dans les composants

Exemple de composant (FonctionA) :

import React from "react";
import { useTranslation } from "react-i18next";
import keys from "../../i18n/keys";

const FeatureA = () => {
  const { t } = useTranslation();

  return (
    <div>
      <h2>Feature A</h2>
      <button>{t(keys.components.featureA.buttonText)}</button>
      <label>{t(keys.components.featureA.label)}</label>
    </div>
  );
};

export default FeatureA;

---

Ajout d'un sélecteur de langue

Un sélecteur de langue permet aux utilisateurs de basculer entre les langues.

LanguageSwitcher.jsx :

import React from "react";
import { useTranslation } from "react-i18next";

const LanguageSwitcher = () => {
  const { i18n } = useTranslation();

  const changeLanguage = (lang) => {
    i18n.changeLanguage(lang);
  };

  return (
    <div>
      <button onClick={() => changeLanguage("en")}>English</button>
      <button onClick={() => changeLanguage("ar")}>العربية</button>
    </div>
  );
};

export default LanguageSwitcher;

---

Structure du dossier final

src/
├── components/
│   ├── featureA/
│   │   ├── index.jsx
│   │   └── featureAStyles.css
│   └── shared/
│       └── LanguageSwitcher.jsx
├── i18n/
│   ├── translations/
│   │   ├── en.json
│   │   ├── ar.json
│   │   └── base.json
│   ├── keys.js
│   └── index.js
├── App.jsx
├── index.js

---

Aller au-delà

1. Tirez parti de l'IA pour les traductions : Utilisez les LLM pour des traductions rapides. Par exemple, invitez :
   
   "Traduisez le JSON suivant en chinois : {contenu de en.json}."

2. Traductions basées sur le backend : Centralisez les traductions sur le backend pour permettre des mises à jour dynamiques sans déploiement de code. Les options incluent GitOps ou un service backend dédié.

---

Démo

Bac à sable : https://codesandbox.io/p/sandbox/785hpz

---

Conclusion

L'internationalisation est une étape critique pour faire évoluer les applications à l'échelle mondiale. En suivant ce guide, vous disposerez d'une architecture évolutive, modulaire et conviviale pour les débutants qui prend en charge une localisation transparente pour les projets solo ou les grandes équipes.

Bon codage !

— Ahmed R. Aldhafeeri

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!