Dokumentace: Osvědčené postupy

Doporučené postupy

Czech

Ukládejte adresy URL do proměnných

Při překladu řetězců, které obsahují URL nebo podobná data, je považováno za dobrou praxi umístit tyto URL do proměnných a poté na ně odkazovat ve svých šablonách.

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

Použijte ARIA popisky

Při překladu textu interaktivních prvků, jako jsou tlačítka, je důležité zahrnout ARIA popisky, aby byla zajištěna přístupnost. ARIA popisky pomáhají čtečkám obrazovky poskytovat popisné informace o funkci prvku.

Napríklad pokud máte tlačítko, které uživatelům umožňuje kopírovat text z bloku kódu, můžete pro poskytnutí jasného popisu použít atribut aria-label:

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

Něco na tom působí velmi meta.

Globální pole původů a více původů komponent

Tento vzor funguje pouze při použití Next.js Pages Router.

Při práci na větších aplikacích je výhodné rozdělit řetězce a překlady do více, menších originů. Tento přístup pomáhá snížit velikost bundlů a dobu přenosu, což zajišťuje efektivní a škálovatelnou lokalizaci.

Zatímco to funguje bez problémů při renderování pouze na klientovi, správa originů se při získávání překladů pro renderování na straně serveru rychle stává komplikovanou. Můžete však automatizovat správu originů využitím pole klienta TacoTranslate origins.

Zvažte tento příklad, kde jsme rozdělili naše komponenty a stránky do samostatných souborů.

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

Podívejte se na naše příklady renderování na straně serveru pro více informací o getTacoTranslateStaticProps.

Zpracování chyb a ladění