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, er det 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 origins-array og flere komponent-opprinnelser

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 opp strenger og oversettelser i flere, mindre opprinnelser. Denne tilnærmingen bidrar til å redusere bundle-størrelser og overføringstider, og sikrer effektiv og skalerbar lokalisering.

Mens dette er enkelt når man bare renderer på klienten, blir det raskt komplekst å administrere opprinnelser når man henter oversettelser for server-side rendering. Du kan imidlertid automatisere håndteringen av opprinnelser ved å bruke TacoTranslate-klientens origins array.

Se på dette eksempelet, hvor vi har lagt 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 origins-array og flere komponent-opprinnelser