Melhores práticas
Coloque URLs em variáveis
Ao traduzir strings que contêm URLs ou dados semelhantes, é considerado uma boa prática colocar essas URLs dentro de variáveis e, em seguida, referenciá-las dentro de seus templates.
<Translate
string={`Click <a href="{{url}}">here</a>`}
variables={{url: 'https://tacotranslate.com'}}
/>Usar labels ARIA
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 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 sobre isso 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.
Ao trabalhar com aplicações maiores, é benéfico dividir strings e traduções em múltiplas origens menores. Essa abordagem ajuda a diminuir o tamanho dos pacotes e os tempos de transferência, garantindo uma localização eficiente e escalável.
Embora isso seja simples ao renderizar apenas no lado do cliente, gerenciar origens rapidamente se torna 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 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.