0Pricing
React Academy · Leçon

Configurer react-i18next

Installez et configurez i18next avec la détection de la langue et la séparation des espaces de noms.

Configurer react-i18next est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Bienvenue

Dans cette leçon, vous installerez et configurerez react-i18next avec la détection de langue et la séparation en espaces de noms afin d’ajouter la prise en charge de plusieurs langues à une application React.

Installer les dépendances

Installez i18next et react-i18next. Vous pouvez également ajouter i18next-browser-languagedetector pour détecter automatiquement la langue et i18next-http-backend pour charger les traductions via HTTP.
npm install i18next react-i18next
npm install i18next-browser-languagedetector i18next-http-backend

Créer i18n.js

Créez un fichier `i18n.js` qui initialise i18next. Appelez `i18n.use(...)` pour ajouter des modules, puis `.init({...})` avec votre configuration.
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

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

export default i18n;

Importer i18n dans main.jsx

Importez le fichier d’initialisation i18n BEFORE le rendu de l’application. Cela garantit que i18n est prêt avant qu’un composant n’appelle useTranslation.
import './i18n'; // must be before App
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')).render(
  <StrictMode><App /></StrictMode>
);

Espaces de noms

Les espaces de noms répartissent les traductions en groupes logiques (par exemple, « common », « auth » et « dashboard »). Chaque espace de noms est un fichier JSON distinct, chargé à la demande afin de réduire la taille du paquet initial.
resources: {
  en: {
    common: { save: 'Save', cancel: 'Cancel' },
    auth: { login: 'Log in', logout: 'Log out' },
  }
}

Détection de la langue

Le module LanguageDetector lit la langue préférée de l’utilisateur depuis le navigateur (navigator.language), localStorage ou la chaîne de requête de l’URL. Il définit automatiquement la langue active lors du premier chargement.

Charger les traductions depuis le dossier public

Stockez les traductions sous forme de fichiers JSON dans `public/locales/{lang}/{ns}.json`. Configurez le module d’arrière-plan pour les charger à l’exécution, afin que l’ajout d’une nouvelle langue ne nécessite aucune modification du code.
import Backend from 'i18next-http-backend';

i18n.use(Backend).init({
  backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json',
  },
});

I18nextProvider (facultatif)

I18nextProvider enveloppe votre application pour fournir l’instance i18n via le contexte. Avec react-i18next v11+ et le module initReactI18next, cette étape est facultative : le crochet lit directement l’instance i18n globale.

Vérifier l’initialisation dans les composants

i18next charge les traductions de manière asynchrone. Utilisez la propriété `ready` de `useTranslation` ou vérifiez `i18n.isInitialized` avant d’effectuer le rendu du texte, afin d’éviter d’afficher les clés de traduction.
const { t, ready } = useTranslation();
if (!ready) return null;

DevTools et gestion des clés manquantes

Définissez `saveMissing: true` en développement pour journaliser les clés de traduction manquantes dans la console. Cela vous aide à trouver rapidement les chaînes non traduites.
i18n.init({ saveMissing: true,
  missingKeyHandler: (lng, ns, key) => console.warn('Missing:', key) });

Vérification rapide

Pourquoi devez-vous importer le fichier d’initialisation i18n avant d’effectuer le rendu de votre application React ?

Récapitulatif

Installez i18next et react-i18next, créez i18n.js avec les modules et la configuration d’initialisation, importez-le avant le rendu et organisez les traductions dans des espaces de noms. Utilisez http-backend pour charger les fichiers de traduction à l’exécution.

À suivre

Prochaine leçon : **Utiliser le crochet useTranslation** — vous remplacerez les chaînes codées en dur par des appels à t() et organiserez les fichiers de traduction JSON.

Questions Fréquemment Posées

La leçon « Configurer react-i18next » est-elle gratuite ?

Oui — le texte complet de « Configurer react-i18next » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Configurer react-i18next » ?

Installez et configurez i18next avec la détection de la langue et la séparation des espaces de noms. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Configurer react-i18next » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Configurer react-i18next
  2. Utiliser le hook useTranslation
  3. Pluralisation et interpolation
  4. Sélecteur de langue et chargement différé des traductions
← Retour à React Academy