Dokimantasyon: Bon pratik

Pi bon pratik

Haitian Creole

Mete URL yo nan varyab

Lè w ap tradui chenn tèks ki gen URL oswa lòt done ki sanble, li konsidere kòm yon bon pratik pou mete URL sa yo nan varyab epi refere yo nan modèl ou yo.

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

Lè w ap tradwi tèks eleman entèaktif tankou bouton yo, li enpòtan pou enkli etikèt ARIA pou asire aksèbilite. Etikèt ARIA ede lektè ekran bay enfòmasyon deskriptif sou fonksyon eleman an.

Pou egzanp, si ou gen yon bouton ki pèmèt itilizatè yo kopye tèks ki soti nan yon blòk kòd, ou ka itilize aria-label kòm atribit pou bay yon deskripsyon klè:

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

Gen yon bagay nan sa a ki santi l vrèman meta.

Tablo orijin global ak plizyè orijin konpozan

Modèl sa a sèlman mache lè w ap itilize Next.js Pages Router.

Lè w ap travay sou aplikasyon ki pi gwo, li benefik pou separe chenn tèks ak tradiksyon yo an plizyè orijin ki pi piti. Apwòch sa a ede diminye gwosè pake yo ak tan transfè yo, asire yon lokalizasyon ki efikas epi ki kapab elaji.

Pandan sa senp lè w ap rann sèlman sou bò kliyan an, jere orijin yo vin rapidman konplike lè w ap rekipere tradiksyon pou rann sou bò sèvè a. Sepandan, ou ka otomatikman jere orijin yo lè w itilize tab origins nan kliyan TacoTranslate la.

Konsidere egzanp sa a, kote nou separe konpozan nou yo ak paj yo nan fichye apa.

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});
}

Gade egzanp rann sou sèvè nou yo pou plis enfòmasyon sou getTacoTranslateStaticProps.

Jesyon erè ak debogaj

Pi bon pratik

Sèvi ak etikèt ARIA

Tablo orijin global ak plizyè orijin konpozan