Dokumentasyon: Mga pinakamahusay na kasanayan

Pinakamahuhusay na kasanayan

Filipino (Tagalog)

Ilagay ang mga URL sa mga variable

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

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

Gamitin ang mga label na ARIA

Kapag isinasalin ang teksto ng mga interactive na elemento tulad ng mga button, mahalagang isama ang mga ARIA label upang matiyak ang accessibility. Tinutulungan ng mga ARIA label ang mga screen reader na magbigay ng malinaw na paglalarawan tungkol sa tungkulin ng elemento.

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

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

Mayroong isang bagay tungkol dito na pakiramdam ay napaka-meta.

Pandaigdigang array ng mga pinagmulan at maraming pinagmulan ng bahagi

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

Kapag nagtatrabaho sa mas malalaking aplikasyon, mainam na hatiin ang mga string at pagsasalin sa maraming mas maliliit na origin. Ang pamamaraang ito ay nakakatulong upang mabawasan ang sukat ng bundle at ang oras ng paglipat, na nagsisiguro ng epektibo at scalable na lokalisisayon.

Bagaman tuwiran ito kapag nagre-render lamang sa client side, mabilis nagiging kumplikado ang pamamahala ng mga origin kapag kumukuha ng mga pagsasalin para sa server-side rendering. Gayunpaman, maaari mong i-automate ang pamamahala ng origin gamit ang TacoTranslate client origins array.

Isaalang-alang ang halimbawa na ito, kung saan inihiwalay namin ang aming mga component at 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.

Pag-handle ng error at pag-debug