Dokumentasjon: Beste praksis

Beste praksisar

Norwegian (Nynorsk)

Set URL-ar i variablar

Når du omset tekststrengar som inneheld URL-ar eller liknande data, er det god praksis å plassere slike URL-ar i variablar og så referere til dei i malane.

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

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

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

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

Det er noko ved dette som kjennest svært meta.

Globalt array med opprinnelsar og fleire opprinnelsar for komponentar

Dette mønsteret fungerer berre når du brukar Next.js Pages Router.

Når du arbeider med større applikasjonar, er det fordelaktig å dele tekststrengar og omsetjingar opp i fleire, mindre opphav. Denne tilnærminga bidrar til å redusere pakkestorleikar og overføringstider, og sikrar ein effektiv og skalerbar lokalisering.

Dette er greitt når ein berre køyrer på klientsida, men det blir raskt vanskeleg å handtere opphav når ein hentar omsetjingar for server-side rendering. Du kan derimot automatisere handteringa av opphav ved å bruke TacoTranslate-klienten sin origins array.

Sjå dette dømet, der vi har delt komponentane og sidene våre opp i eigne 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 døme på server-side rendering for meir informasjon om getTacoTranslateStaticProps.

Feilhandsaming og feilsøking

Beste praksisar

Bruk ARIA-etikettar

Globalt array med opprinnelsar og fleire opprinnelsar for komponentar