Dokumentasyon: Mga pinakamahusay na kasanayan

Mga pinakamahusay na kasanayan

Filipino (Tagalog)

Ilagay ang mga URL sa mga variable

Kapag isinasalin ang mga string na naglalaman ng mga URL o katulad na datos, itinuturing na magandang kasanayan na ilagay ang mga URL na ito sa mga variable at pagkatapos ay i-referensya ang mga ito sa loob ng iyong mga template.

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

Gumamit ng mga ARIA label

Kapag isinasalin ang teksto ng mga interaktibong elemento tulad ng mga pindutan, mahalagang isama ang mga label ng ARIA upang matiyak ang accessibility. Tinutulungan ng mga label ng ARIA ang mga screen reader na magbigay ng paglalarawang impormasyon tungkol sa gawain ng elemento.

Halimbawa, kung mayroon kang pindutan na nagpapahintulot sa mga gumagamit na kopyahin ang teksto mula sa isang code block, maaari mong gamitin ang aria-label attribute upang magbigay ng malinaw na paglalarawan:

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

May isang bagay dito na parang napaka-meta.

Global na array ng mga pinagmulan at maramihang pinagmulan ng mga komponent

Ang paraang ito ay gumagana lamang kapag ginagamit ang Next.js Pages Router.

Kapag nagtatrabaho sa mas malalaking aplikasyon, makabubuting hatiin ang mga string at mga pagsasalin sa maraming mas maliliit na pinagmulan. Ang pamamaraang ito ay nakakatulong na paliitin ang laki ng mga bundle at ang oras ng paglilipat, na tinitiyak ang epektibo at nasuskalang lokalisasyon.

Bagaman diretso lang ito kapag nagre-render lamang sa client side, mabilis na nagiging kumplikado ang pamamahala ng mga pinagmulan kapag kinukuha ang mga pagsasalin para sa server-side rendering. Gayunpaman, maaari mong i-automate ang pamamahala ng mga pinagmulan sa pamamagitan ng paggamit ng TacoTranslate client origins array.

Isaalang-alang ang halimbawang ito, kung saan pinaghiwalay namin ang aming mga component at mga pahina sa magkakahiwalay na mga file.

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

Tingnan ang aming mga halimbawa ng server-side rendering para sa karagdagang impormasyon tungkol sa getTacoTranslateStaticProps.

Paghawak ng mga error at pag-debug