@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

// what your users see

Le code JSX que vous avez écrit, dans toutes les langues

Rédigez le texte une seule fois. Weglot se charge de le traduire lors de la compilation.

enSave changessource
deÄnderungen speichern
frEnregistrer
ja変更を保存
arحفظ التغييراتRTL

Un seul bouton, cinq langues. Largeurs mesurées en temps réel.

app/settings/page.tsx
export default function Settings() {
  return (
    <button>Save changes</button>
  );
}

// no key, no t(), no en.json

Pas de clés, pas de t(). Écrivez le texte en JSX, c'est tout.

0appels à t() à ajouter
0fichiers de traduction à mettre à jour
1npm install
2modifications du code : plugin et fournisseur

// 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/

// under the hood

Que se passe-t-il lorsque vous construisez ?

  1. 01Litvotre code JSX
  2. 02Envoieun nouveau SMS
  3. 03 «Weglot » se traduit par
  4. 04Créeun fichier par langue

// every language of your project

Une seule version, toutes les langues que vous ajoutez

Sélectionnez les langues sur Weglot. Elles seront intégrées à la prochaine version.

SourceEnglishen
FrançaisFrench
DeutschGerman
EspañolSpanish
PortuguêsPortuguese
日本語Japanese
中文Chinese
한국어Korean
हिन्दीHindi
РусскийRussian
العربيةArabic · RTL
עבריתHebrew · RTL
+110 languagesSee the full list →

Ajoutez une langue dans Weglot, puis lancez la compilation. Les fichiers de traduction seront déployés avec votre application.

// built for coding agents

C'est votre agent qui s'en charge

Il n'y a pas de chaîne à réécrire, donc la modification est mineure et facile à vérifier.

N'importe quel agent de codage. Collez l'prompt suivante dans l'agent que vous utilisez déjà.

react/getting-started.md
react/dynamic-content.md
react/use-cases.md
developers.weglot.com/llms.txt

Fichiers que les agents peuvent lire : un fichier d'index llms.txt et un fichier Markdown pour chaque page.

✓Installe le paquetpackage.json
✓Ajoute le pluginnext.config.ts
✓Ajoute le fournisseurlayout.tsx
✓Ignore les fichiers générés.gitignore
?Demande votre clé API.env

Un diff que vous pouvez consulter. Aucune chaîne n'a été réécrite.

Coller dans Claude Code

      

      
      
      
    

  

        

        
Copiez le fichier « prompt ». Suivez les mêmes étapes que celles décrites dans le guide de démarrage.

      

    

  










  

    
// what gets translated

    
Le plugin sait distinguer le texte du code

    

      

      

        
app/pricing/page.tsx


export default function Pricing() {
  return (
    <section className="pricing">
      <h2>Choose your plan</h2>
      <input placeholder="Email address" />
      <a href="/signup">{"Start free trial"}</a>
      <span translate="no">Weglot</span>
    </section>
  );
}

      

      
Le texte est traduit. Texte JSX, littéraux, constantes, alt, title, placeholder, aria-label.

      
classNamehref="/signup"onClickhttps://…useStatekey={id}
Le code reste inchangé. Les noms de classes, les URL, la logique.

      
translate="no"
C'est à vous de voir. Vous pouvez conserver tel quel n'importe quel élément, ou utiliser l'attribut « data-weglot-skip ».

    

  











  

    
// for your team

    
Modifier et relire sans toucher au code

    

      

      

        
my-next-app › Allemand2 à réviser

        
SourceAllemandStatut

        
Save changesÄnderungen speichernRevu

        
Start your free trialKostenlos testenÉdition

        
Cancel anytime.Jederzeit kündbar.Pour récapituler

        
Choose your planWählen Sie Ihren TarifPour récapituler

      

      
Révision sur Weglot. Le service produit, le service marketing et les traducteurs revoient le texte.

      
Edit saved · Kostenlos testen
No code change
Pas de pull request pour corriger un mot.

      
Suivez ce qui a été révisé. Consultez les progrès réalisés pour chaque langue.

    

  









  

    
// fit

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

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

    

      
Routeur d'applications Next.js
Soutenu
Next.js 15 ou 16.0.4 et versions ultérieures, React 19.

      
Vite
Soutenu
React 19, Node 20.9 ou version ultérieure. Webpack fonctionne également.

      
Composants serveur React
Soutenu
Le changement de langue entraîne une actualisation des composants de votre serveur.

      
Contenu CMS et API
Soutenu
Avec tDynamic dans les composants serveur de Next.js.

      
Édition par des non-développeurs
Soutenu
Vérifiez et modifiez ces informations dans le tableau de bord d'Weglot .

      
Une URL par langue
Pas encore
La langue est actuellement enregistrée dans un cookie. Vous avez besoin dès maintenant d'URL indexées par langue : utilisez next-intl ou Paraglide JS.

      
Traductions sous forme de fichiers repo
Action de traduction
Weglot traduit vos fichiers de localisation JSON dans GitHub Actions et ouvre une pull request. Consultez la documentation →

      
React 18, routeur de pages
Non pris en charge
Également Next.js 14 ou une version antérieure.

      
CMS ou créateur de sites web
Pas ce colis
Votre site n'est pas développé avec React : utilisez les intégrations CMS proposées par Weglot.

    

  











  

    
// 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.


    
  










  

    
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