React i18n sem chaves de tradução

A maioria das bibliotecas React i18n funciona com chaves de tradução. Você substitui cada texto em seu aplicativo por uma chave, mantém um arquivo de traduções para cada idioma e procura o texto certo em tempo de execução. Magic Translate ignora tudo isso: você escreve seu texto em seu próprio idioma e ele é traduzido 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 significa uma nova chave, uma entrada em cada arquivo de idioma e uma tradução para cada idioma. Quando você altera o texto em inglês, os outros idiomas ficam desatualizados até que alguém os traduza novamente.

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 automática é 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 de um texto 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, para que os usuários nunca esperem por elas.

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.