Documentació: Bones pràctiques

Bones pràctiques

Catalan

Emmagatzema les URL en variables

Quan es tradueixen cadenes que contenen URL o dades similars, és una bona pràctica posar aquestes URL en variables i després fer-hi referència dins de les vostres plantilles.

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

Ús d'etiquetes ARIA

Quan tradueixis el text d’elements interactius com 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 d'això que és molt autorreferencial.

Matriu global d'orígens i orígens múltiples de components

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

Quan treballes amb aplicacions més grans, és convenient dividir les cadenes i les traduccions en diversos orígens més petits. Aquest enfocament ajuda a reduir la mida dels bundles i els temps de transferència, assegurant una localització eficient i escalable.

Tot i que això és senzill quan es fa el renderitzat només al costat del client, gestionar els orígens es complica ràpidament quan es recuperen traduccions per al renderitzat al servidor. No obstant això, pots automatitzar la gestió d'orígens utilitzant la matriu origins del client TacoTranslate.

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

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

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

Gestió d'errors i depuració