TacoTranslate
/
DocumentaçãoPreços
 
  1. Introdução
  2. Primeiros passos
  3. Instalação e configuração
  4. Usando o TacoTranslate
  5. Renderização do lado do servidor
  6. Uso avançado
  7. Boas práticas
  8. Tratamento de erros e depuração
  9. Idiomas suportados

Boas práticas

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 então referenciá-las em seus templates.

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

Usar rótulos ARIA

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

Por exemplo, se você tiver um botão que permite aos usuários copiar 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

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

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

Embora isso seja simples quando a renderização ocorre somente no lado do cliente, gerenciar origens rapidamente se torna complexo ao buscar traduções para renderização no 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 no lado do servidor para mais informações sobre getTacoTranslateStaticProps.

Tratamento de erros e depuração

Um produto da NattskiftetFeito na Noruega