Documentation : Bonnes pratiques

Bonnes pratiques

French (Canada)

Mettre les URL dans des variables

Lorsque vous traduisez des chaînes contenant des URL ou des données similaires, il est recommandé de placer ces URL dans des variables, puis de les référencer dans vos modèles.

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

Utiliser les attributs ARIA

Lorsque vous traduisez le texte d'éléments interactifs comme des boutons, il est important d'inclure des libellés ARIA pour garantir l'accessibilité. Les libellés ARIA aident les lecteurs d'écran à fournir des informations descriptives sur la fonction de l'élément.

Par exemple, si vous avez un bouton qui permet aux utilisateurs de copier le texte d'un bloc de code, vous pouvez utiliser l'attribut aria-label pour fournir une description claire :

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

Il y a quelque chose de très méta à ce sujet.

Tableau d'origines globales et origines multiples pour les composants

Ce modèle ne fonctionne que lorsqu'on utilise le Next.js Pages Router.

Lorsque vous travaillez sur des applications plus volumineuses, il est avantageux de répartir les chaînes et les traductions en plusieurs origines plus petites. Cette approche permet de réduire la taille des bundles et les temps de transfert, garantissant une localisation efficace et évolutive.

Bien que cela soit simple lorsqu'on effectue uniquement le rendu côté client, la gestion des origines devient rapidement complexe lors de la récupération des traductions pour le rendu côté serveur. Cependant, vous pouvez automatiser la gestion des origines en utilisant le tableau du client TacoTranslate origins.

Considérez cet exemple, où nous avons séparé nos composants et nos pages en fichiers distincts.

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

Consultez nos exemples de rendu côté serveur pour en savoir plus sur getTacoTranslateStaticProps.

Gestion des erreurs et débogage