Comment localiser une application React : Guide étape par étape (2026)

Réponse rapide

Pour localiser une application React :

1. Installez react-i18next : npm install react-i18next i18next
2. Créez des fichiers JSON de traduction pour chaque langue
3. Configurez i18next avec vos traductions
4. Utilisez le hook useTranslation dans les composants
5. Ajoutez un sélecteur de langue

Prérequis

• React 16.8+ (pour les hooks)
• Node.js 14+
• Connaissances de base en React

Étape 1 : Installer les dépendances

TerminalCopy
npm install react-i18next i18next i18next-browser-languagedetector

Étape 2 : Créer des fichiers de traduction

Créez un dossier locales avec des fichiers JSON pour chaque langue :

src/
  locales/
    en/
      translation.json
    es/
      translation.json
    fr/
      translation.json

src/locales/en/translation.json:

JSONCopy
1{
2  "welcome": {
3    "title": "Welcome to Our App",
4    "subtitle": "The best solution for your needs"
5  },
6  "nav": {
7    "home": "Home",
8    "about": "About",
9    "contact": "Contact"
10  },
11  "auth": {
12    "login": "Log In",
13    "signup": "Sign Up",
14    "logout": "Log Out"
15  }
16}

src/locales/fr/translation.json:

JSONCopy
1{
2  "welcome": {
3    "title": "Bienvenue dans Notre App",
4    "subtitle": "La meilleure solution pour vos besoins"
5  },
6  "nav": {
7    "home": "Accueil",
8    "about": "À propos",
9    "contact": "Contact"
10  },
11  "auth": {
12    "login": "Se connecter",
13    "signup": "S'inscrire",
14    "logout": "Se déconnecter"
15  }
16}

Étape 3 : Configurer i18next

Créez src/i18n.js :

JavaScriptCopy
1import i18n from 'i18next';
2import { initReactI18next } from 'react-i18next';
3import LanguageDetector from 'i18next-browser-languagedetector';
4
5import enTranslation from './locales/en/translation.json';
6import esTranslation from './locales/es/translation.json';
7import frTranslation from './locales/fr/translation.json';
8
9i18n
10  .use(LanguageDetector)
11  .use(initReactI18next)
12  .init({
13    resources: {
14      en: { translation: enTranslation },
15      es: { translation: esTranslation },
16      fr: { translation: frTranslation },
17    },
18    fallbackLng: 'en',
19    interpolation: {
20      escapeValue: false, // React échappe déjà
21    },
22  });
23
24export default i18n;

Étape 4 : Importer dans l'entrée de l'application

src/index.js:

JavaScriptCopy
1import React from 'react';
2import ReactDOM from 'react-dom/client';
3import './i18n'; // Importer la configuration i18n
4import App from './App';
5
6const root = ReactDOM.createRoot(document.getElementById('root'));
7root.render(
8  <React.StrictMode>
9    <App />
10  </React.StrictMode>
11);

Étape 5 : Utiliser les traductions dans les composants

src/App.js:

JSXCopy
1import { useTranslation } from 'react-i18next';
2
3function App() {
4  const { t } = useTranslation();
5
6  return (
7    <div>
8      <nav>
9        <a href="/">{t('nav.home')}</a>
10        <a href="/about">{t('nav.about')}</a>
11        <a href="/contact">{t('nav.contact')}</a>
12      </nav>
13
14      <main>
15        <h1>{t('welcome.title')}</h1>
16        <p>{t('welcome.subtitle')}</p>
17      </main>
18
19      <button>{t('auth.login')}</button>
20    </div>
21  );
22}
23
24export default App;

Étape 6 : Ajouter un sélecteur de langue

JSXCopy
1import { useTranslation } from 'react-i18next';
2
3function LanguageSwitcher() {
4  const { i18n } = useTranslation();
5
6  const changeLanguage = (lng) => {
7    i18n.changeLanguage(lng);
8  };
9
10  return (
11    <div>
12      <button onClick={() => changeLanguage('en')}>Anglais</button>
13      <button onClick={() => changeLanguage('es')}>Espagnol</button>
14      <button onClick={() => changeLanguage('fr')}>Français</button>
15    </div>
16  );
17}
18
19export default LanguageSwitcher;

Fonctionnalités avancées

Variables/Interpolation

Traduction :

JSONCopy
{
  "greeting": "Bonjour, {{name}} !"
}

Composant :

JSXCopy
t('greeting', { name: 'John' }) // "Bonjour, John !"

Pluralisation

Traduction :

JSONCopy
1{
2  "items": "{{count}} article",
3  "items_plural": "{{count}} articles"
4}

Composant :

JSXCopy
t('items', { count: 1 }) // "1 article"
t('items', { count: 5 }) // "5 articles"

Clés imbriquées

JSXCopy
// Accéder aux clés imbriquées avec la notation par points
t('welcome.title')
t('nav.home')

Composant Trans (JSX dans les traductions)

Traduction :

JSONCopy
{
  "terms": "J'accepte les <link>Conditions d'utilisation</link>"
}

Composant :

JSXCopy
1import { Trans } from 'react-i18next';
2
3<Trans i18nKey="terms" components={{ link: <a href="/terms" /> }}>
4  J'accepte les <a href="/terms">Conditions d'utilisation</a>
5</Trans>

Gestion des traductions à l'échelle

À mesure que votre application grandit, la gestion des fichiers JSON devient difficile :

• Plusieurs développeurs éditant les mêmes fichiers
• Pas de mémoire de traduction
• Difficile de suivre les traductions manquantes
• Export/import manuel avec les traducteurs

Solution : Utiliser un système de gestion de traduction

IntlPull automatise la localisation React :

TerminalCopy
1# Tirer les dernières traductions
2npx @intlpullhq/cli download --output ./src/locales
3
4# Pousser les nouvelles chaînes
5npx @intlpullhq/cli upload
6
7# Vérifier le statut de traduction
8npx @intlpullhq/cli status

Avantages :

• Traduction alimentée par l'IA
• Collaboration avec les traducteurs
• Mémoire de traduction
• Synchronisation automatique avec votre dépôt

Problèmes courants et solutions

Problème : Les traductions ne se mettent pas à jour

Solution : Assurez-vous d'avoir importé i18n avant App :

JavaScriptCopy
import './i18n';
import App from './App';

Problème : Contenu vide au premier chargement

Solution : Ajoutez un repli Suspense :

JSXCopy
1import { Suspense } from 'react';
2
3<Suspense fallback="Chargement...">
4  <App />
5</Suspense>

Problème : Erreurs TypeScript

Solution : Installez les types et configurez :

TerminalCopy
npm install --save-dev @types/react-i18next

Bonnes pratiques

1. Utilisez des espaces de noms pour les grandes applications afin d'organiser les traductions
2. Gardez les clés sémantiques (par exemple, auth.login pas button1)
3. Ne concaténez pas les chaînes - utilisez l'interpolation
4. Testez avec la pseudo-localisation avant les vraies traductions
5. Utilisez un TMS comme IntlPull pour la collaboration

Foire aux questions

Comment ajouter une nouvelle langue ?

1. Créez un nouveau fichier JSON (par exemple, locales/de/translation.json)
2. Ajoutez-le aux ressources de configuration i18n
3. Ajoutez un bouton au sélecteur de langue

Comment gérer les langues RTL ?

Ajoutez l'attribut dir basé sur la langue :

JSXCopy
<html dir={i18n.language === 'ar' ? 'rtl' : 'ltr'}>

Comment charger paresseusement les traductions ?

Utilisez i18next-http-backend :

JavaScriptCopy
1import Backend from 'i18next-http-backend';
2
3i18n.use(Backend).init({
4  backend: {
5    loadPath: '/locales/{{lng}}/{{ns}}.json',
6  },
7});

Résumé

Pour localiser une application React :

1. Installez react-i18next et i18next
2. Créez des fichiers JSON de traduction
3. Configurez i18next
4. Utilisez le hook useTranslation
5. Ajoutez un sélecteur de langue
6. Utilisez un TMS pour l'échelle

Prêt à mettre à l'échelle votre localisation ? IntlPull automatise l'i18n React avec la traduction IA et une intégration CLI transparente.