@weglot/translate-react

Traduza seu
Reagir, Next.js ou Vite aplicativo

Sem wrappers `t()`, sem arquivos JSON. Adicione um plug-in de compilação e uma chave de API do Weglot : o texto no seu JSX é traduzido durante a compilação do aplicativo, e sua equipe edita as traduções em Weglot sem precisar mexer no código.

Obtenha sua chave de API

Copie o prompt para · · · leia a documentação · ver no npm

Requer React 19 Next.js 15 / 16.0.4+ (App Router) ou Vite Node 20.9+

// how it works

Quatro etapas. Seus componentes permanecem como estão.

Os idiomas de origem e de destino são obtidos a partir do seu projeto Weglot , e não do seu código. O plug-in lê o texto no seu JSX durante a compilação e busca as respectivas traduções.

  1. Instale o pacote e adicione sua chave de API

    Crie um projeto do Weglot 2.0 e, em seguida, copie a chave de API nas configurações do projeto. Ela começa com pk_. Mantenha .env fora do controle de versão.

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

# .env
WEGLOT_API_KEY=pk_your_weglot_api_key

  2. Adicione o plug-in

    Envolva sua configuração do Next.js com withWeglot. Ponto sourceRoot na pasta que contém suas páginas e componentes.

    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. Adicionar o provedor

    Envolva seu layout raiz com WeglotProvider a partir do ponto de entrada do Next.js, de modo que a alteração do idioma atualize seus componentes de servidor.

    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. Compile e distribua em todos os idiomas do seu projeto

    Cada compilação busca as traduções que faltam em Weglot e grava public/translations/<locale>.json. Ignore essa pasta. Adicione um seletor de idioma com LocaleSwitcher ou useWeglotContext.

    .gitignore
    public/translations/

// compare

Por que não uma biblioteca clássica de i18n?

As bibliotecas de internacionalização (i18n) pedem que você substitua cada string por uma chave e mantenha um arquivo por idioma. O ` Weglot ` lê as strings que você já escreveu. Veja a seguir uma comparação entre as opções.

Com base na documentação pública de cada projeto (Weglot, next-intl, Paraglide JS, Contentful, Sanity, Strapi), novembro de 2026.
Critérios Weglot
@weglot/translate-react		 next-intl / i18next Paraglide JS Localização nativa do CMS
Envolva as sequências nas funções t() ou nas funções de mensagem NãoTexto em JSX foi detectado durante a compilação. Simt("key") para cada sequência. Simm.key() funções de mensagem. Apenas conteúdoAs strings no seu código ainda precisam de uma biblioteca.
Arquivos de tradução por idioma Nenhum para manterGerado na compilação, ignorado pelo Git. SimNormalmente, um arquivo JSON por localidade. SimUm arquivo de mensagens por localidade. Nãoarmazenado no CMS.
Roteamento multilíngue e SEO (URL por idioma, hreflang) Ainda nãoO idioma é armazenado em um cookie. As mesmas URLs para todos os idiomas, com o idioma de origem indexado. next-intl: simRoteamento de localidade integrado. i18next: por meio da configuração da sua estrutura. SimURLs localizadas integradas: prefixos de localidade, caminhos traduzidos ou domínios. Adicione você mesmo as tags hreflang. Front-endUm CMS sem interface (headless) armazena o conteúdo por localidade. As URLs e os atributos hreflang vêm do seu front-end.
Traduções geradas para você SimWeglot é traduzido por um LLM durante a compilação. NãoTraga suas próprias traduções ou um TMS. Com ferramentasa tradução automática via CLI do inlang ou seu agente de programação. Complemento pagoTradução por IA em planos pagos: Contentful AI Actions, Sanity AI Assist, Strapi AI Translations.
Editar traduções sem a ajuda de um desenvolvedor SimRevise e edite no painel do Weglot . NãoEdite os arquivos JSON ou adicione um TMS separado. Com o Finkeditor web do inlang, com uma conta no GitHub. SimNo editor do CMS.
Criado por um agente de programação em uma única solicitação SimUma instalação, duas alterações na configuração. Veja abaixo o prompt que pode ser copiado. Tarefa demoradaO agente transforma cada sequência de caracteres em chaves e arquivos. Tarefa demoradainit se for executado sem solicitar a inserção de agentes, então cada sequência de caracteres se torna um m.key() mensagem. n/aConfigurado no CMS.

// built for coding agents

Desenvolvido para agentes de programação de IA

Se você desenvolver usando o Claude Code, o Cursor ou o Codex, seu agente poderá adicionar um ` Weglot ` por conta própria. Não há strings para reescrever, portanto, a alteração é pequena e fácil de revisar.

01 · configuração

O agente instala e configura o programa

Um npm install, um plugin, um provedor, uma linha em .gitignore. O agente só pede a chave da API.

02 · documentos

Documentos que os LLMs conseguem ler

A documentação contém um llms.txt índice, e cada página tem uma versão em Markdown: adicione .md ao seu URL.

03 · prompt

Um prompt pronto para ser copiado

Cada etapa do prompt corresponde ao guia de introdução, com os caminhos de importação corretos. Copie-o abaixo.

Colocar o código do Claude

      

      
      
      
    

  

  







  

    
// for your team

    
Edite e revise sem mexer no código

    
Todas as traduções aparecem no seu projeto do Weglot . As equipes de produto, marketing e tradutores revisam e editam o texto nesse local, sem precisar abrir uma solicitação de pull.

    
    
      
  • Verifique as traduções que o Weglot gera para seu aplicativo.
    • 
      
  • Edite qualquer tradução no painel do Weglot .
    • 
      
  • Excluir qualquer coisa do código com translate="no" ou data-weglot-skip.
    • 
    

  







  

    
// fit

    
Quando usar o ` Weglot` e quando não usar

    
O pacote está em fase de pré-visualização. Veja a seguir onde ele se encaixa atualmente.

    

      

        
Use @weglot/translate-react se

        
    
          
  • Seu aplicativo roda o React 19 no Next.js (App Router) ou no Vite.
    • 
          
  • Você não quer colocar as strings entre t() nem manter um arquivo para cada idioma.
    • 
          
  • Seu programador escreve a maior parte do código, e você quer que a tradução acompanhe esse ritmo.
    • 
          
  • As pessoas que não sabem programar precisam revisar e editar as traduções.
    • 
          
  • O texto da sua interface de usuário está no código, enquanto o conteúdo do CMS pode ser traduzido no lado do servidor.
    • 
        

      

      

        
Use outra coisa se

        
    
          
  • Você precisa de um URL por idioma e de páginas traduzidas indexadas pelos mecanismos de busca já hoje. Use o next-intl ou o Paraglide JS.
    • 
          
  • Você quer que as traduções fiquem como arquivos no seu repositório e sejam revisadas em pull requests. Use o inlang com o Paraglide JS ou o i18next.
    • 
          
  • Seu aplicativo está no React 18, no Next.js Pages Router ou no Next.js 14 ou versões anteriores.
    • 
          
  • Seu site foi criado em um CMS ou em um construtor de sites, e não em React. Use as integrações com CMS do Weglot.
    • 
        

      

    

  







  

    
PERGUNTAS FREQUENTES

    

      

        
O sistema oferece suporte a SEO: uma URL por idioma e hreflang?

        

          
Hoje não. O idioma do visitante é armazenado em um cookie e todos os idiomas são exibidos nas mesmas URLs; portanto, os mecanismos de busca indexam apenas o idioma de origem.

          
Você pode traduzir os títulos e as descrições das páginas com tDynamicAll em generateMetadata. Se você precisar de URLs indexadas por idioma agora, use uma biblioteca com roteamento por localidade, como o next-intl ou o Paraglide JS.

        

      

      

        
Como faço para traduzir conteúdo dinâmico proveniente de um CMS, de uma API ou dos usuários?

        

          
O plugin traduz apenas o texto escrito no seu código. Para conteúdos que o seu código nunca vê, chame tDynamic, tDynamicAll ou tDynamicHtml de @weglot/translate-react/dynamic nos componentes de servidor do Next.js.

          
Se a API demorar mais de 500 ms ou se um texto for solicitado pela primeira vez, ela retorna o texto original. A tradução estará disponível em uma solicitação posterior. Se você mesmo armazenar os dados em cache, faça com que o cache dependa do idioma do visitante.

        

      

      

        
Next.js ou Vite: o que muda?

        

          
O Next.js utiliza withWeglot de @weglot/translate-react/next e WeglotProvider de @weglot/translate-react/react/next. O Vite utiliza weglotPlugin de @weglot/translate-react/vite e WeglotProvider de @weglot/translate-react/react. O Webpack usa weglotPlugin de @weglot/translate-react/webpack.

          
As funções de conteúdo dinâmico só são executadas nos componentes de servidor do Next.js.

        

      

      

        
Isso funciona com os React Server Components?

        
Sim, com o Next.js App Router. Importar WeglotProvider de @weglot/translate-react/react/next para que a alteração do idioma atualize os componentes do seu servidor. tDynamic, tDynamicAll e tDynamicHtml ser executado no lado do servidor, nos componentes do servidor.

      

      

        
O que acontece quando eu compilo?

        

          
O plug-in localiza o texto no JSX em sourceRoot e solicita à API Weglot as traduções que ainda faltam. O Weglot as gera com um LLM, e a compilação aguarda até translationTimeout (300 segundos por padrão). Em seguida, ele grava public/translations/<locale>.json.

          
Se a tradução falhar, a compilação falhará e manterá o que recebeu no cache local: compile novamente para continuar. Com buildMode: "cache-only", a compilação não realiza chamadas de rede.

        

      

      

        
Onde as traduções ficam armazenadas?

        
No seu projeto Weglot , onde você pode revisar e editar essas traduções. Cada compilação também mantém as traduções que recebeu em <sourceRoot>/weglot/cache/<locale>.json. Envie essa pasta para compilação sem chamar a API ou ignore-a. public/translations/ é gerado e vai para .gitignore.

      

      

        
O que é traduzido e como faço para excluir algo?

        
Texto em JSX, literais de string dentro de expressões JSX, strings lidas a partir de constantes e atributos como title, alt, placeholder e aria-label. Código, URLs, nomes de classes e strings fora do JSX não são alterados. Adicionar translate="no" ou data-weglot-skip para manter um elemento no idioma original. Declare suas próprias propriedades de texto com translatableAttributes.

      

    

  







  

    
Transforme seu aplicativo React em um aplicativo multilíngue sem precisar reescrevê-lo

    
Instale o pacote, adicione sua chave de API e compile.

    

      
terminal

      
$ npm install @weglot/translate-react

    

    

      
      Obtenha sua chave de API
    

    
Prefere fazer você mesmo? Leia a documentação ou confira o pacote no npm