Documentação: Boas práticas

Melhores práticas

Portuguese (Brazil)

Coloque URLs em variáveis

Ao traduzir strings que contenham URLs ou dados semelhantes, é considerada uma boa prática colocar essas URLs em variáveis e então referenciá-las em seus templates.

<Translate
	string={`Click <a href="{{url}}">here</a>`}
	variables={{url: 'https://tacotranslate.com'}}
/>

Ao traduzir o texto de elementos interativos, como botões, é importante incluir rótulos ARIA para garantir a acessibilidade. Os rótulos ARIA ajudam leitores de tela a fornecer informações descritivas sobre a função do elemento.

Por exemplo, se você tiver um botão que permite que os usuários copiem o texto de um bloco de código, você pode usar o atributo aria-label para fornecer uma descrição clara:

<Translate
	aria-label={useTranslation('Copy to clipboard')}
	string="Copy"
/>

Algo nisso parece muito meta.

Array global de origens e múltiplas origens de componentes

Esse padrão só funciona quando se usa o Next.js Pages Router.

Quando se trabalha com aplicações maiores, é recomendável dividir strings e traduções em múltiplas origens menores. Essa abordagem ajuda a diminuir os tamanhos dos bundles e os tempos de transferência, garantindo uma localização eficiente e escalável.

Embora isso seja simples quando a renderização é feita apenas no lado do cliente, gerenciar origens torna-se rapidamente complexo ao buscar traduções para renderização do lado do servidor. No entanto, você pode automatizar o gerenciamento de origens utilizando o array origins do cliente TacoTranslate.

Considere este exemplo, onde separamos nossos componentes e páginas em arquivos separados.

components/pricing-table.tsx

import TacoTranslate, {Translate} from 'tacotranslate/react';
import tacoTranslate from '../tacotranslate-client';

// Set an origin name for this component
const origin = 'components/pricing-table';

// Push the origin into the origins array as this file is imported
tacoTranslate.origins.push(origin);

export default function PricingTable() {
	return (
		<TacoTranslate origin={origin}>
			<Translate string="Pricing table" />
			// ...
		</TacoTranslate>
	);
}

pages/pricing.tsx

import TacoTranslate, {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';
import PricingTable from '../components/pricing-table';

const origin = 'pages/pricing';
tacoTranslateClient.origins.push(origin);

export default function PricingPage() {
	return (
		<TacoTranslate origin={origin}>
			<Translate string="Pricing page" />
			<PricingTable />
		</TacoTranslate>
	);
}

// We will now fetch translations for all imported components and their origins automatically
export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

Veja nossos exemplos de renderização do lado do servidor para mais informações sobre getTacoTranslateStaticProps.

Tratamento de erros e depuração

Melhores práticas

Use rótulos ARIA

Array global de origens e múltiplas origens de componentes