Dokumentasjon: Beste praksis

Beste praksis

Norwegian (Nynorsk)

Set inn URL-ar i variablar

Når du omset strengjer som inneheld URL-ar eller liknande data, er det rekna som god praksis å plassere desse URL-ane inni variablar og deretter referere til dei i malane dine.

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

Når du omset teksten til interaktive element som knappar, er det viktig å inkludere ARIA-etikettar for å sikre tilgjengelegheit. ARIA-etikettar hjelper skjermlesarar med å gi beskrivande informasjon om funksjonen til elementet.

Til dømes, om du har ein knapp som lar brukarane kopiere tekst frå ein kodeblokk, kan du bruke aria-label attributtet for å gje ei tydeleg skildring:

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

Nokon ting med dette kjennest veldig meta.

Global opprinnelsesarray og fleire komponentopprinnelsar

Denne malen fungerer berre når du bruker Next.js Pages Router.

Når du jobbar med større applikasjonar, er det fordelaktig å dele opp strengar og omsettingar i fleire, mindre originar. Denne tilnærminga hjelper med å redusere pakkestorleik og overføringstider, og sikrar ein effektiv og skalerbar lokalisering.

Sjølv om dette er enkelt når ein berre renderar på klientsida, blir det raskt komplisert å handtere originar når ein hentar omsettingar for server-side rendering. Du kan likevel automatisere handteringa av originar ved å nytte TacoTranslate-klienten sin origins array.

Ta til dømes dette eksempelet, der vi har skilt komponentane 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});
}

Sjå våre eksempel på server-side rendering for meir informasjon om getTacoTranslateStaticProps.

Feilhåndtering og feilsøking

Beste praksis

Bruk ARIA-etikettar

Global opprinnelsesarray og fleire komponentopprinnelsar