React i18n sem chaves de tradução

A maioria das bibliotecas React i18n funciona com chaves de tradução. Você substitui cada pedaço de texto em seu aplicativo por uma chave, mantém um arquivo de tradução para cada idioma e procura o texto certo em tempo de execução. Com Magic Translate, você escreve seu texto em seu próprio idioma e a IA o traduz quando a página é exibida.

Como funciona o i18n com chaves de tradução

Com uma biblioteca baseada em chaves, um botão simples tem a seguinte aparência:

// en.json
{ "checkout.button": "Continue to payment" }

// de.json
{ "checkout.button": "Weiter zur Zahlung" }

// Checkout.tsx
<button>{t('checkout.button')}</button>

Cada novo texto precisa de uma chave e uma tradução em cada arquivo de idioma. Quando você altera o texto em inglês, os outros idiomas ficam desatualizados até que alguém atualize as traduções.

O mesmo botão sem teclas

Com Magic Translate, o texto permanece onde está:

import { T } from '@magic-translate/react';

<button>
  <T>Continue to payment</T>
</button>

Não há arquivos de idioma para manter. Quando você altera o texto, a nova versão é traduzida na próxima vez que for exibida e a tradução é armazenada em cache a partir de então.

Começando

1. Inscreva-se no Magic Translate e obtenha sua chave de API. O plano gratuito inclui 5.000 caracteres por mês.
2. Instale o cliente e envolva seu aplicativo no MagicTranslateProvider, conforme mostrado no guia React.
3. Embrulhe seu texto em <T>. Para props e atributos, use useT hook.

import { MagicTranslateProvider, T, Language } from '@magic-translate/react';

const App = () => (
  <MagicTranslateProvider apiKey="<your-api-key>" language={Language.FR}>
    <h1>
      <T>Welcome to our shop</T>
    </h1>
  </MagicTranslateProvider>
);

Se você renderizar no servidor, use o React SSR em vez disso, para que os mecanismos de pesquisa e os usuários obtenham HTML totalmente traduzido.

Quando as chaves de tradução ainda são a melhor escolha

A tradução de IA é boa, mas não é revisada por uma pessoa. Se cada palavra do seu aplicativo precisar ser aprovada por um tradutor, por exemplo, para textos jurídicos ou médicos, uma biblioteca baseada em chaves com traduções humanas oferece esse controle. Muitos aplicativos combinam: Magic Translate na maior parte da interface e textos revisados quando necessário.

Perguntas frequentes

A tradução é rápida o suficiente?

A primeira tradução pode levar alguns segundos. Depois disso, ele é armazenado em cache e leva de 100 a 300 ms. Com o React SSR, as traduções acontecem no servidor, então os usuários recebem uma página já traduzida.

Quanto custa?

O uso é contado em caracteres traduzidos por mês, e o texto que já foi traduzido não é contado novamente. Veja como o uso é calculado e os preços.

Quais idiomas são suportados?

Mais de 70. Veja a lista completa de idiomas compatíveis.