Документация: Най-добри практики

Най-добри практики

Bulgarian

Поставете URL адресите в променливи

Когато превеждате низове, съдържащи URL адреси или подобни данни, се счита за добра практика да поставите тези URL адреси в променливи и след това да ги използвате в шаблоните си.

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

Използване на ARIA етикети

Когато превеждате текста на интерактивни елементи като бутони, е важно да включите ARIA етикети, за да гарантирате достъпност. ARIA етикетите помагат на екранните четци да предоставят описателна информация за функцията на елемента.

Например, ако имате бутон, който позволява на потребителите да копират текст от блок с код, можете да използвате aria-label атрибут, за да предоставите ясно описание:

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

Има нещо много „мета“ в това.

Глобален масив с произходи и множество произходи за компоненти

Този модел работи само при използване на Next.js Pages Router.

При работа с по-големи приложения е полезно да разделяте низовете и преводите на няколко по-малки източника. Този подход помага да се намалят размерите на пакетите и времето за прехвърляне, като осигурява ефективна и мащабируема локализация.

Въпреки че това е просто, когато рендирането се извършва само на клиентската страна, управлението на източниците бързо става сложно при извличане на преводи за сървърно рендиране. Можете обаче да автоматизирате управлението на източниците, като използвате масива origins на клиента TacoTranslate.

Разгледайте този пример, в който сме разделили нашите компоненти и страници в отделни файлове.

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

Вижте нашите примери за сървърно рендиране за повече информация относно getTacoTranslateStaticProps.

Обработка на грешки и отстраняване на неизправности