Dokumentasjon: Beste praksis

Beste praksis

Norwegian (Bokmål)

Sett URL-er i variabler

Når du oversetter strenger som inneholder URL-er eller lignende data, anses det som en god praksis å plassere disse URL-ene inne i variabler og deretter referere til dem i malene dine.

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

Når du oversetter teksten til interaktive elementer som knapper, er det viktig å inkludere ARIA-labels for å sikre tilgjengelighet. ARIA-labels hjelper skjermlesere med å gi beskrivende informasjon om elementets funksjon.

For eksempel, hvis du har en knapp som lar brukere kopiere tekst fra en kodeblokk, kan du bruke aria-label attributtet for å gi en tydelig beskrivelse:

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

Noe med dette føles veldig meta.

Global opprinnelsesarray og flere komponentopprinnelser

Dette mønsteret fungerer bare når du bruker Next.js Pages Router.

Når man jobber med større applikasjoner, er det fordelaktig å dele opp strenger og oversettelser i flere mindre origins. Denne tilnærmingen bidrar til å redusere bundle-størrelser og overføringstider, og sikrer effektiv og skalerbar lokalisering.

Selv om dette er enkelt når man kun renderer på klientsiden, blir håndtering av origins raskt komplekst når man henter oversettelser for server-side rendering. Du kan imidlertid automatisere håndteringen av origins ved å bruke TacoTranslate-klientens origins array.

Se på dette eksemplet, hvor vi har delt komponenter og sider inn 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 våre eksempler på server-side rendering for mer informasjon om getTacoTranslateStaticProps.

Feilhåndtering og feilsøking

Beste praksis

Bruk ARIA-etiketter

Global opprinnelsesarray og flere komponentopprinnelser