Documentação: Boas práticas

Boas práticas

Portuguese (Portugal)

Coloque URLs em variáveis

Ao traduzir strings que contêm URLs ou dados semelhantes, considera-se uma boa prática colocar essas URLs em variáveis e, em seguida, referenciá-las nos 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 os leitores de ecrã a fornecer informação descritiva sobre a função do elemento.

Por exemplo, se tiver um botão que permite aos utilizadores copiar texto de um bloco de código, pode usar o atributo aria-label para fornecer uma descrição clara:

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

Isto parece muito meta.

Array global de origens e múltiplas origens por componente

Este padrão só funciona ao utilizar o Next.js Pages Router.

Quando se trabalha com aplicações de maior dimensão, é vantajoso dividir cadeias de texto e traduções em múltiplas origens mais pequenas. Esta abordagem ajuda a reduzir os tamanhos dos bundles e os tempos de transferência, garantindo uma localização eficiente e escalável.

Embora isto seja simples quando se faz apenas renderização no lado do cliente, gerir origens torna‑se rapidamente complexo ao obter traduções para renderização no lado do servidor. No entanto, pode automatizar a gestão de origens utilizando o array TacoTranslate client origins.

Considere este exemplo, onde separamos os nossos componentes e páginas em ficheiros 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 os nossos exemplos de renderização no servidor para mais informações sobre getTacoTranslateStaticProps.

Tratamento de erros e depuração

Boas práticas

Usar rótulos ARIA

Array global de origens e múltiplas origens por componente