Comment traduire un site Web React : react-i18next ou No-Code

Résumez ce post avec : 7 min de lecture

ChatGPT Perplexité Grok Google IA

Vous pouvez traduire un site Web React de deux manières. La route de code est une bibliothèque i18n telle que react-i18next : vous remplacez le texte codé en dur par des clés, appelez t('key') à travers le useTranslation accrochez et maintenez un fichier de traduction par langue. La route sans code est une couche de traduction de site Web : vous ajoutez un script à votre fichier d'entrée HTML et il traduit l'application rendue, y compris les vues qui apparaissent après la navigation côté client. react-i18next convient aux équipes où les développeurs possèdent le texte et le souhaitent dans la base de code. Une couche de traduction est plus rapide lorsque vous avez besoin de l'ensemble du site dans de nombreuses langues, y compris le contenu d'un CMS ou d'une API.

Principaux points à retenir

• react-i18next (construit sur i18next) est la configuration React i18n la plus courante : npm install react-i18next i18next, initialiser avec initReactI18next, puis utilisez const { t } = useTranslation().
• Une bibliothèque i18n traduit vos chaînes. Vous avez toujours besoin de traducteurs, d'URL de langue, de hreflang et d'un plan pour le contenu CMS ou API.
• ConveyThis ne nécessite aucune modification de code : collez l'extrait dans index.html, choisissez des langues et modifiez les traductions dans un éditeur visuel. Il suit la navigation de React Router et traduit le contenu nouvellement rendu.
• Le rendu côté client uniquement limite le référencement multilingue avec n'importe quelle méthode. Utilisez le rendu du serveur (par exemple Next.js) ou le pré-rendu si le trafic de recherche dans d'autres langues est important.

Option 1 : Traduire une application React avec react-i18next

Le Guide de démarrage de react-i18next montre la configuration minimale.

1. Installer

npm install react-i18next i18next --save

2. Configurer i18next

// src/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const resources = {
  en: { translation: { welcome: 'Welcome back, {{name}}', cart: 'Cart' } },
  de: { translation: { welcome: 'Willkommen zurück, {{name}}', cart: 'Warenkorb' } },
};

i18n.use(initReactI18next).init({
  resources,
  lng: 'en', // active language
  fallbackLng: 'en', // used when a key is missing
  interpolation: { escapeValue: false }, // React already escapes output
});

export default i18n;

3. Importez-le une fois au point d'entrée

// src/main.jsx
import './i18n';
import { createRoot } from 'react-dom/client';
import App from './App';

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

4. Utilisez le crochet dans les composants

import { useTranslation } from 'react-i18next';

export function Header({ user }) {
  const { t, i18n } = useTranslation();
  return (
    <header>
      <p>{t('welcome', { name: user.firstName })}</p>
      <button onClick={() => i18n.changeLanguage('de')}>Deutsch</button>
    </header>
  );
}

Comme le dit le guide, “Vous obtiendrez la fonction t en utilisant le hook useTranslation.” Pour les applications plus volumineuses, divisez les traductions en espaces de noms et chargez-les à la demande (par exemple avec un plugin backend) au lieu de regrouper toutes les langues.

Ce qu'une bibliothèque i18n vous laisse

• Quelqu'un doit écrire chaque clé dans chaque langue et la mettre à jour chaque fois que la copie anglaise change. Les clés manquantes reviennent tranquillement à la langue par défaut.
• Les descriptions de produits, les articles de blog et le contenu CMS ne figurent pas dans votre code, ils ont donc besoin de leur propre processus de localisation.
• Vous créez les URL de langue. Mettez la langue dans l'itinéraire (/de/pricing) avec React Router ou le routage de votre framework, et gardez-le synchronisé avec i18n.language. Google recommande des URL distinctes par langue plutôt que de passer par un cookie ou un paramètre de navigateur (Recherche Google Central).
• Vous gérez également hreflang et <html lang>. Chaque version linguistique doit se répertorier elle-même et toutes les autres, sinon Google ignore les balises (Recherche Google Central). Mise à jour document.documentElement.lang sur le changement de langue.
• Les prix et les dates sont nécessaires Intl.NumberFormat et Intl.DateTimeFormat (ou formatage d'i18next).

Meilleures pratiques React i18n

• Utiliser des clés descriptives (checkout.pay) plutôt que des phrases anglaises complètes comme clés.
• Ne construisez jamais de phrases en concaténant des fragments traduits ; utilisez l’interpolation pour que les traducteurs puissent réorganiser les mots.
• Utilisez la gestion plurielle d'i18next ; de nombreuses langues ont plus de deux formes plurielles.
• Ne mettez pas de texte dans des images ou des SVG que vous ne pouvez pas traduire.
• Concevez des cordes plus longues et testez tôt les dispositions de droite à gauche si vous avez besoin d'arabe ou d'hébreu.
• Ajoutez une vérification CI qui échoue lorsqu'une clé existe en anglais mais pas dans d'autres lieux.

Option 2 : Traduire un site React sans code, avec ConveyThis

Si vous préférez ne pas refactoriser chaque composant, ou si une grande partie de votre contenu provient d'un CMS ou d'une API, ConveyThis peut traduire l'application React au fur et à mesure de son rendu.

La configuration se déroule en cinq étapes :

1. Créer un compte ConveyThis et ajoutez votre domaine.
2. Choisissez la langue source et les langues cibles (210 sont prises en charge), puis enregistrez.
3. Copiez l'extrait JavaScript de votre tableau de bord. Le Guide d'installation de React parcourt chaque écran.
4. Collez-le dans votre fichier d'entrée HTML avant la fermeture </head> ou </body> étiquette: public/index.html dans Créer des projets d'application React, ou index.html à la racine du projet dans les projets Vite.
5. Déployer. Un sélecteur de langue apparaît et le site est traduit automatiquement.

Sur une application d'une seule page, le script surveille la page pour détecter le contenu ajouté ou modifié après le chargement et suit les modifications d'itinéraire côté client (navigation de l'API d'historique et modifications de hachage). Lorsque React Router restitue une nouvelle vue ou que les mises à jour d'état ajoutent un nouveau texte, ConveyThis le traduit. Vos composants n'ont pas besoin d'appeler quoi que ce soit.

Vous gardez le contrôle de la sortie :

• Modifiez n’importe quelle phrase dans son contexte avec l’éditeur visuel.
• Définissez des règles de glossaire pour les noms de produits et les termes fixes (plans payants) et réutilisez les traductions approuvées avec la mémoire de traduction.
• Exclure les éléments avec le conveythis-no-translate classe, par exemple les noms d'utilisateur, les exemples de code ou les prix que vous formatez vous-même (comment exclure des segments).
• Invitez des réviseurs pour chaque langue avec des rôles d’équipe.

Dans JSX, l'exclusion ressemble à ceci :

<span className="conveythis-no-translate">{user.displayName}</span>

SEO pour les sites React

Une application React rendue par le client envoie un shell HTML presque vide et crée la page dans le navigateur. Quelle que soit la méthode de traduction que vous utilisez, c’est le principal obstacle au référencement multilingue.

• Si le trafic organique dans d’autres langages est important, affichez le contenu sur le serveur ou au moment de la construction (Next.js ou une étape de pré-affichage).
• Donnez à chaque langue sa propre URL. ConveyThis prend en charge les sous-dossiers, les sous-domaines ou un ?lang paramètre, ajoute automatiquement les balises hreflang et traduit les titres, les méta descriptions et JSON-LD. Voir référencement multilingue.
• Vérifiez ce que Google voit avec l'inspection d'URL de Search Console sur une URL traduite.

react-i18next vs. une couche de traduction

De nombreuses équipes utilisent les deux : react-i18next pour l'interface utilisateur du produit connecté et une couche de traduction pour le site marketing, la documentation et le contenu du CMS.

Pour plus d'informations sur les concepts, consultez notre guide d'internationalisation (i18n). Si vous travaillez également dans Vue, lisez comment traduire un site Web Vue.js. Si votre application est Angular, il existe une application distincte Angular intégration.

FAQ

Comment traduire mon site Web React ?

Utilisez une bibliothèque i18n comme react-i18next (remplacez le texte par t() clés et conserver un fichier par langue), ou ajouter un script de traduction tel que ConveyThis à index.html pour traduire l'application rendue sans modifications de code.

Quelle est la meilleure bibliothèque de traduction pour React ?

react-i18next est l'option la plus utilisée et fonctionne avec des hooks via useTranslation. D'autres bibliothèques existent, mais les concepts (clés, fichiers locaux, interpolation, pluriels) sont les mêmes.

Est-ce que ConveyThis fonctionne avec React Router et le contenu dynamique ?

Oui. Le script suit les changements d'itinéraire côté client et surveille le contenu nouvellement rendu, de sorte que les nouvelles vues et le texte mis à jour sont traduits.

Google Translate est-il un bon moyen de traduire un site React ?

La traduction par navigateur aide les visiteurs individuels mais ne crée aucune page indexable et ne vous donne aucun contrôle sur la qualité. Le widget du site Web de Google est limité à une utilisation non commerciale depuis 2020.

Comment puis-je garder certains composants React non traduits ?

Avec ConveyThis, ajouter className="conveythis-no-translate" à l'élément. Avec react-i18next, ne transmettez pas ce texte t().

Pour l'essayer sur votre application React, créer un compte ConveyThis et collez l'extrait dans votre index.html.