A melhor solução para internacionalização (i18n) em aplicativos React

Como funciona

Instale o pacote TacoTranslate via npm:

npm install tacotranslate

Quando você tiver o módulo instalado, será necessário criar uma conta no TacoTranslate, um projeto de tradução e as chaves de API associadas. Crie uma conta aqui. É gratuito e não exige que você adicione um cartão de crédito.

Dentro da interface do aplicativo TacoTranslate, crie um projeto e navegue até a aba de chaves API. Crie uma chave read, e uma chave read/write. Nós as salvaremos como variáveis de ambiente. A chave read é o que chamamos de public e a chave read/write é secret. Por exemplo, você poderia adicioná-las a um arquivo .env na raiz do seu projeto.

Você também precisará adicionar mais duas variáveis de ambiente: TACOTRANSLATE_DEFAULT_LOCALE e TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: O código do idioma padrão de fallback. Neste exemplo, vamos configurá-lo para en para inglês.
• TACOTRANSLATE_ORIGIN: A “pasta” onde suas strings serão armazenadas, como a URL do seu site. Leia mais sobre origens aqui.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Certifique-se de nunca vazar a chave secreta de API read/write para ambientes de produção do lado do cliente.

Configurando o TacoTranslate

Inicie o TacoTranslate em sua aplicação React envolvendo sua aplicação no provedor de contexto do TacoTranslate:

import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';

const tacoTranslate = createTacoTranslateClient({
	apiKey: 'YOUR_API_KEY',
});

export default function App() {
	const [locale, setLocale] = useState('en');

	return (
		<TacoTranslate client={tacoTranslate} locale={locale}>
			<Translate string="Hello, world!"/>
		</TacoTranslate>
	);
}

Agora você pode usar o componente Translate em qualquer lugar dentro da sua aplicação para exibir texto traduzido! Não deixe de conferir nossa documentação para mais informações e para guias de implementação específicos para sua configuração.

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

Benefícios de usar o TacoTranslate

• Economia de tempo: Automatiza o processo tedioso de localização e coleta de strings, economizando seu tempo valioso.
• Custo-benefício: Reduz a necessidade de traduções manuais, diminuindo seus custos de localização.
• Precisão aprimorada: Traduções com tecnologia de IA garantem resultados contextualmente precisos e de alta qualidade.
• Solução escalável: Adicione suporte para novos idiomas facilmente conforme seu aplicativo e base de clientes crescem.

Comece hoje mesmo!

Sua aplicação React será traduzida automaticamente quando você adicionar quaisquer strings a um componente Translate. Observe que somente ambientes com permissões read/write na chave da API poderão criar novas strings para serem traduzidas.

Recomendamos ter um ambiente de staging fechado e seguro, onde você possa testar sua aplicação de produção, adicionando novas strings antes do lançamento. Isso evitará que alguém roube sua chave secreta da API e potencialmente infle seu projeto de tradução adicionando strings indevidas.

Não deixe de conferir os exemplos completos em nosso perfil do GitHub. Se encontrar algum problema, sinta-se à vontade para entrar em contato, e teremos o maior prazer em ajudar.

O TacoTranslate permite que você localize automaticamente suas aplicações React rápida e facilmente para qualquer idioma e vice-versa. Traduza grátis!