Dokumentasjon: Beste praksis

Beste praksis

Norwegian (Bokmål)

Sett URL-er i variabler

Når du oversetter tekststrenger 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-etiketter for å sikre tilgjengelighet. ARIA-etiketter hjelper skjermlesere med å gi beskrivende informasjon om elementets funksjon.

For eksempel, hvis du har en knapp som lar brukerne 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.

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 hjelper med å redusere pakkestørrelser og overføringstider, og sikrer effektiv og skalerbar lokalisering.

Dette er enkelt når man kun renderer på klientsiden, men håndtering av origins blir raskt komplisert 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 eksempelet, 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

Bruke ARIA-etiketter

Global opprinnelsesarray og flere komponentopprinnelser