@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

// what your users see

O JSX que você escreveu, em todas as linguagens

Escreva o texto uma vez. O ` Weglot ` o traduz durante a compilação.

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

O mesmo botão, cinco idiomas. Larguras medidas em tempo real.

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

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

Sem chaves, sem t(). Escreva o texto em JSX, e pronto.

0chamadas à função t() para somar
0arquivos de tradução a serem mantidos
1npm install
2alterações no código: plugin e provedor

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

// under the hood

O que acontece quando você cria

  1. 01 Lêseu JSX
  2. 02Enviauma nova mensagem de texto
  3. 03Weglot traduz
  4. 04Gravaum arquivo por idioma

// every language of your project

Uma única compilação para todas as línguas que você adicionar

Selecione os idiomas em Weglot. A próxima versão já os incluirá.

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

Adicione um idioma em Weglot e, em seguida, execute a compilação. Os arquivos de tradução serão distribuídos junto com seu aplicativo.

// built for coding agents

Seu agente cuida de tudo

Não há strings para reescrever, portanto, a alteração é pequena e fácil de revisar.

Qualquer agente de programação. Cole um prompt no agente que você já usa.

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

Agentes do Docs podem ler. Um índice llms.txt e um arquivo Markdown para cada página.

✓Instala o pacotepackage.json
✓Adiciona o plug-innext.config.ts
✓Adiciona o provedorlayout.tsx
✓Ignora os arquivos gerados.gitignore
?Solicita sua chave de API.env

Um diff que você pode analisar. Nenhuma string foi reescrita.

Colocar o código do Claude

      

      
      
      
    

  

        

        
Copie o prompt. Siga os mesmos passos do guia de introdução.

      

    

  










  

    
// what gets translated

    
O plug-in distingue texto de código

    

      

      

        
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>
  );
}

      

      
O texto foi traduzido. Texto JSX, literais, constantes, alt, title, placeholder, aria-label.

      
classNamehref="/signup"onClickhttps://…useStatekey={id}
O código permanece inalterado. Nomes de classes, URLs, lógica.

      
translate="no"
A decisão é sua. Mantenha qualquer elemento como está ou use os atributos `data-weglot-skip`.

    

  











  

    
// for your team

    
Edite e revise sem mexer no código

    

      

      

        
my-next-app › Alemão2 para revisar

        
FonteAlemãoStatus

        
Save changesÄnderungen speichernRevisado

        
Start your free trialKostenlos testenEdição

        
Cancel anytime.Jederzeit kündbar.Para revisar

        
Choose your planWählen Sie Ihren TarifPara revisar

      

      
Revisão em Weglot. As equipes de produto, marketing e tradução revisam o texto.

      
Edit saved · Kostenlos testen
No code change
Não se deve enviar um pull request apenas para corrigir uma palavra.

      
Acompanhe o que foi revisado. Veja o progresso em cada idioma.

    

  









  

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

    

      
Roteador de aplicativos do Next.js
Com suporte
Next.js 15 ou 16.0.4 ou superior, React 19.

      
Vite
Com suporte
React 19, Node 20.9+. O Webpack também funciona.

      
Componentes de servidor do React
Com suporte
A alteração do idioma atualiza os componentes do servidor.

      
Conteúdo do CMS e da API
Com suporte
Com tDynamic nos componentes de servidor do Next.js.

      
Edição por pessoas que não são desenvolvedores
Com suporte
Revise e edite no painel do Weglot .

      
Um URL por idioma
Ainda não
Atualmente, o idioma é armazenado em um cookie. Agora, são necessárias URLs indexadas por idioma: use o next-intl ou o Paraglide JS.

      
Traduções como arquivos repo
Ação de tradução
Weglot traduz seus arquivos de localização JSON no GitHub Actions e abre uma solicitação de pull. Consulte a documentação →

      
React 18, Roteador de Páginas
Não compatível
Também o Next.js 14 ou versões anteriores.

      
CMS ou criador de sites
Não é este pacote
Seu site não foi desenvolvido com React: use as integrações com CMS do Weglot.

    

  











  

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


    
  










  

    
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