Лучшие практики
Помещайте 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.
Рассмотрите этот пример, где мы разделили наши компоненты и страницы на отдельные файлы.
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>
);
}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.