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, vert det rekna som ein god praksis å plassere desse URL-ane inne i variablar 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 tekst for interaktive element som knappane, er det viktig å inkludere ARIA-lappar for å sikre tilgjengelegheit. ARIA-lappar hjelper skjermlesarar med å gi beskrivande informasjon om elementets 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"
/>

Noko med dette kjennest veldig meta ut.

Globalt opphavsarray og fleire komponentopphav

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

Når du jobbar med større applikasjonar, er det gagnleg å dele strengjer og omsettingar opp i fleire, mindre originar. Denne tilnærminga bidreg til å redusere pakkestørrelsar og overføringstider, og sikrar effektiv og skalerbar lokalisering.

Dette er enkelt når du berre renderar på klientsida, men å handtere originar blir raskt komplekst når du hentar omsettingar for server-side rendering. Likevel kan du automatisere handtering av originar ved å nytte TacoTranslate-klientens origins array.

Ta dette dømet, der vi har delt komponentar 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});
}

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

Feilhandsaming og feilsøking

Beste praksis

Bruk ARIA-etikettar

Globalt opphavsarray og fleire komponentopphav