Лучшие практики
Поместите 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 массив.
Рассмотрим этот пример, где мы разделили наши компоненты и страницы на отдельные файлы.
export const defaultOrigin = process.env.TACOTRANSLATE_ORIGIN;
const origins = [];
export default origins;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>
);
}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.