Millors pràctiques
Posa les URL en variables
Quan es tradueixen cadenes que contenen URLs o dades similars, es considera una bona pràctica situar aquestes URLs dins de variables i després fer-hi referència dins de les plantilles.
<Translate
string={`Click <a href="{{url}}">here</a>`}
variables={{url: 'https://tacotranslate.com'}}
/>
Ús d'etiquetes ARIA
A l'hora de traduir el text d'elements interactius com els botons, és important incloure etiquetes ARIA per garantir l'accessibilitat. Les etiquetes ARIA ajuden els lectors de pantalla a proporcionar informació descriptiva sobre la funció de l'element.
Per exemple, si tens un botó que permet als usuaris copiar text d'un bloc de codi, pots utilitzar l'atribut aria-label
per proporcionar una descripció clara:
<Translate
aria-label={useTranslation('Copy to clipboard')}
string="Copy"
/>
Hi ha alguna cosa en això que em sembla molt meta.
Matriu global d'origens i múltiples origens per component
Aquest patró només funciona quan s'utilitza el Next.js Pages Router.
Quan es treballa amb aplicacions més grans, és recomanable dividir les cadenes i les traduccions en múltiples orígens més petits. Aquest enfocament ajuda a reduir la mida dels paquets i els temps de transferència, garantint una localització eficient i escalable.
Tot i que això és senzill quan es fa el renderitzat només al costat del client, la gestió d'orígens es complica ràpidament quan s'obtenen traduccions per al renderitzat al costat del servidor. Tanmateix, podeu automatitzar la gestió d'orígens utilitzant la matriu del client TacoTranslate origins
.
Considereu aquest exemple, en el qual hem separat els components i les pàgines en fitxers diferents.
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});
}
Consulteu els nostres exemples de renderització al servidor per obtenir més informació sobre getTacoTranslateStaticProps
.