Melhores práticas
Coloque as URLs em variáveis
Ao traduzir strings que contêm 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'}}
/>Use rótulos ARIA
Ao traduzir o texto de elementos interativos, como botões, é importante incluir rótulos ARIA para garantir 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 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
Esse padrão funciona apenas ao usar o Next.js Pages Router.
Quando se trabalha com aplicações maiores, é benéfico dividir as strings e traduções em várias 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 se renderiza apenas no lado do cliente, gerenciar origens se torna rapidamente complexo ao buscar traduções para renderização no lado do servidor. Entretanto, você pode automatizar o gerenciamento de origens utilizando o array TacoTranslate origins.
Considere este exemplo, onde separamos nossos componentes e páginas em arquivos distintos.
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>
);
}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.