Documentação: Boas práticas

Boas práticas

Portuguese (Portugal)

Coloque URLs em variáveis

Ao traduzir cadeias de caracteres que contêm URLs ou dados semelhantes, considera‑se uma boa prática colocar essas URLs em variáveis e depois referenciá‑las nos seus templates.

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

Quando 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 tem qualquer coisa de muito meta.

Array global de origens e múltiplas origens por componente

Este padrão só funciona quando se utiliza o Next.js Pages Router.

Ao trabalhar com aplicações maiores, é benéfico dividir strings e traduções em várias origens mais pequenas. Esta abordagem ajuda a reduzir o tamanho dos bundles e os tempos de transferência, garantindo uma localização eficiente e escalável.

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

Considere este exemplo, onde separámos 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});
}

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

Tratamento de erros e depuração

Boas práticas

Use rótulos ARIA

Array global de origens e múltiplas origens por componente