Documentatie: Beste praktijken

Beste werkwijzen

Dutch

Plaats URL's in variabelen

Wanneer u tekenreeksen vertaalt die URL's of soortgelijke gegevens bevatten, is het aan te raden deze URL's in variabelen te plaatsen en ze vervolgens in uw templates te gebruiken.

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

Wanneer u de tekst van interactieve elementen zoals knoppen vertaalt, is het belangrijk om ARIA-labels toe te voegen om de toegankelijkheid te waarborgen. ARIA-labels helpen schermlezers om beschrijvende informatie te geven over de functie van het element.

Bijvoorbeeld, als u een knop heeft waarmee gebruikers tekst uit een codeblok kunnen kopiëren, kunt u het aria-label attribuut gebruiken om een duidelijke beschrijving te geven:

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

Dit voelt ergens erg meta.

Globale origins-array en meerdere component-origins

Dit patroon werkt alleen wanneer je de Next.js Pages Router gebruikt.

Bij het werken met grotere applicaties is het verstandig om strings en vertalingen op te splitsen in meerdere, kleinere oorsprongen. Deze aanpak helpt bundelgroottes en overdrachtstijden te verkleinen, waardoor lokalisatie efficiënt en schaalbaar blijft.

Hoewel dit eenvoudig is wanneer er alleen aan de clientzijde wordt gerenderd, wordt het beheren van oorsprongen snel complex wanneer vertalingen worden opgehaald voor server-side rendering. Je kunt het beheer van oorsprongen echter automatiseren door de TacoTranslate-client origins array te gebruiken.

Bekijk dit voorbeeld, waarin we onze componenten en pagina's in aparte bestanden hebben gesplitst.

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

Bekijk onze voorbeelden van server-side rendering voor meer informatie over getTacoTranslateStaticProps.

Foutafhandeling en foutopsporing

Beste werkwijzen

Gebruik ARIA-labels

Globale origins-array en meerdere component-origins