PTC
S'inscrire Passer à Pro Votre compte

Comment traduire une application React avec react-i18next

Configurez react-i18next, traduisez votre fichier en.json dans plus de 40 langues grâce à l'IA, puis laissez l'extension de navigateur de PTC (Private Translation Cloud) relire l'application React en cours d'exécution à chaque version. Ce guide couvre l'internationalisation de React de bout en bout : configuration de react-i18next, gestion des pluriels et du contenu dynamique, traduction de votre en.json dans plus de 40 langues avec PTC, et changement de langue au moment de l'exécution. À la fin, vous disposerez d'une configuration de localisation React fonctionnelle et prête à être déployée. Pour un aperçu de l'outil de traduction JSON autonome, consultez la page 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 résident dans des fichiers de ressources 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, compteurs, dates) est interpolé correctement selon la locale.
  • Les pluriels respectent les règles de chaque langue cible.
  • Les fichiers .json traduits sont produits par PTC, et non écrits à la main.

Étape 1 : Échafauder 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 lance un serveur de développement et ouvre la page par défaut Vite + React dans votre navigateur.

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

npm install i18next react-i18next

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

src/
  i18n/
    locales/
      en.json

Ajoutez vos chaînes anglaises dans src/i18n/locales/en.json :

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

Un composant React typique avec des chaînes codées 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 codé 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() retourne :

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

É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 ajouté à src/i18n/locales/ est détecté automatiquement. Aucune importation manuelle n'est nécessaire lors de l'ajout 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() retournera 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 second argument de t() est un objet contenant les valeurs que vous souhaitez substituer. Vous pouvez utiliser autant de variables que nécessaire.

Gérer les pluriels avec les suffixes de clé _one / _other

Utilisez le modèle de suffixe _one / _other. La variable doit obligatoirement ê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 possédant plus de deux formes plurielles (polonais, arabe, russe) sans configuration supplémentaire.

Pour les traductions contenant des éléments HTML comme 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 naturellement.

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 votre fichier 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 gratuit couvre 20.000 mots vers 2 langues, sans carte bancaire.
  2. Téléchargez 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 courte description de votre application React et de son public. PTC utilise ce contexte pour faire correspondre 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 configuré à l'étape 3, les nouveaux fichiers fonctionnent immédiatement sans modification du code.

Une fois votre premier fichier traduit 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 une traduction automatique. PTC ouvre une pull request avec les fichiers de langue cible mis à jour.

É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 toute l'interface utilisateur se met à jour immédiatement. Aucun rechargement de page n'est nécessaire.

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 regroupés au moment de la construction. Pour les applications comportant de nombreuses langues, utilisez i18next-http-backend pour ne récupérer que 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 comme des ressources 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 initial. Le bundle reste léger, quel que soit le nombre de langues prises en charge.

Relecture visuelle des traductions de votre application React en direct - déployez sans contrôle qualité manuel par version

Une fois que PTC a traduit votre en.json, vous devez encore vérifier l'application React en cours d'exécution. Un libellé traduit 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 anglaise codée en dur en dehors de t() s'affichera non traduite, quel que soit le nombre de langues que vous proposez.

L'AI Visual QA de PTC remplace l'étape de contrôle qualité manuel. Pour les applications basées sur un navigateur comme React, la solution idéale est l'extension de navigateur. Installez-la une fois et enregistrez un court parcours guidé des flux 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 :

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

Le résultat : la relecture devient une étape de CI. Chaque version est déployée avec une vérification visuelle dans toutes les langues cibles, 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 résident en dehors de en.json. L'outil Copier-coller pour traduire de PTC gère ces textes dans le même projet. Collez le texte source dans le tableau de bord PTC, choisissez les langues cibles et obtenez des traductions utilisant le même glossaire et la même voix de marque que les chaînes de votre interface React.

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

Les commentaires d'utilisateurs, les publications, les résultats de recherche et tout autre contenu généré par l'utilisateur géré par votre application React nécessitent une traduction à mesure qu'ils arrivent. L' API REST de 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 gratuit de 30 jours - 20.000 mots vers 2 langues, sans carte bancaire. Deux voies possibles :

  • Manuelle : téléchargez 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 push.

Dans les deux cas, installez l'extension de navigateur et laissez l'AI Visual QA vérifier votre application React en direct dans toutes les langues avant le déploiement.