Dokumentation: Bedste praksis

Bedste praksis

Danish

Sæt URL'er i variabler

Når du oversætter strenge, der indeholder URL'er eller lignende data, anses det for god praksis at placere disse URL'er i variabler og derefter henvise til dem i dine skabeloner.

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

Når du oversætter teksten på interaktive elementer som knapper, er det vigtigt at inkludere ARIA-etiketter for at sikre tilgængelighed. ARIA-etiketter hjælper skærmlæsere med at give beskrivende information om elementets funktion.

For eksempel, hvis du har en knap, der lader brugere kopiere tekst fra en kodeblok, kan du bruge attributten aria-label til at angive en klar beskrivelse:

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

Noget ved dette føles meget meta.

Globalt array af oprindelser og flere komponent-oprindelser

Dette mønster fungerer kun, når man bruger Next.js Pages Router.

Når du arbejder med større applikationer, er det en fordel at opdele tekststrenge og oversættelser i flere, mindre origins. Denne tilgang hjælper med at mindske bundle-størrelser og overførselstider og sikrer effektiv og skalerbar lokalisering.

Det er ligetil, når der kun renderes på klientsiden, men håndteringen af origins bliver hurtigt kompleks, når oversættelser hentes til server-side rendering. Du kan dog automatisere håndteringen af origins ved at bruge TacoTranslate-klientens origins array.

Se dette eksempel, hvor vi har delt vores komponenter og sider i separate filer.

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

Se vores eksempler på server-side rendering for flere oplysninger om getTacoTranslateStaticProps.

Fejlhåndtering og fejlsøgning

Bedste praksis

Brug ARIA-etiketter

Globalt array af oprindelser og flere komponent-oprindelser