Dokumentace: osvědčené postupy

Doporučené postupy

Czech

Ukládejte adresy URL do proměnných

Při překladu řetězců obsahujících URL nebo podobná data je dobrou praxí umístit tyto URL do proměnných a pak na ně v šablonách odkazovat.

<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 popisky ARIA, aby byla zajištěna přístupnost. Popisky ARIA pomáhají čtečkám obrazovky poskytovat popisné informace o funkci prvku.

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

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

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

Globální pole origins a vícenásobné originy komponent

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

Při práci s většími aplikacemi je výhodné rozdělit řetězce a překlady do více menších originů. Tento přístup pomáhá zmenšit velikost balíčků a doby přenosu, čímž zajišťuje efektivní a škálovatelnou lokalizaci.

Zatímco to je jednoduché při vykreslování pouze na straně klienta, správa originů se při získávání překladů pro serverové vykreslování rychle stává složitou. Můžete však automatizovat správu originů pomocí pole origins klienta TacoTranslate.

Podívejte se na tento příklad, kde jsme naše komponenty a stránky rozdělili 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 příklady vykreslování na straně serveru pro více informací o getTacoTranslateStaticProps.

Zpracování chyb a ladění