@weglot/translate-react

Traduisez votre
Réagir, Next.js ou Vite application

Pas besoin de wrappers t(), ni de fichiers JSON. Ajoutez un plugin de compilation et une clé API Weglot : le texte de votre JSX est traduit lors de la compilation de votre application, et votre équipe modifie les traductions sur Weglot sans toucher au code.

Obtenez votre clé API

Copiez l'prompt e pour · · · consultez la documentation · voir sur npm

Nécessite React 19 Next.js 15 / 16.0.4+ (App Router) ou Vite Node 20.9 ou version ultérieure

// how it works

Quatre étapes. Vos composants restent tels quels.

Les langues source et cible proviennent de votre projet « Weglot », et non de votre code. Le plugin lit le texte de votre JSX au moment de la compilation et récupère ses traductions.

  1. Installez le package et ajoutez votre clé API

    Créez un projet « Weglot 2.0 », puis copiez sa clé API à partir des paramètres du projet. Elle commence par pk_. Garder .env hors du système de gestion de versions.

    terminal · .env
    $ npm install @weglot/translate-react

# .env
WEGLOT_API_KEY=pk_your_weglot_api_key

  2. Ajouter le plugin

    Enveloppez votre configuration Next.js avec withWeglot. Point sourceRoot dans le dossier contenant vos pages et vos composants.

    next.config.ts
    import type { NextConfig } from "next";
import { withWeglot } from "@weglot/translate-react/next";

const nextConfig: NextConfig = {};

export default async function (): Promise<NextConfig> {
  return await withWeglot(nextConfig, { sourceRoot: "./app" });
}

  3. Ajouter le prestataire

    Enveloppez votre structure racine avec WeglotProvider à partir du point d'entrée de Next.js, de sorte que tout changement de langue entraîne l'actualisation de vos composants serveur.

    app/layout.tsx
    import { WeglotProvider } from "@weglot/translate-react/react/next";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <WeglotProvider>{children}</WeglotProvider>
      </body>
    </html>
  );
}

  4. Compiler et publier dans toutes les langues de votre projet

    À chaque compilation, le programme récupère les traductions manquantes sur Weglot et enregistre public/translations/<locale>.json. Ignorez ce dossier. Ajoutez un sélecteur de langue avec LocaleSwitcher ou useWeglotContext.

    .gitignore
    public/translations/

// compare

Pourquoi ne pas utiliser une bibliothèque i18n classique ?

Les bibliothèques d'internationalisation (i18n) vous demandent de remplacer chaque chaîne par une clé et de conserver un fichier par langue. Weglot lit les chaînes que vous avez déjà écrites. Voici un comparatif des options.

D'après la documentation publique de chaque projet (Weglot, next-intl, Paraglide JS, Contentful, Sanity, Strapi), novembre 2026.
Critères Weglot
@weglot/translate-react		 next-intl / i18next Paraglide JS Localisation native de CMS
Enveloppez les chaînes dans des fonctions `t()` ou des fonctions de message Nontext en JSX n'est pas détecté lors de la compilation. Ouit("key") pour chaque chaîne de caractères. Ouim.key() fonctions de messagerie. Contenu uniquementLes chaînes de caractères dans votre code nécessitent toujours une bibliothèque.
Fichiers de traduction par langue Aucun à gérerGénéré lors de la compilation, ignoré par Git. OuiEn général, un fichier JSON par locale. OuiUn fichier de messages par locale. Nonenregistrées dans le CMS.
Routage multilingue et référencement naturel (URL par langue, hreflang) Pas encoreLangue enregistrée dans un cookie. Mêmes URL pour toutes les langues, langue source indexée. next-intl : ouiRoutage par locale intégré. i18next : via la configuration de votre framework. OuiURL localisées intégrées : préfixes de localisation, chemins d'accès ou domaines traduits. Ajoutez vous-même les balises hreflang. Front-endUn CMS sans interface stocke le contenu par locale. Les URL et les balises hreflang proviennent de votre front-end.
Traductions générées pour vous OuiWeglot est traduit à l'aide d'un modèle de langage (LLM) pendant la compilation. NonApportez vos propres traductions ou un système de gestion de traduction (TMS). Grâce à l'outillagela traduction automatique CLI d'inlang, ou votre agent de codage. Module complémentaire payantTraduction par IA dans les formules payantes : Contentful AI Actions, Sanity AI Assist, Strapi AI Translations.
Modifier les traductions sans faire appel à un développeur OuiVérifiez et modifiez dans le tableau de bord d'Weglot . NonModifier les fichiers JSON, ni ajouter un TMS distinct. Avec Finkl'éditeur web d'inlang, avec un compte GitHub. OuiDans l'éditeur CMS.
Créé par un développeur dans un prompt OuiUne installation, deux modifications de configuration. Vous trouverez ci-dessous l'prompt, que vous pouvez copier. Tâche longueL'agent transforme chaque chaîne de caractères en clés et en fichiers. Tâche longueinit fonctionne sans « prompts » pour les agents, alors chaque chaîne devient un m.key() message. n/aConfiguré dans le CMS.

// built for coding agents

Conçu pour les agents de codage IA

Si vous développez avec Claude Code, Cursor ou Codex, votre agent peut ajouter de lui-même l'Weglot . Il n'y a aucune chaîne de caractères à réécrire ; la modification est donc minime et facile à vérifier.

01 · configuration

L'agent l'installe et le configure

Un npm install, un plugin, un fournisseur, une ligne dans .gitignore. L'agent ne vous demande que la clé API.

02 · documents

Documents que les modèles de langage de grande envergure (LLM) peuvent lire

La documentation comporte un llms.txt index, et chaque page dispose d'une version Markdown : ajoutez .md à son URL.

03 · prompt

Un « prompt » prêt à être copié

Chaque étape de l'prompt ation correspond au guide de démarrage, avec les chemins d'importation réels. Copiez-le ci-dessous.

Coller dans Claude Code

      

      
      
      
    

  

  







  

    
// for your team

    
Modifier et relire sans toucher au code

    
Chaque traduction apparaît dans votre projet « Weglot ». Les équipes produit, marketing et les traducteurs y relisent et modifient le texte, sans avoir à créer de pull request.

    
    
      
  • Vérifiez les traductions générées par Weglot pour votre application.
    • 
      
  • Modifiez n'importe quelle traduction dans le tableau de bord d'Weglot .
    • 
      
  • Exclure tout ce qui provient du code avec translate="no" ou data-weglot-skip.
    • 
    

  







  

    
// fit

    
Quand utiliser « Weglot » et quand ne pas l'utiliser

    
Ce module est en phase de préversion. Voici où il se situe actuellement.

    

      

        
Utilisez @weglot/translate-react si

        
    
          
  • Votre application utilise React 19 sur Next.js (App Router) ou Vite.
    • 
          
  • Vous ne voulez pas mettre les chaînes entre parenthèses (t()) ni gérer un fichier par langue.
    • 
          
  • Votre développeur écrit la majeure partie du code, et vous souhaitez que la traduction suive le rythme.
    • 
          
  • Les personnes qui ne maîtrisent pas le codage doivent relire et corriger les traductions.
    • 
          
  • Le texte de votre interface utilisateur est intégré au code ; quant au contenu du CMS, vous pouvez le traduire côté serveur.
    • 
        

      

      

        
Utilisez autre chose si

        
    
          
  • Vous avez besoin d'une URL par langue et que vos pages traduites soient indexées par les moteurs de recherche dès aujourd'hui. Utilisez next-intl ou Paraglide JS.
    • 
          
  • Vous souhaitez que les traductions soient enregistrées sous forme de fichiers dans votre dépôt et révisées via des pull requests. Utilisez inlang avec Paraglide JS ou i18next.
    • 
          
  • Votre application utilise React 18, le routeur Pages de Next.js, ou Next.js 14 ou une version antérieure.
    • 
          
  • Votre site a été créé à l'aide d'un CMS ou d'un outil de création de sites Web, et non avec React. Utilisez les intégrations CMS proposées par Weglot.
    • 
        

      

    

  







  

    
FAQ

    

      

        
Est-ce qu'il prend en charge le référencement naturel (SEO) : une URL par langue et l'attribut hreflang ?

        

          
Pas aujourd'hui. La langue du visiteur est enregistrée dans un cookie et toutes les versions linguistiques sont accessibles via les mêmes URL ; les moteurs de recherche n'indexent donc que la langue d'origine.

          
Vous pouvez traduire les titres et les descriptions des pages à l'aide de tDynamicAll dans generateMetadata. Si vous avez besoin dès maintenant d'URL indexées par langue, utilisez une bibliothèque proposant un routage par locale, telle que next-intl ou Paraglide JS.

        

      

      

        
Comment traduire du contenu dynamique provenant d'un CMS, d'une API ou des utilisateurs ?

        

          
Le plugin ne traduit que le texte présent dans votre code. Pour le contenu auquel votre code n'a pas accès, appelez tDynamic, tDynamicAll ou tDynamicHtml de @weglot/translate-react/dynamic dans les composants serveur de Next.js.

          
Si l'API met plus de 500 ms à répondre, ou si un texte est demandé pour la première fois, elle renvoie le texte source. La traduction sera disponible lors d'une requête ultérieure. Si vous mettez vous-même les données en cache, veillez à ce que le cache dépende de la langue du visiteur.

        

      

      

        
Next.js ou Vite : quelle différence ?

        

          
Next.js utilise withWeglot de @weglot/translate-react/next et WeglotProvider de @weglot/translate-react/react/next. Vite utilise weglotPlugin de @weglot/translate-react/vite et WeglotProvider de @weglot/translate-react/react. Webpack utilise weglotPlugin de @weglot/translate-react/webpack.

          
Les fonctions de contenu dynamique ne s'exécutent que dans les composants serveur de Next.js.

        

      

      

        
Est-ce que cela fonctionne avec les composants serveur React ?

        
Oui, grâce au routeur d'applications Next.js. Importer WeglotProvider de @weglot/translate-react/react/next afin que le changement de langue entraîne l'actualisation des composants de votre serveur. tDynamic, tDynamicAll et tDynamicHtml s'exécuter côté serveur, dans les composants du serveur.

      

      

        
Que se passe-t-il lorsque je lance la compilation ?

        

          
Le plugin recherche le texte dans le code JSX sous sourceRoot et interroge l'API Weglot pour obtenir les traductions manquantes. Weglot les génère à l'aide d'un modèle de langage (LLM), et la compilation attend jusqu'à translationTimeout (300 secondes par défaut). Il écrit ensuite public/translations/<locale>.json.

          
Si la traduction échoue, la compilation échoue et conserve les données reçues dans le cache local : relancez la compilation pour continuer. Avec buildMode: "cache-only", cette version n'effectue aucun appel réseau.

        

      

      

        
Où sont stockées les traductions ?

        
Dans votre projet « Weglot », où vous pouvez les consulter et les modifier. Chaque version conserve également les traductions qu’elle a reçues dans <sourceRoot>/weglot/cache/<locale>.json. Validez ce dossier pour la compilation sans appeler l'API, ou ignorez-le. public/translations/ est généré et va dans .gitignore.

      

      

        
Qu'est-ce qui est traduit, et comment puis-je exclure certains éléments ?

        
Texte en JSX, littéraux de chaîne dans des expressions JSX, chaînes lues à partir de constantes et attributs tels que title, alt, placeholder et aria-label. Le code, les URL, les noms de classes et les chaînes de caractères en dehors du JSX ne sont pas modifiés. Ajouter translate="no" ou data-weglot-skip pour conserver un élément dans la langue d'origine. Déclarez vos propres propriétés de texte avec translatableAttributes.

      

    

  







  

    
Rendez votre application React multilingue sans avoir à la réécrire

    
Installez le package, ajoutez votre clé API, puis lancez la compilation.

    

      
terminal

      
$ npm install @weglot/translate-react

    

    

      
      Obtenez votre clé API
    

    
Vous préférez le faire vous-même ? Consultez la documentation ou découvrez le package sur npm