React-Intl VS React-i18next VS Intlayer | React Интернационализация (i18n)
Ниже представлено краткое сравнение трех популярных библиотек i18n (интернационализации) для React: React-Intl, React-i18next и Intlayer. Каждая из библиотек предлагает уникальные функции и рабочие процессы для интеграции мультиязычной поддержки в ваше React-приложение. После прочтения этого материала вы сможете определить, какое решение лучше всего соответствует вашим потребностям.
1. Введение
Интернационализация (i18n) в React-приложениях может быть достигнута различными способами. Три представленные здесь библиотеки имеют разные философии дизайна, наборы функций и поддержку сообщества:
- React-Intl
- React-i18next
- Intlayer
Ниже вы найдете обзор каждого решения, после чего будет представлен сравнительный анализ функций, плюсов и минусов, а также примеры случаев использования.
2. React-Intl
Обзор
React-Intl является частью набора FormatJS. Она предоставляет мощный набор API и компонентов для обработки форматирования сообщений, множественного числа, форматирования даты/времени и чисел. React-Intl широко используется в корпоративных приложениях, в основном потому, что она является частью экосистемы, которая стандартизирует синтаксис сообщений и форматирование.
Ключевые особенности
- Синтаксис ICU сообщений: Предлагает комплексный синтаксис для интерполяции сообщений, множественного числа и прочего.
- Локализованное форматирование: Встроенные утилиты для форматирования дат, времени, чисел и относительного времени на основе локали.
- Декларативные компоненты: Экспонирует <FormattedMessage>, <FormattedNumber>, <FormattedDate> и др. для бесшовного использования в JSX.
- Богатая экосистема: Хорошо интегрируется с инструментами FormatJS (например, babel-plugin-react-intl) для извлечения, управления и компиляции сообщений.
Типичный рабочий процесс
- Определите каталоги сообщений (обычно JSON-файлы на локаль).
- Оберните ваше приложение в <IntlProvider locale="en" messages={messages}>.
- Используйте <FormattedMessage id="myMessage" defaultMessage="Hello world" /> или хук useIntl() для доступа к строкам перевода.
Плюсы
- Хорошо зарекомендована и используется во многих производственных средах.
- Расширенное форматирование сообщений, включая множественное число, род, часовые пояса и многое другое.
- Сильная поддержка инструментов для извлечения и компиляции сообщений.
Минусы
- Требует знакомства со синтаксисом ICU сообщений, который может быть многословным.
- Не так просто обрабатывать динамические или сложные переводы, которые более чем просто строковые.
3. React-i18next
Обзор
React-i18next – это расширение для React от i18next, одного из самых популярных JavaScript фреймворков для i18n. Он предлагает обширные функции для переводов во время выполнения, ленивой загрузки и определения языка, что делает его чрезвычайно гибким для разнообразных случаев использования.
Ключевые особенности
- Гибкая структура переводов: Не привязан к одному формату, как ICU. Вы можете хранить переводы в JSON, использовать интерполяцию, множественное число и т. д.
- Динамическое переключение языка: Встроенные плагины для определения языка и обновления в режиме реального времени.
- Вложенные и структурированные переводы: Вы можете легко вложить переводы в JSON.
- Обширная экосистема плагинов: Для определения (браузер, путь, подсайт и др.), загрузки ресурсов, кэширования и многого другого.
Типичный рабочий процесс
- Установите i18next и react-i18next.
- Настройте i18n для загрузки переводов (JSON) и настройки определения языка или запасного варианта.
- Оборачивайте ваше приложение в I18nextProvider.
- Используйте хук useTranslation() или компонент <Trans> для отображения переводов.
Плюсы
- Очень гибкий и богатый функциями.
- Очень активное сообщество и большая экосистема плагинов.
- Простота динамической загрузки переводов (например, с сервера, по запросу).
Минусы
- Конфигурация может быть многословной, особенно если у вас есть более сложные потребности.
- Если вы предпочитаете строго типизированные переводы, может потребоваться дополнительная настройка TypeScript.
4. Intlayer
Обзор
Intlayer – это новая, открытая библиотека i18n, сосредоточенная на декларациях контента на уровне компонентов, безопасности типов и динамической маршрутизации. Она предназначена для современных рабочих процессов React, поддерживающих как Create React App, так и Vite. Она также включает в себя усовершенствованные функции, такие как маршрутизация на основе локали и автоматически сгенерированные типы TypeScript для переводов.
Ключевые особенности
- Декларативные файлы контента: Каждый компонент или модуль может объявить свои переводы в выделенных файлах .content.tsx или .content.json, что позволяет держать контент рядом с тем местом, где он используется.
- Встроенная маршрутизация и промежуточное ПО: Дополнительные модули для локализованной маршрутизации (например, /en/about, /fr/about) и серверного промежуточного ПО для определения локали пользователя.
- Автоматически сгенерированные типы TypeScript: Обеспечивают безопасность типов с такими функциями, как автозаполнение и обнаружение ошибок на этапе компиляции.
- Динамические и богатые переводы: Могут включать JSX/TSX в переводы для более сложных случаев использования (например, ссылки, жирный текст, иконки в переводах).
Типичный рабочий процесс
- Установите intlayer и react-intlayer.
- Создайте intlayer.config.ts для определения доступных локалей и локали по умолчанию.
- Используйте CLI Intlayer или плагин для транспиляции деклараций контента.
- Оборачивайте ваше приложение в <IntlayerProvider> и получайте контент с помощью useIntlayer("keyName").
Плюсы
- Дружественный к TypeScript с встроенной генерацией типов и проверкой ошибок.
- Богатый контент возможен (например, передача узлов React в качестве переводов).
- Локализованная маршрутизация из коробки.
- Интегрирован с популярными инструментами сборки (CRA, Vite) для легкой настройки.
Минусы
- Все еще относительно новая по сравнению с React-Intl или React-i18next.
- Более сильный акцент на подходе «декларация контента на уровне компонента» — возможно, это будет сдвигом от типичных каталогов .json.
- Меньшая экосистема и сообщество по сравнению с более устоявшимися библиотеками.
5. Сравнение функций
Особенность | React-Intl | React-i18next | Intlayer |
---|---|---|---|
Основное назначение | Строковые переводы, форматирование даты/чисел, синтаксис ICU | Полнофункциональный i18n с простым динамическим переключением, вложением, экосистемой плагинов | Безопасные по типу переводы с фокусом на декларативном контенте, локализованной маршрутизации и необязательном серверном промежуточном ПО |
Подход | Используйте <IntlProvider> и компоненты форматирования FormatJS | Используйте I18nextProvider и хук useTranslation() | Используйте <IntlayerProvider> и хук useIntlayer() с декларациями контента |
Формат локализации | ICU-строки (каталоги JSON или JavaScript) | JSON-файлы ресурсов (или пользовательские загрузчики). ICU формат не обязателен через плагин i18next | Декларации .content.[ts/js/tsx] или JSON; могут содержать строки или компоненты React |
Маршрутизация | Обрабатывается внешне (нет встроенной локализованной маршрутизации) | Обрабатывается внешне с плагинами i18next (определение пути, поддомен и др.) | Встроенная поддержка локализованной маршрутизации (например, /en/about, /fr/about), плюс необязательное серверное промежуточное ПО (для SSR/Vite) |
Поддержка TypeScript | Хорошая (типы для официальных пакетов) | Хорошая, но требуется дополнительная настройка для строгих проверок переводов | Отличная (автоматически создаваемые определения типов для ключей и переводов содержимого) |
Множественное число и форматирование | Расширенные: встроенное форматирование даты/времени/чисел, поддержка рода/множественного числа | Конфигурируемое множественное число. Форматирование даты/времени обычно выполняется с помощью внешних библиотек или плагина i18next | Может полагаться на стандартный JavaScript Intl или включать логику в контент. Не так специализирован, как FormatJS, но обрабатывает типичные случаи. |
Сообщество и экосистема | Большое, часть экосистемы FormatJS | Очень большая, активная, множество плагинов (определение, кэширование, фреймворки) | Меньшая, но растущая; открытый исходный код, современный подход |
Кривая обучения | Умеренная (изучение синтаксиса ICU сообщений, конвенций FormatJS) | Низкая до умеренной (простое использование, но сложная конфигурация может стать многословной) | Умеренная (концепция деклараций контента и специализированных шагов сборки) |
6. Когда выбирать каждую
React-Intl
- Вам нужна мощная форматировка для дат/времени/чисел и сильный синтаксис ICU сообщений.
- Вы предпочитаете более «стандартизированный» подход к переводам.
- Вам не требуется локализованная маршрутизация или строго типизированные ключи переводов.
React-i18next
- Вам нужно гибкое, устоявшееся решение с динамическим и по запросу загрузкой перевода.
- Вы хотите определение языка на основе плагинов (например, из URL, cookies, локального хранилища) или расширенное кэширование.
- Вам нужна самая большая экосистема с множеством существующих интеграций для различных фреймворков (Next.js, React Native и др.).
Intlayer
- Вы хотите сильную интеграцию TypeScript с автоматически сгенерированными типами, что обеспечивает редкую потерю ключа перевода.
- Вы предпочитаете декларативный контент рядом с компонентом, возможно, включая узлы React или сложную логику в переводах.
- Вам нужна встроенная локализованная маршрутизация или вы хотите легко интегрировать ее в вашу настройку SSR или Vite.
- Вы стремитесь к современному подходу или просто хотите одну библиотеку, которая охватывает как управление контентом (i18n), так и маршрутизацию безопасным по типу способом.
7. Заключение
Каждая библиотека предлагает надежное решение для интернационализации React-приложения:
- React-Intl превосходит в форматировании сообщений и является популярным выбором для корпоративных решений с акцентом на синтаксис ICU сообщений.
- React-i18next предоставляет высоко гибкую, основанную на плагинах среду для сложных или динамических нужд i18n.
- Intlayer предлагает современный, строго типизированный подход, который объединяет декларации контента, усовершенствованную локализованную маршрутизацию и интеграции (CRA, Vite).
Ваш выбор во многом зависит от требований проекта, желаемого опыта разработки (DX) и того, насколько важны типизированные переводы или расширенная маршрутизация. Если вы цените встроенную локализованную маршрутизацию и интеграцию TypeScript, Intlayer может быть наиболее привлекательным вариантом. Если вы хотите протестированное, богатое экосистемой решение, React-i18next будет отличным выбором. Для простых потребностей форматирования на основе ICU React-Intl является надежным вариантом.
Дополнительные материалы
- Документация React-Intl
- Документация React-i18next
- Руководство по началу работы с Intlayer + CRA (из ваших документов)
- Руководство по началу работы с Intlayer + Vite & React (из ваших документов)
Не стесняйтесь комбинировать подходы в соответствии с вашими требованиями — не существует решения «один размер подходит всем», и каждая библиотека продолжает развиваться, чтобы удовлетворять новым случаям использования в экосистеме React.
Если у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.
Ссылка на блог GitHub