Dokumentacioni: Praktikat më të mira

Praktikat më të mira

Albanian

Vendos URL-të në variabla

Kur përktheni vargje që përmbajnë URL ose të dhëna të ngjashme, konsiderohet praktikë e mirë që këto URL t'i vendosni brenda variablave dhe më pas t'i referoheni atyre brenda template-ve tuaja.

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

Kur përktheni tekstin e elementeve interaktive si butonat, është e rëndësishme të përfshini etiketat ARIA për të siguruar aksesueshmërinë. Etiketat ARIA ndihmojnë lexuesit me ekran të japin informacione përshkruese rreth funksionit të elementit.

Për shembull, nëse keni një buton që lejon përdoruesit të kopjojnë tekst nga një bllok kodi, mund të përdorni atributin aria-label për të dhënë një përshkrim të qartë:

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

Diçka në lidhje me këtë ndjehet shumë meta.

Array i origjinave globale dhe origjina të shumta komponentësh

Ky model funksionon vetëm kur përdorni Next.js Pages Router.

Kur punoni me aplikacione më të mëdha, është e dobishme të ndani stringjet dhe përkthimet në shumë burime më të vogla. Ky qasje ndihmon në zvogëlimin e madhësive të pakojeve dhe kohëve të transferimit, duke siguruar lokalizim efikas dhe të shkallëzueshëm.

Ndërsa kjo është e thjeshtë kur e renderoni vetëm në anën e klientit, menaxhimi i burimeve bëhet shpejt kompleks kur merrni përkthime për renderim në anën e serverit. Megjithatë, mund të automatizoni menaxhimin e burimeve duke përdorur vargun origins të klientit TacoTranslate.

Shikoni këtë shembull, ku kemi ndarë komponentët dhe faqet tona në skedarë të ndarë.

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

Shiko shembujt tanë të renderimit në anën e serverit për më shumë informacion rreth getTacoTranslateStaticProps.

Trajtimi i gabimeve dhe debugimi

Praktikat më të mira

Përdorni etiketat ARIA

Array i origjinave globale dhe origjina të shumta komponentësh