Documentation : Meilleures pratiques

Meilleures pratiques

French (Canada)

Mettez les URL dans des variables

When translating strings that contain URLs or similar data, it is considered a good practice to place these URLs inside variables and then referencing them within your templates.

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

Utilisez des labels ARIA

When translating the text of interactive elements like buttons, it’s important to include ARIA labels to ensure accessibility. ARIA labels help screen readers provide descriptive information about the element’s function.

For instance, if you have a button that lets users copy text from a code block, you can use the aria-label attribute to provide a clear description:

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

Something about this feels very meta.

Tableau d’origines globales et origines multiples de composants

This pattern only works when using the Next.js Pages Router.

Lorsqu'on travaille avec des applications plus volumineuses, il est bénéfique de diviser les chaînes et les traductions en plusieurs origines plus petites. Cette approche aide à réduire la taille des bundles et les temps de transfert, assurant une localisation efficace et évolutive.

Bien que cela soit simple lors du rendu uniquement 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 un tableau global origins.

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

utilities/tacotranslate-origins.ts

export const defaultOrigin = process.env.TACOTRANSLATE_ORIGIN;
const origins = [];

export default origins;

components/pricing-table.tsx

import TacoTranslate, {Translate} from 'tacotranslate/react';
import origins from '../utilities/tacotranslate-origins';

// Set an origin name for this component
const origin = 'components/pricing-table';

// Push the origin into the origins array as this file is imported
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 origins from '../utilities/tacotranslate-origins';
import PricingTable from '../components/pricing-table';

const origin = 'pages/pricing';

export default function PricingPage() {
	return (
		<TacoTranslate origin={origin}>
			<Translate string="Pricing page" />
			<PricingTable />
		</TacoTranslate>
	);
}

// We can now fetch translations for all imported components and their origins automatically
export async function getStaticProps(context) {
	return customGetStaticProps(context, [...origins, origin]);
}

Voir nos exemples de rendu côté serveur pour plus d'informations sur customGetStaticProps.

Gestion des erreurs et débogage