Documentatie: Beste praktijken

Beste praktijken

Dutch

Plaats URL's in variabelen

Bij het vertalen van tekststrings die URL's of soortgelijke gegevens bevatten, wordt het als een goede praktijk beschouwd om deze URL's in variabelen te plaatsen en deze vervolgens in je templates te refereren.

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

Gebruik ARIA-labels

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

Als voorbeeld, als je een knop hebt waarmee gebruikers tekst uit een codeblok kunnen kopiëren, kun je het aria-label attribuut gebruiken om een duidelijke beschrijving te geven:

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

Er is iets aan dit dat heel meta aanvoelt.

Globale origins-array en meerdere component origins

Dit patroon werkt alleen bij gebruik van de Next.js Pages Router.

Bij het werken met grotere applicaties is het voordelig om strings en vertalingen op te splitsen in meerdere, kleinere origins. Deze aanpak helpt om bundelgroottes en overdrachtstijden te verkleinen, wat zorgt voor efficiënte en schaalbare lokalisatie.

Hoewel dit eenvoudig is bij het renderen uitsluitend aan de clientzijde, wordt het beheren van origins snel complex bij het ophalen van vertalingen voor server-side rendering. U kunt het beheer van origins echter automatiseren door gebruik te maken van de TacoTranslate client origins array.

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

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 debugging