A melhor solução para internacionalização (i18n) em aplicações React

Como funciona

Instale o pacote TacoTranslate via npm:

npm install tacotranslate

Quando tiveres o módulo instalado, precisarás de criar uma conta TacoTranslate, um projeto de tradução e as respetivas chaves API. Cria uma conta aqui. É gratuito e não requeres adicionar um cartão de crédito.

Dentro da interface do TacoTranslate, crie um projeto e navegue até ao separador de chaves API. Crie uma chave read e uma chave read/write. Vamos guardá-las como variáveis de ambiente. A chave read é o que chamamos de public e a chave read/write é secret. Por exemplo, pode adicioná-las a um ficheiro .env na raiz do seu projeto.

Também vai precisar de adicionar mais duas variáveis de ambiente: TACOTRANSLATE_DEFAULT_LOCALE e TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: O código da localidade predefinida para recurso. Neste exemplo, iremos definir como en para inglês.
• TACOTRANSLATE_ORIGIN: A “pasta” onde as suas strings serão armazenadas, como o URL do seu website. 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 divulgar a chave API secreta read/write em ambientes de produção no lado do cliente.

Configurar o TacoTranslate

Inicialize o TacoTranslate na sua aplicação React, envolvendo a 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, pode usar o componente Translate em qualquer lugar dentro da sua aplicação para mostrar texto traduzido! Não se esqueça de consultar a nossa documentação para mais informações e para guias de implementação específicos para a 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

• Poupa tempo: Automatiza o processo tedioso de localização e recolha de strings, poupando-lhe tempo valioso.
• Rentável: Reduz a necessidade de traduções manuais, diminuindo os seus custos de localização.
• Precisão melhorada: As traduções com IA garantem resultados contextualmente precisos e de alta qualidade.
• Solução escalável: Adicione facilmente suporte para novos idiomas à medida que a sua aplicação e base de clientes crescem.

Comece hoje!

A sua aplicação React será traduzida automaticamente quando adicionar quaisquer strings a um componente Translate. Note que apenas ambientes com permissões read/write na chave API poderão criar novas strings para serem traduzidas.

Recomendamos ter um ambiente de staging fechado e seguro onde possa testar a sua aplicação em produção, adicionando novas strings antes de ir para produção. Isto vai evitar que alguém roube a sua chave API secreta e, potencialmente, infle o 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!