Документация: Лучшие практики

Лучшие практики

Russian

Поместите 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.

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

utilities/tacotranslate-origins.ts

export const defaultOrigin = process.env.TACOTRANSLATE_ORIGIN;
const origins = [];

export default origins;

components/pricing-table.tsx

import TacoTranslate, {Translate} from 'tacotranslate/react';
import origins from '../utilities/tacotranslate-origins';

// Set an origin name for this component
const origin = 'components/pricing-table';

// Push the origin into the origins array as this file is imported
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 origins from '../utilities/tacotranslate-origins';
import PricingTable from '../components/pricing-table';

const origin = 'pages/pricing';

export default function PricingPage() {
	return (
		<TacoTranslate origin={origin}>
			<Translate string="Pricing page" />
			<PricingTable />
		</TacoTranslate>
	);
}

// We can now fetch translations for all imported components and their origins automatically
export async function getStaticProps(context) {
	return customGetStaticProps(context, [...origins, origin]);
}

См. наши примеры серверного рендеринга для получения дополнительной информации о customGetStaticProps.

Обработка ошибок и отладка