PTC
S'inscrire Passer à la version Pro Votre compte

Comment traduire une application React avec react-i18next

Configurez react-i18next, traduisez en.json dans plus de 40 langues avec l'IA, puis laissez l'extension de navigateur de PTC (Private Translation Cloud) examiner l'application React en cours d'exécution à chaque publication. Ce guide couvre l'internationalisation React de bout en bout : la configuration de react-i18next, la gestion des pluriels et du contenu dynamique, la traduction de vos en.json dans plus de 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 à être publiée. Pour un aperçu 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 générés par PTC, et non rédigés à la main.

Étape 1 : Initialiser 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 classique 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 n'est requise 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 que votre application ne soit rendue. 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 transmettez 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 suffixes de clé _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 un 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 naturellement le texte environnant.

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 : Traduisez 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 dans 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 cible. PTC utilise ce contexte pour adapter le ton et la terminologie dans chaque langue.
  4. Choisissez les langues cibles et confirmez. PTC produit un .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 de 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 à 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érifiez 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 toute l'interface utilisateur se met à jour immédiatement. Aucun rechargement de page.

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

Installez i18next-browser-languagedetector pour charger automatiquement la bonne langue à 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'],
    },
  });

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

Par défaut, tous les fichiers de traduction sont inclus dans le bundle lors du build. 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 dans public/locales/ afin qu'ils soient servis en tant qu'assets statiques :

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

Passer 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 en cours d'exécution - passez en production sans contrôle qualité manuel par version

Après que PTC a traduit votre en.json, vous devez toujours vérifier l'application React en cours d'exécution. Une étiquette traduite peut provoquer un débordement sur 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 dur en anglais 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, effectue des captures d'é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 s'adapte à un bouton, régénère une forme plurielle.
  • Prompts de correction pour Cursor / Claude Code lorsque le problème se situe dans le code de votre composant. Une chaîne en dur en anglais 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 de 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.

Traduisez 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. La fonctionnalité 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 obtenez des traductions qui utilisent le même glossaire et la même voix de marque que vos chaînes d'interface utilisateur React.

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

Les commentaires des utilisateurs, les publications, les résultats de recherche et tout autre contenu généré par les utilisateurs géré par votre application React nécessitent d'être traduits au fur et à mesure de 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 dans 2 langues, sans carte bancaire. Deux possibilités :

  • Manuel : téléversez src/i18n/locales/en.json sur la page de traduction JSON.
  • Piloté par CI : connectez votre dépôt Git via l'API PTC et un push qui modifie vos chaînes sources vous revient traduit.

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