Traduisez les applications React avec l’IA de qualité humaine

Exemple i18n React : démonstration d’un projet React traduisible

Si votre projet React n’est pas encore configuré pour la localisation, ne vous inquiétez pas. Dans cette section, nous vous guiderons à travers une application de démonstration et des exemples de références de commit.

Ce guide suppose que vous avez déjà une application React + TypeScript en cours d’exécution (Vite, CRA, Next ou similaire) et au moins quelques chaînes d’interface utilisateur (UI) en anglais. Nous allons ajouter la prise en charge de l’internationalisation (i18n), organiser les fichiers de traduction et utiliser Private Translation Cloud pour générer des traductions rapidement et facilement.

Pour préparer votre application à la localisation, vous devez déplacer le texte hors des composants et dans les fichiers de traduction. Cela permet d’ajouter d’autres langues plus tard sans modifier votre code.

La façon la plus courante de le faire dans React est d’utiliser i18next et son package d’intégration React react-i18next.

1. Installez les bibliothèques :

npm install i18next react-i18next

npm install i18next react-i18next

2. Créer un dossier pour les fichiers de traduction :

src/i18n/
└── locales/
 └── en.json

src/i18n/
└── locales/
    └── en.json

C’est là que vivront toutes les traductions. Chaque fichier à l’intérieur de src/i18n/locales/ représente une seule langue. Pour l’instant, vous n’avez besoin que de en.json pour l’anglais. Plus tard, Private Translation Cloud générera des fichiers supplémentaires comme fr.json (français) ou de.json (allemand) et les placera dans ce même dossier, afin que tout reste organisé au même endroit.

3. Ajoutez vos chaînes de langue source (anglais) à en.json :

{
 "welcome": "Welcome",
 "description": "This is a localization demo.",
 "clickMe": "Click me"
}

{
  "welcome": "Welcome",
  "description": "This is a localization demo.",
  "clickMe": "Click me"
}

4. Remplacez le texte codé en dur dans App.tsx par des clés de traduction qui font référence au fichier JSON :

import { useTranslation } from 'react-i18next';

function App() {
 const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>
    </div>
  );
}

import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>
    </div>
  );
}

Si vous vous demandez d’où vient la fonction t, nous allons la configurer à l’étape suivante lors de la configuration d’i18n. Pour l’instant, l’important est que votre composant ne repose plus sur du texte anglais codé en dur.

À l’étape précédente, vous avez créé en.json et mis à jour votre composant pour qu’il fasse référence aux clés de traduction. Pour l’instant, cependant, i18n ne sait pas où chercher ces fichiers JSON. Nous devons le configurer pour que la fonction t() puisse réellement extraire les bonnes chaînes.

Au lieu d’importer chaque fichier de langue manuellement, vous pouvez utiliser Vite’s import.meta.glob pour charger automatiquement chaque fichier *.json à l’intérieur de src/i18n/locales/. Cela signifie que lorsque vous ajouterez plus tard des fichiers comme fr.json ou de.json (depuis Private Translation Cloud), ils seront détectés sans travail supplémentaire.

1. Créer src/i18n/index.ts et configurer i18next pour charger automatiquement vos fichiers JSON :

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const modules = import.meta.glob('./locales/*.json', { eager: true }) as Record<
  string,
 { default: Record<string, any> }
>;

const resources: Record<string, { translation: any }> = {};
for (const path in modules) {
 const lang = path.match(/.\/locales\/(.*)\.json$/)?.[1];
 if (lang) {
 resources[lang] = { translation: modules[path].default };
 }
}

i18n
 .use(initReactI18next)
 .init({
 resources,
 fallbackLng: 'en',
 interpolation: { escapeValue: false },
 });

export default i18n;

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const modules = import.meta.glob('./locales/*.json', { eager: true }) as Record<
  string,
  { default: Record<string, any> }
>;

const resources: Record<string, { translation: any }> = {};
for (const path in modules) {
  const lang = path.match(/\.\/locales\/(.*)\.json$/)?.[1];
  if (lang) {
    resources[lang] = { translation: modules[path].default };
  }
}

i18n
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'en',
    interpolation: { escapeValue: false },
  });

export default i18n;

2. Importez cette configuration une fois dans votre fichier d’entrée (src/main.tsx) afin que i18next soit prêt avant le rendu de l’application :

import './i18n';

import './i18n';

Grâce à cela, votre application React sait où trouver les fichiers de traduction. Lorsque Private Translation Cloud générera plus tard de nouveaux fichiers, comme fr.json, vous n’aurez pas besoin de modifier votre code ou d’ajouter des importations. Tout ce que vous aurez à faire est de vous assurer que le fichier traduit se trouve dans src/i18n/locales/. La prochaine fois que vous exécuterez l’application, i18n rendra automatiquement le français disponible avec l’anglais.

Maintenant que votre application lit les messages depuis src/i18n/locales/en.json, vous pouvez utiliser Private Translation Cloud pour générer les traductions dans d’autres langues.

1. Une fois que vous vous êtes inscrit pour un essai gratuit ou que vous vous êtes connecté à votre compte Private Translation Cloud, ouvrez l’assistant de configuration et ajoutez votre fichier source anglais comme ressource traduisible :

src/i18n/locales/en.json

src/i18n/locales/en.json

Ensuite, définissez le chemin de sortie afin que Private Translation Cloud sache où placer les fichiers traduits :

src/i18n/locales/{{lang}}.json

src/i18n/locales/{{lang}}.json

Ce modèle crée un fichier par langue (par exemple, fr.json et de.json) dans le même dossier que en.json.

Private Translation Cloud a besoin de quelques minutes pour générer les traductions d’IA. Lorsqu’elles sont prêtes, vous recevrez un fichier JSON par langue. Chaque fichier doit être placé dans votre projet sous le dossier src/i18n/locales/.

Par exemple, si vous avez traduit en français, le fichier sera :

src/i18n/locales/fr.json

src/i18n/locales/fr.json

Exemple du contenu à l’intérieur de src/i18n/locales/fr.json :

La façon dont vous obtenez les fichiers dépend de la façon dont vous utilisez Private Translation Cloud. Dans cette démonstration, nous avons choisi l’intégration Git, ce qui signifie que Private Translation Cloud a ouvert une demande de fusion avec les fichiers traduits déjà placés dans le bon dossier.

Une fois vos traductions en place, la dernière étape consiste à mettre à jour App.tsx et à ajouter un simple sélecteur de langue. Cela vous permet de changer de langue dans votre application React et de confirmer que tout fonctionne correctement.

import { useTranslation } from 'react-i18next';

function App() {
 const { t, i18n } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>

      <button onClick={() => i18n.changeLanguage('en')}>EN</button>
      <button onClick={() => i18n.changeLanguage('fr')}>FR</button>
    </div>
 );
}

import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>

      <button onClick={() => i18n.changeLanguage('en')}>EN</button>
      <button onClick={() => i18n.changeLanguage('fr')}>FR</button>
    </div>
  );
}

Vous pouvez maintenant basculer entre l’anglais et le français. Lorsque vous exécutez l’application en français, la mise en page doit être exactement la même qu’en anglais : seule la langue du texte change.

React app in English

React app in French

Une fois que votre application React est localisée et fonctionne dans plusieurs langues, vous pouvez déverrouiller quelques options avancées dans i18next pour améliorer les performances et l’expérience utilisateur :

• Détecter automatiquement la langue de l’utilisateur

Par défaut, l’application démarre en anglais et permet aux utilisateurs de changer de langue manuellement avec un sélecteur de langue. Pour qu’elle s’ouvre automatiquement dans la langue préférée de l’utilisateur, installez le plugin de détection de langue :

npm install i18next-browser-languagedetector

npm install i18next-browser-languagedetector

Ensuite, mettez à jour votre src/i18n/index.ts :

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
 .use(LanguageDetector) // detect browser/localStorage/etc.
 .use(initReactI18next)
 .init({
 fallbackLng: 'en',
 supportedLngs: ['en', 'fr', 'de', 'ar'], // adjust to your supported languages
 interpolation: { escapeValue: false },
 detection: {
 order: ['querystring', 'localStorage', 'cookie', 'navigator'],
 caches: ['localStorage', 'cookie'],
 },
 react: {
 useSuspense: true, // set false if you don’t wrap <App /> in <Suspense>
 },
 });

export default i18n;

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)       // detect browser/localStorage/etc.
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    supportedLngs: ['en', 'fr', 'de', 'ar'], // adjust to your supported languages
    interpolation: { escapeValue: false },
    detection: {
      order: ['querystring', 'localStorage', 'cookie', 'navigator'],
      caches: ['localStorage', 'cookie'],
    },
    react: {
      useSuspense: true, // set false if you don’t wrap <App /> in <Suspense>
    },
  });

export default i18n;

Avec cette configuration, i18n vérifiera la langue du navigateur (et les préférences stockées) lors du premier chargement et passera automatiquement à la langue préférée de l’utilisateur si elle est disponible.

• Charger les traductions de manière différée pour des bundles plus petits

À l’étape 2 de ce guide, vous avez configuré import.meta.glob avec { eager: true }, qui regroupe tous les fichiers de traduction dans le chargement initial de l’application. C’est simple, mais si vous prenez en charge de nombreuses langues, cela peut augmenter la taille de votre bundle.

Pour optimiser, vous pouvez charger les traductions de manière différée en utilisant i18next-http-backend :

npm install i18next-http-backend

npm install i18next-http-backend

Mettez à jour src/i18n/index.ts :

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
 .use(Backend) // load JSON over HTTP
 .use(LanguageDetector) // auto-detect + cache
 .use(initReactI18next)
 .init({
 fallbackLng: 'en',
 supportedLngs: ['en', 'fr'],
 interpolation: { escapeValue: false },
 backend: {
 // Vite serves files from /public at the site root
 loadPath: '/locales/{{lng}}/{{ns}}.json',
 },
 react: { useSuspense: true },
 });

export default i18n;

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(Backend)                // load JSON over HTTP
  .use(LanguageDetector)       // auto-detect + cache
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    supportedLngs: ['en', 'fr'],
    interpolation: { escapeValue: false },
    backend: {
      // Vite serves files from /public at the site root
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
    react: { useSuspense: true },
  });

export default i18n;

Voici comment vos fichiers doivent être organisés :

public/
 locales/
 en/
 translation.json
 fr/
 translation.json

public/
  locales/
    en/
      translation.json
    fr/
      translation.json

Avec cette configuration, les fichiers de traduction sont chargés depuis le serveur uniquement lorsqu’une langue est nécessaire. Cela permet de réduire la taille du bundle initial, surtout si votre application prend en charge de nombreuses langues.

En suivant ces deux conseils d’optimisation, votre application React peut :

• Démarrer automatiquement dans la langue préférée de l’utilisateur
• Charger les traductions uniquement en cas de besoin, en gardant vos bundles légers