Documentazione: Buone pratiche

Buone pratiche

Italian

Metti gli URL nelle variabili

Quando si traducono stringhe che contengono URL o dati simili, è considerata una buona pratica inserire questi URL in variabili e poi farvi riferimento nei tuoi template.

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

Quando si traducono i testi di elementi interattivi come i pulsanti, è importante includere etichette ARIA per garantire l'accessibilità. Le etichette ARIA aiutano i lettori di schermo a fornire informazioni descrittive sulla funzione dell'elemento.

Ad esempio, se hai un pulsante che consente agli utenti di copiare il testo da un blocco di codice, puoi usare l'attributo aria-label per fornire una descrizione chiara:

<Translate
	aria-label={useTranslation('Copy to clipboard')}
	string="Copy"
/>

C'è qualcosa di molto meta in tutto questo.

Array globale delle origini e origini multiple dei componenti

Questo pattern funziona solo quando si utilizza Next.js Pages Router.

Quando si lavora con applicazioni di grandi dimensioni, è utile suddividere le stringhe e le traduzioni in più origini più piccole. Questo approccio aiuta a ridurre la dimensione dei bundle e i tempi di trasferimento, garantendo una localizzazione efficiente e scalabile.

Sebbene ciò sia semplice quando il rendering avviene solo sul lato client, la gestione delle origini diventa rapidamente complessa quando si recuperano le traduzioni per il rendering lato server. Tuttavia, puoi automatizzare la gestione delle origini utilizzando l'array origins del client TacoTranslate.

Considera questo esempio, in cui abbiamo separato i componenti e le pagine in file distinti.

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

Consulta i nostri esempi di rendering lato server per ulteriori informazioni su getTacoTranslateStaticProps.

Gestione degli errori e debugging

Buone pratiche

Usa le etichette ARIA

Array globale delle origini e origini multiple dei componenti