Dokumentation: Bästa metoder

Bästa praxis

Swedish

Sätt URL:er i variabler

När du översätter strängar som innehåller URL:er eller liknande data anses det vara en god praxis att placera dessa URL:er 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 för 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 en beskrivande information om elementets funktion.

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

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

Något med detta känns väldigt meta.

Global array för ursprung och flera komponentursprung

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

När man arbetar med större applikationer är det fördelaktigt att dela upp strängar och översättningar i flera mindre origins. Denna metod hjälper till att minska bundle-storlekar och överföringstider, vilket säkerställer effektiv och skalbar lokalisering.

Även om detta är enkelt när man endast renderar på klientsidan blir hanteringen av origins snabbt komplex när översättningar hämtas för server-side rendering. Du kan dock automatisera hanteringen av origins genom att använda TacoTranslate-klientens origins array.

Tänk på detta exempel, där vi har separerat våra komponenter och sidor i olika 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.

Felsökning och felhantering

Bästa praxis

Använd ARIA-etiketter

Global array för ursprung och flera komponentursprung