Dokumentasjon: beste praksis

Beste praksis

Norwegian (Bokmål)

Legg URL-er i variabler

Når du oversetter strenger som inneholder URL-er eller lignende data, anses det som god praksis å plassere disse URL-ene 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-etiketter for å sikre tilgjengelighet. ARIA-etiketter 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 ved dette føles veldig meta.

Globalt array med opprinnelser og flere opprinnelser per komponent

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

Når du jobber med større applikasjoner, er det fordelaktig å dele strenger og oversettelser inn 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 rendering kun skjer på klientsiden, blir håndteringen av origins raskt mer kompleks når man henter oversettelser for server-side rendering. Du kan imidlertid automatisere håndteringen av origins ved å bruke TacoTranslate-klientens origins array.

Se dette eksempelet, hvor vi har delt opp komponentene og sidene våre 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

Globalt array med opprinnelser og flere opprinnelser per komponent