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 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 de API. Crie uma read key e uma read/write key. Vamos salvá‑las como variáveis de ambiente. A read key é o que chamamos de public e a read/write key é 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 de localidade padrão de fallback. Neste exemplo, vamos defini-lo como en para o 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 expor a chave de API secreta read/write em ambientes de produção do lado do cliente.

Configurando o TacoTranslate

Inicialize o TacoTranslate em sua aplicação React envolvendo sua aplicação com o 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 da sua aplicação para exibir o texto traduzido! Não deixe de conferir nossa documentação para obter mais informações e 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, poupando 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 IA garantem resultados contextualmente precisos e de alta qualidade.
• Solução escalável: Adicione suporte a novos idiomas com facilidade conforme sua aplicação e base de clientes crescem.

Comece hoje mesmo!

Seu aplicativo React será traduzido automaticamente quando você adicionar quaisquer strings em um componente Translate. Observe que somente ambientes com permissões read/write na chave de API poderão criar novas strings para serem traduzidas.

Recomendamos ter um ambiente de staging fechado e seguro onde você possa testar seu aplicativo de produção, adicionando novas strings antes de entrar em produção. Isso impedirá que alguém alguém roube sua chave de API secreta e, potencialmente, infle seu projeto de tradução adicionando strings não autorizadas.

Be sure to check out the complete examples over at our GitHub profile. If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Translate for free!