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

Como funciona

Instale o pacote TacoTranslate através do npm:

npm install tacotranslate

Depois de instalar o módulo, terá de criar uma conta no TacoTranslate, um projeto de tradução e as chaves de API associadas. Crie uma conta aqui. É gratuito e não é necessário adicionar um cartão de crédito.

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: O código da localidade predefinida de fallback. Neste exemplo, vamos defini‑lo para en para inglês.
• TACOTRANSLATE_ORIGIN: A “pasta” onde as suas strings serão armazenadas, como a URL do seu website. Saiba 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.

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 utilizar o componente Translate em qualquer parte da sua aplicação para mostrar o texto traduzido! Não deixe 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." />
	);
}

Vantagens de usar o TacoTranslate

• Economia de tempo: Automatiza o processo tedioso de localização e recolha de cadeias de texto, poupando-lhe um tempo valioso.
• Rentável: Reduz a necessidade de traduções manuais, diminuindo os seus custos de localização.
• Maior precisão: As traduções potenciadas por IA garantem resultados contextualmente precisos e de elevada qualidade.
• Solução escalável: Adicione facilmente suporte para novas línguas à medida que a sua aplicação e a sua base de clientes crescem.

Comece hoje mesmo!

A sua aplicação React será traduzida automaticamente sempre que adicionar qualquer string a um componente Translate. Tenha em atenção que apenas os ambientes com permissões read/write na chave de API poderão criar novas strings a serem traduzidas.

Recomendamos que tenha um ambiente de staging fechado e seguro onde possa testar a sua aplicação de produção, adicionando novas strings antes de ir para produção. Isto impedirá que alguém roube a sua chave de API secreta e, potencialmente, infle o seu projeto de tradução ao adicionar 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!