Dokumentasjon: Beste praksis

Beste praksisar

Norwegian (Nynorsk)

Legg URL-ar i variablar

Når du omset tekststrengar som inneheld URL-ar eller liknande data, er det god praksis å leggje desse URL-ane i variablar og så 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 å ta med ARIA-etikettar for å sikre tilgjengelegheit. ARIA-etikettar hjelper skjermlesarar med å gje beskrivande informasjon om funksjonen til elementet.

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 beskriving:

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

Noko ved dette kjennest veldig meta.

Globalt array med originar og fleire originar per komponent

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

Når du jobbar med større applikasjonar, er det nyttig å dele opp strengar og omsetjingar i fleire, mindre opprinnelsar. Dette bidrar til å redusere bundlestørrelsar og overføringstider, og sikrar effektiv og skalerbar lokalisering.

Dette er greitt når du berre renderar på klientsida, men å administrere opprinnelsar blir raskt komplekst når du hentar omsetjingar for rendering på serversida. Du kan derimot automatisere administreringa av opprinnelsar ved å nytte TacoTranslate-klienten origins array.

Sjå dette dømet, der vi har skilt komponentane og sidene våre 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 originar og fleire originar per komponent