PTC
S'inscrire Passer à la version Pro Votre compte

Comment traduire une application React avec react-i18next

Configurez react-i18next, traduisez en.json dans 40+ langues avec l'IA, puis laissez l'extension de navigateur de PTC (Private Translation Cloud) relire l'application React à l'exécution à chaque version. Ce guide couvre l'internationalisation de React de bout en bout : la configuration de react-i18next, la gestion des pluriels et du contenu dynamique, la traduction de votre en.json dans 40+ langues avec PTC, et le changement de langue à l'exécution. À la fin, vous disposerez d'une configuration de localisation React fonctionnelle et prête à passer en production. Pour une vue d'ensemble de l'outil de traduction JSON autonome, consultez traduire des fichiers JSON en ligne avec l'IA.

À quoi ressemble une application React localisée

Une application React où :

  • Toutes les chaînes destinées aux utilisateurs se trouvent dans des fichiers de traduction JSON sous src/i18n/locales/ (ou public/locales/).
  • Un sélecteur de langue permet de basculer entre l'anglais, l'espagnol, le français et l'allemand.
  • Le contenu dynamique (noms d'utilisateurs, nombres, dates) est interpolé correctement pour chaque locale.
  • Les pluriels suivent les règles de chaque langue cible.
  • Les fichiers .json traduits sont produits par PTC, et non rédigés à la main.

Étape 1 : Générer la structure d'une application React + TypeScript avec Vite

Ce guide utilise une application React + TypeScript construite avec Vite. Si vous ajoutez react-i18next à une application existante, passez à l'étape 2.

npm create vite@latest react-localization-demo -- --template react-ts
cd react-localization-demo
npm install
npm run dev

Cela démarre un serveur de développement et ouvre la page Vite + React par défaut dans votre navigateur.

Étape 2 : Installer react-i18next et remplacer les chaînes en dur par t()

npm install i18next react-i18next

Créez la structure de dossiers i18n de votre application React :

src/
  i18n/
    locales/
      en.json

Ajoutez vos chaînes en anglais à src/i18n/locales/en.json :

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

Un composant React typique avec des chaînes en dur :

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <p>This is a localization demo.</p>
      <button onClick={() => alert('Click me')}>Click me</button>
    </div>
  );
}

Remplacez le texte en dur par le hook useTranslation :

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>
  );
}

export default App;

useTranslation() renvoie :

  • t() - recherche une chaîne par sa clé.
  • i18n - vous permet de changer de langue de manière programmatique.

Étape 3 : Charger automatiquement chaque JSON de locale avec import.meta.glob

Créez src/i18n/index.ts pour configurer i18next et charger automatiquement les fichiers de traduction. Le modèle import.meta.glob signifie que chaque fichier .json que vous ajoutez à src/i18n/locales/ est détecté automatiquement. Aucune importation manuelle lorsque vous ajoutez de nouvelles langues :

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

type TranslationResources =
  | string
  | { [k: string]: TranslationResources }
  | TranslationResources[];

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

const resources: Record<string, { translation: Record<string, TranslationResources> }> = {};
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;

Importez i18n avant le rendu de votre application. Ouvrez src/main.tsx et ajoutez l'importation :

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import './i18n'; // <- add this

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

Si vous ignorez cette étape, t() renverra les clés de traduction au lieu du texte traduit.

Interpoler des variables avec {{variableName}}

Utilisez la syntaxe {{variableName}} dans votre JSON et passez la valeur à t(). Mettez à jour en.json :

{
  "welcome": "Welcome",
  "userGreeting": "Welcome back, {{firstName}}!",
  "description": "This is a localization demo.",
  "clickMe": "Click me"
}
const user = { firstName: 'Sarah' };
<p>{t('userGreeting', { firstName: user.firstName })}</p>

Le deuxième argument de t() est un objet contenant les valeurs que vous souhaitez substituer. Autant de variables que nécessaire.

Pluraliser avec les clés à suffixe _one / _other

Utilisez le modèle de suffixe _one / _other. La variable doit être nommée count :

{
  "newMessages_one": "You have {{count}} new message.",
  "newMessages_other": "You have {{count}} new messages."
}
<p>{t('newMessages', { count: messageCount })}</p>

i18next sélectionne automatiquement la forme plurielle correcte. Il gère également les langues ayant plus de deux formes plurielles (polonais, arabe, russe) sans configuration supplémentaire.

Pour les traductions contenant des éléments HTML tels que des liens ou du texte en gras, utilisez le composant Trans :

{
  "termsText": "I agree to the <1>Terms of Service</1> and <3>Privacy Policy</3>."
}

Les balises <1> et <3> sont des espaces réservés basés sur l'index qui correspondent aux éléments enfants (en comptant à partir de 0) :

import { Trans } from 'react-i18next';

<Trans i18nKey="termsText">
  I agree to the <a href="/terms">Terms of Service</a> and <a href="/privacy">Privacy Policy</a>.
</Trans>

Cela permet de conserver vos éléments JSX dans le composant tout en laissant les traducteurs réorganiser le texte environnant de manière naturelle.

Formater les dates, les nombres et les devises avec Intl

Utilisez les formateurs Intl plutôt que d'intégrer des chaînes de formatage dans vos traductions :

const formatDate = (date: Date, locale: string) =>
  new Intl.DateTimeFormat(locale, { dateStyle: 'long' }).format(date);

const formatCurrency = (amount: number, locale: string, currency: string) =>
  new Intl.NumberFormat(locale, { style: 'currency', currency }).format(amount);

const { i18n } = useTranslation();
<p>{formatDate(new Date(), i18n.language)}</p>
<p>{formatCurrency(199.99, i18n.language, 'EUR')}</p>

Étape 5 : Traduire les fichiers JSON avec PTC en 5 étapes

Vous avez maintenant en.json et devez produire es.json, fr.json, de.json, etc. PTC est conçu exactement pour cela.

  1. Démarrez un projet PTC et choisissez l'anglais comme source. L'essai couvre 20 000 mots vers 2 langues, sans carte bancaire.
  2. Téléversez en.json. PTC analyse la structure imbriquée, reconnaît les espaces réservés i18next ({{name}}, {{count}}) et détecte les suffixes de pluriel (_one, _other).
  3. Ajoutez une brève description de votre application React et de son public. PTC utilise ce contexte pour adapter le ton et la terminologie dans chaque langue.
  4. Choisissez les langues cibles et confirmez. PTC produit un fichier .json traduit par langue cible, structurellement identique à la source. Mêmes clés, même imbrication, mêmes espaces réservés. Valeurs traduites.
  5. Déposez les fichiers dans src/i18n/locales/. Grâce au chargement automatique import.meta.glob que vous avez configuré à l'étape 3, les nouveaux fichiers fonctionnent immédiatement sans aucune modification de code.

Une fois que vous avez traduit votre premier fichier avec PTC, vous pouvez passer à un processus automatisé. Connectez votre dépôt GitHub, GitLab ou Bitbucket via l'intégration Git, ou utilisez l'API PTC pour intégrer la traduction dans votre pipeline CI/CD. Les nouvelles chaînes dans en.json déclenchent la traduction automatique. PTC ouvre une merge request avec les fichiers mis à jour dans les langues cibles.

Étape 6 : Vérifier la configuration avec un sélecteur de langue

Ajoutez des boutons de langue pour vérifier que votre configuration react-i18next fonctionne :

import { useTranslation } from 'react-i18next';

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

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

i18n.changeLanguage() déclenche un nouveau rendu de chaque composant utilisant useTranslation(), de sorte que l'ensemble de l'interface utilisateur se met à jour immédiatement. Aucun rechargement de page.

Détecter automatiquement la langue de l'utilisateur avec i18next-browser-languagedetector

Installez i18next-browser-languagedetector pour charger automatiquement la langue correcte à partir des paramètres du navigateur de l'utilisateur, de l'URL ou des préférences enregistrées :

npm install i18next-browser-languagedetector
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'en',
    supportedLngs: ['en', 'fr', 'de', 'ar'],
    interpolation: { escapeValue: false },
    detection: {
      order: ['querystring', 'localStorage', 'cookie', 'navigator'],
      caches: ['localStorage', 'cookie'],
    },
  });

Charger les traductions à la demande avec i18next-http-backend

Par défaut, tous les fichiers de traduction sont inclus lors de la compilation. Pour les applications comportant de nombreuses langues, utilisez i18next-http-backend pour récupérer uniquement la langue dont l'utilisateur a réellement besoin :

npm install i18next-http-backend
import Backend from 'i18next-http-backend';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    supportedLngs: ['en', 'fr'],
    interpolation: { escapeValue: false },
    backend: { loadPath: '/locales/{{lng}}/{{ns}}.json' },
  });

Déplacez vos fichiers de traduction vers public/locales/ afin qu'ils soient servis en tant qu'assets statiques :

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

Le passage au français récupère désormais /locales/fr/translation.json à la demande plutôt que de l'inclure dans le bundle. Le bundle initial reste léger, quel que soit le nombre de langues que vous prenez en charge.

Révision visuelle de la traduction de votre application React à l'exécution - passez en production sans contrôle qualité manuel par version

Après que PTC a traduit vos en.json, vous devez toujours vérifier l'application React à l'exécution. Une étiquette traduite peut déborder d'un bouton en allemand. « Save » peut être traduit par un nom en français alors que l'interface utilisateur nécessitait un verbe. Une chaîne en anglais en dur en dehors de t() s'affichera non traduite, quel que soit le nombre de langues que vous publiez.

L'AI Visual QA de PTC remplace la passe de contrôle qualité manuel. Pour les applications basées sur un navigateur comme React, la bonne variante est l'extension de navigateur. Installez-la une fois et enregistrez un court parcours guidé des parcours utilisateurs critiques de votre application React (connexion, fonctionnalité principale, paramètres). Dès lors, PTC rejoue l'enregistrement dans chaque langue cible après chaque mise à jour de traduction, capture chaque écran et inspecte le résultat rendu :

  • Corrections dans les fichiers de traduction lorsque PTC les contrôle. PTC retraduit une catégorie grammaticale incorrecte, choisit un synonyme plus court qui tient dans un bouton, et régénère une forme plurielle.
  • Prompts Cursor / Claude Code lorsque le problème se trouve dans le code de votre composant. Une chaîne en anglais en dur en dehors de t(), une phrase construite par concaténation de chaînes au lieu de t('key', { var }), un composant Trans manquant pour les traductions en texte enrichi.

Le résultat : review-as-a-CI-step. Chaque version est publiée avec une vérification visuelle dans chaque langue cible, sans goulot d'étranglement humain.

Traduire les notes de version, les pages marketing et les e-mails clients

Vos notes de version, pages marketing, pages d'atterrissage et e-mails clients se trouvent en dehors de en.json. L'outil Paste to Translate de PTC gère ce contenu dans le même projet. Collez le texte source dans le tableau de bord PTC, choisissez les langues cibles, et récupérez des traductions qui utilisent le même glossaire et la même voix de marque que vos chaînes d'interface utilisateur React.

Traduire les commentaires d'utilisateurs, les publications et les résultats de recherche avec l'API PTC

Les commentaires d'utilisateurs, publications, résultats de recherche et tout autre contenu généré par les utilisateurs que votre application React gère nécessitent une traduction dès leur arrivée. L'API REST PTC traduit ce contenu à la demande avec une authentification par jeton Bearer, en utilisant le même glossaire et la même voix de marque que vos traductions en.json.

Traduisez maintenant votre fichier en.json

Commencez votre essai de 30 jours - 20 000 mots vers 2 langues, sans carte bancaire. Deux voies possibles :

  • Manuelle : téléversez src/i18n/locales/en.json sur la page de traduction JSON.
  • Pilotée par CI : connectez votre dépôt Git via l'API PTC et les traductions s'effectuent automatiquement à chaque fois que vous poussez.

Dans tous les cas, installez l'extension de navigateur et laissez l'AI Visual QA vérifier votre application React à l'exécution dans chaque langue avant de passer en production.