React-Intl VS React-i18next VS Intlayer | React Интернационализация (i18n)

    Ниже представлено краткое сравнение трех популярных библиотек i18n (интернационализации) для React: React-Intl, React-i18next и Intlayer. Каждая из библиотек предлагает уникальные функции и рабочие процессы для интеграции мультиязычной поддержки в ваше React-приложение. После прочтения этого материала вы сможете определить, какое решение лучше всего соответствует вашим потребностям.


    1. Введение

    Интернационализация (i18n) в React-приложениях может быть достигнута различными способами. Три представленные здесь библиотеки имеют разные философии дизайна, наборы функций и поддержку сообщества:

    1. React-Intl
    2. React-i18next
    3. Intlayer

    Ниже вы найдете обзор каждого решения, после чего будет представлен сравнительный анализ функций, плюсов и минусов, а также примеры случаев использования.


    2. React-Intl

    Обзор

    React-Intl является частью набора FormatJS. Она предоставляет мощный набор API и компонентов для обработки форматирования сообщений, множественного числа, форматирования даты/времени и чисел. React-Intl широко используется в корпоративных приложениях, в основном потому, что она является частью экосистемы, которая стандартизирует синтаксис сообщений и форматирование.

    Ключевые особенности

    • Синтаксис ICU сообщений: Предлагает комплексный синтаксис для интерполяции сообщений, множественного числа и прочего.
    • Локализованное форматирование: Встроенные утилиты для форматирования дат, времени, чисел и относительного времени на основе локали.
    • Декларативные компоненты: Экспонирует <FormattedMessage>, <FormattedNumber>, <FormattedDate> и др. для бесшовного использования в JSX.
    • Богатая экосистема: Хорошо интегрируется с инструментами FormatJS (например, babel-plugin-react-intl) для извлечения, управления и компиляции сообщений.

    Типичный рабочий процесс

    1. Определите каталоги сообщений (обычно JSON-файлы на локаль).
    2. Оберните ваше приложение в <IntlProvider locale="en" messages={messages}>.
    3. Используйте <FormattedMessage id="myMessage" defaultMessage="Hello world" /> или хук useIntl() для доступа к строкам перевода.

    Плюсы

    • Хорошо зарекомендована и используется во многих производственных средах.
    • Расширенное форматирование сообщений, включая множественное число, род, часовые пояса и многое другое.
    • Сильная поддержка инструментов для извлечения и компиляции сообщений.

    Минусы

    • Требует знакомства со синтаксисом ICU сообщений, который может быть многословным.
    • Не так просто обрабатывать динамические или сложные переводы, которые более чем просто строковые.

    3. React-i18next

    Обзор

    React-i18next – это расширение для React от i18next, одного из самых популярных JavaScript фреймворков для i18n. Он предлагает обширные функции для переводов во время выполнения, ленивой загрузки и определения языка, что делает его чрезвычайно гибким для разнообразных случаев использования.

    Ключевые особенности

    • Гибкая структура переводов: Не привязан к одному формату, как ICU. Вы можете хранить переводы в JSON, использовать интерполяцию, множественное число и т. д.
    • Динамическое переключение языка: Встроенные плагины для определения языка и обновления в режиме реального времени.
    • Вложенные и структурированные переводы: Вы можете легко вложить переводы в JSON.
    • Обширная экосистема плагинов: Для определения (браузер, путь, подсайт и др.), загрузки ресурсов, кэширования и многого другого.

    Типичный рабочий процесс

    1. Установите i18next и react-i18next.
    2. Настройте i18n для загрузки переводов (JSON) и настройки определения языка или запасного варианта.
    3. Оборачивайте ваше приложение в I18nextProvider.
    4. Используйте хук useTranslation() или компонент <Trans> для отображения переводов.

    Плюсы

    • Очень гибкий и богатый функциями.
    • Очень активное сообщество и большая экосистема плагинов.
    • Простота динамической загрузки переводов (например, с сервера, по запросу).

    Минусы

    • Конфигурация может быть многословной, особенно если у вас есть более сложные потребности.
    • Если вы предпочитаете строго типизированные переводы, может потребоваться дополнительная настройка TypeScript.

    4. Intlayer

    Обзор

    Intlayer – это новая, открытая библиотека i18n, сосредоточенная на декларациях контента на уровне компонентов, безопасности типов и динамической маршрутизации. Она предназначена для современных рабочих процессов React, поддерживающих как Create React App, так и Vite. Она также включает в себя усовершенствованные функции, такие как маршрутизация на основе локали и автоматически сгенерированные типы TypeScript для переводов.

    Ключевые особенности

    • Декларативные файлы контента: Каждый компонент или модуль может объявить свои переводы в выделенных файлах .content.tsx или .content.json, что позволяет держать контент рядом с тем местом, где он используется.
    • Встроенная маршрутизация и промежуточное ПО: Дополнительные модули для локализованной маршрутизации (например, /en/about, /fr/about) и серверного промежуточного ПО для определения локали пользователя.
    • Автоматически сгенерированные типы TypeScript: Обеспечивают безопасность типов с такими функциями, как автозаполнение и обнаружение ошибок на этапе компиляции.
    • Динамические и богатые переводы: Могут включать JSX/TSX в переводы для более сложных случаев использования (например, ссылки, жирный текст, иконки в переводах).

    Типичный рабочий процесс

    1. Установите intlayer и react-intlayer.
    2. Создайте intlayer.config.ts для определения доступных локалей и локали по умолчанию.
    3. Используйте CLI Intlayer или плагин для транспиляции деклараций контента.
    4. Оборачивайте ваше приложение в <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. Когда выбирать каждую

    1. React-Intl

      • Вам нужна мощная форматировка для дат/времени/чисел и сильный синтаксис ICU сообщений.
      • Вы предпочитаете более «стандартизированный» подход к переводам.
      • Вам не требуется локализованная маршрутизация или строго типизированные ключи переводов.
    2. React-i18next

      • Вам нужно гибкое, устоявшееся решение с динамическим и по запросу загрузкой перевода.
      • Вы хотите определение языка на основе плагинов (например, из URL, cookies, локального хранилища) или расширенное кэширование.
      • Вам нужна самая большая экосистема с множеством существующих интеграций для различных фреймворков (Next.js, React Native и др.).
    3. 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.

    Если у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.

    Ссылка на блог GitHub