Documentació: Millors pràctiques

Millors pràctiques

Catalan

Posa les URL en variables

Quan es tradueixen cadenes que contenen URLs o dades similars, es considera una bona pràctica col·locar aquestes URLs dins de variables i després referenciar-les dins dels vostres plantilles.

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

En traduir el text d’elements interactius com botons, és important incloure etiquetes ARIA per garantir l’accessibilitat. Les etiquetes ARIA ajuden als lectors de pantalla a oferir 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"
/>

Alguna cosa d’això es sent molt meta.

Array d’orígens globals i múltiples orígens de components

Aquest patró només funciona quan s’utilitza el Next.js Pages Router.

Quan es treballa amb aplicacions grans, és beneficiós dividir les cadenes i traduccions en múltiples orígens més petits. Aquest enfocament ajuda a disminuir la grandària dels paquets i els temps de transferència, assegurant una localització eficient i escalable.

Tot i que això és senzill quan es renderitza només al costat del client, la gestió dels orígens esdevé ràpidament complexa quan es recuperen traduccions per al renderitzat del costat del servidor. No obstant això, es pot automatitzar la gestió d’orígens utilitzant l’array origins del client TacoTranslate.

Considereu aquest exemple, on hem separat els nostres components i pàgines en fitxers diferents.

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});
}

Vegeu els nostres exemples de renderització del costat del servidor per obtenir més informació sobre getTacoTranslateStaticProps.

Gestió d'errors i depuració

Millors pràctiques

Utilitza etiquetes ARIA

Array d’orígens globals i múltiples orígens de components