Dokumentasjon: Beste praksis

Beste praksis

Norwegian (Nynorsk)

Set URL-ar i variablar

Når du omset strengjer som inneheld URL-ar eller liknande data, blir det rekna som god praksis å plassere desse URL-ane inni variable og deretter referere til dei innanfor 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 tilgjenge. ARIA-etikettar hjelper skjermlesarar med å gje skildrande informasjon om kva elementet funksjonerar som.

Dømevis, 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"
/>

Noko ved dette kjennest veldig meta ut.

Global opprinnelsesarray og fleire komponentopprinnelsar

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

Når ein jobbar med større applikasjonar, er det fordelaktig å dele opp strengjer og omsettingar i fleire, mindre opphav. Denne tilnærminga hjelper til med å redusere pakkestorleikar og overføringstider, og sikrar effektiv og skalerbar lokaliserng.

Dette er rett fram når ein berre render på klient-sida, men det å handtere opphav vert raskt komplekst når omsettingar skal hentast for server-side rendering. Likevel kan du automatisere handteringa av opphav ved å bruke TacoTranslate-klienten sin origins array.

Vurder dette dømet, der vi har separert komponentar og sider 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 server-side rendering døme for meir informasjon om getTacoTranslateStaticProps.

Feilhandtering og feilsøking

Beste praksis

Bruk ARIA-etikettar

Global opprinnelsesarray og fleire komponentopprinnelsar