Dokumentáció: Legjobb gyakorlatok

Legjobb gyakorlatok

Hungarian

URL-címek elhelyezése változókban

Amikor URL-eket vagy hasonló adatokat tartalmazó sztringeket fordítunk, jó gyakorlat az URL-eket változókba helyezni, majd a sablonokban rájuk hivatkozni.

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

ARIA-címkék használata

Interaktív elemek, például gombok szövegének fordításakor fontos ARIA-címkéket megadni az akadálymentesség biztosítása érdekében. Az ARIA-címkék segítik a képernyőolvasókat abban, hogy leíró információt adjanak az elem funkciójáról.

Például, ha van egy gomb, amely lehetővé teszi a felhasználók számára, hogy egy kódrészletből szöveget másoljanak, a aria-label attribútumot használhatod egy egyértelmű leírás megadásához:

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

Valami ebben valahogy nagyon meta.

Globális origins-tömb és több komponens originjei

Ez a minta csak a Next.js Pages Router használatakor működik.

Nagyobb alkalmazások esetén érdemes a szövegeket és fordításokat több, kisebb originokra bontani. Ez a megközelítés csökkenti a csomagméretet és az átvitel idejét, így hatékonyabb és skálázhatóbb lokalizációt biztosít.

Bár ez egyszerű, ha csak kliensoldalon renderelünk, az originok kezelése gyorsan bonyolulttá válik, amikor fordításokat töltünk le szerveroldali rendereléshez. Azonban automatizálhatod az originok kezelését a TacoTranslate kliens origins tömbjének használatával.

Nézzünk egy példát, ahol a komponenseket és az oldalakat külön fájlokba helyeztük.

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

Tekintse meg a szerveroldali renderelés példáit, hogy többet megtudjon a getTacoTranslateStaticProps-ról.

Hibakezelés és hibakeresés