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, betragtes det som en god praksis at placere disse URL'er inden i variable og derefter referere til dem i dine skabeloner.

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

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

For eksempel, hvis du har en knap, der giver brugerne mulighed for at kopiere tekst fra en kodeblok, kan du bruge aria-label attributten til at give en klar beskrivelse:

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

Noget ved dette føles meget meta.

Global origins-array og flere komponentoriginer

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

Når man arbejder med større applikationer, er det gavnligt at opdele strenge og oversættelser i flere, mindre origins. Denne tilgang hjælper med at reducere bundlestørrelser og overførselstider, hvilket sikrer effektiv og skalerbar lokalisering.

Selvom dette er enkelt, når man kun renderer på klientsiden, bliver styring af origins hurtigt komplekst, når man henter oversættelser til server-side rendering. Dog kan du automatisere styringen af origins ved at bruge TacoTranslate klientens origins array.

Se på dette eksempel, hvor vi har opdelt 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 mere information om getTacoTranslateStaticProps.

Fejlhåndtering og fejlfinding

Bedste praksis

Brug ARIA-labels

Global origins-array og flere komponentoriginer