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 opp strenger og oversettelser i flere, mindre originer. 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 det raskt komplisert å administrere originer når man henter oversettelser for server-side rendering. Du kan imidlertid automatisere håndteringen av originer ved å bruke TacoTranslate-klientens origins array.

Se på dette eksemplet, hvor vi har delt 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