Dokumentation: Bästa praxis

Bästa praxis

Swedish

Lägg webbadresser i variabler

När du översätter strängar som innehåller webbadresser eller liknande data är det god praxis att lägga dessa webbadresser i variabler och sedan referera till dem i dina mallar.

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

När du översätter texten i interaktiva element som knappar är det viktigt att inkludera ARIA-etiketter för att säkerställa tillgänglighet. ARIA-etiketter hjälper skärmläsare att ge beskrivande information om elementets funktion.

Till exempel, om du har en knapp som låter användare kopiera text från ett kodblock, kan du använda attributet aria-label för att ge en tydlig beskrivning:

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

Något med det här känns väldigt meta.

Global origins-array och flera komponentoriginer

Detta mönster fungerar bara när du använder Next.js Pages Router.

När du arbetar med större applikationer är det fördelaktigt att dela upp strängar och översättningar i flera, mindre källor. Detta tillvägagångssätt hjälper till att minska paketstorlekar och överföringstider, vilket säkerställer effektiv och skalbar lokalisering.

Medan detta är enkelt när man renderar enbart på klientsidan blir det snabbt komplicerat att hantera källor när man hämtar översättningar för serversidig renderering. Du kan dock automatisera hanteringen av källor genom att använda TacoTranslate-klientens origins array.

Se detta exempel, där vi har delat upp våra komponenter och sidor i separata 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});
}

Se våra exempel på server-side rendering för mer information om getTacoTranslateStaticProps.

Felhantering och felsökning

Bästa praxis

Använd ARIA-etiketter

Global origins-array och flera komponentoriginer