Documentazione: Buone pratiche

Buone pratiche

Italian

Inserisci gli URL nelle variabili

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

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

Usare le etichette ARIA

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 permette 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 di origini e origini multiple per componente

Questo approccio 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 di dimensioni ridotte. Questo approccio aiuta a ridurre le dimensioni dei bundle e i tempi di trasferimento, garantendo una localizzazione efficiente e scalabile.

Sebbene ciò sia semplice quando si effettua il rendering solo 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 nostri componenti e le nostre 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 maggiori informazioni su getTacoTranslateStaticProps.

Gestione degli errori e debug