Что следует учитывать при выборе библиотеки I18n для приложения Next.js 14

Статья будет состоять из трёх частей:

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

Во-первых, необходимо определить критерии библиотеки, подходящей для производства. Исходя из собственного опыта, выделю следующие критерии:

1. Популярность и рейтинг — это скорее гарантия того, что с библиотекой знакомо множество разработчиков, а также имеется достаточное сообщество для решения возникающих трудностей и проблем.
2. Актуальность — для меня это красный флаг, если библиотека не обновлялась годами. Обычно это означает, что библиотека не развивается и может не поддерживать последние изменения в Next.js. Даже если сейчас всё работает правильно, нет никакой гарантии, что оно не сломается при следующем обновлении Next.js.
3. Наличие качественной документации и примеров — это важный критерий, поскольку позволяет быстрее внедрить библиотеку и существенно упрощает обслуживание в дальнейшем.
4. Безопасность — текущая версия библиотеки не должна иметь известных проблем с безопасностью.
5. Читаемый исходный код библиотеки — оценка чистоты и читабельности кода всегда будет субъективной. В большинстве случаев это не требуется, но может быть полезно, особенно при выборе менее популярной и неподдерживаемой на данный момент библиотеки. В этой статье мы не будем рассматривать такие библиотеки, поэтому не будем оценивать их по этому критерию.
6. Производительность — состоит из двух частей: размера библиотеки и времени загрузки, а также фактической скорости выполнения кода в библиотеке. Мы постараемся оценить это на этапе тестирования.
7. Функциональные возможности — библиотека должна соответствовать функциональным требованиям системы, чтобы избежать поиска обходных путей или необходимости менять библиотеку в середине разработки.
8. Соблюдение стандартов. Я буду стремиться выбирать библиотеки для продуктивной среды, которые соответствуют принятым стандартам. При необходимости я хочу иметь возможность с минимальными усилиями заменить одну библиотеку на другую.

В первой части статьи мы выберем библиотеки и оценим их по первым четырем критериям. Используя эти критерии, мы выберем три библиотеки для дальнейшего анализа. Во второй части мы оценим выбранные библиотеки по критериям 7 и 8.

Для начала составим список доступных библиотек и посмотрим на их популярность:

1. react-i18next, количество загрузок за неделю: 2 677 938, последнее обновление: 11 дней назад.
2. react-intl, количество загрузок за неделю 1 311 586, последнее обновление 13 дней назад.
3. next-i18next, 350 234 загрузок за неделю, последнее обновление месяц назад.
4. next-intl, загрузка за неделю 118 061, последнее обновление: 3 дня назад.
5. @lingui/react, количество загрузок за неделю 97 660, последнее обновление 2 месяца назад.
6. next-translateмн загрузок в неделю 73 427, последнее обновление 23 дня назад
7. rosetta, еженедельно 21 258 загрузок, последнее обновление 3 года назад.
8. next-localization, еженедельно загрузок 14 404, последнее обновление 2 года назад.

Отказ от ответственности. Эти цифры актуальны на 27 ноября 2023 г. Веб-разработка развивается быстро, и через несколько месяцев ситуация может измениться.

Далее мы не будем рассматривать rosetta и next-localization, так как они не обновлялись более двух лет и, как следствие, имеют наименьшее количество загрузок, который постоянно уменьшается.

Мы проверим пакеты на наличие известных уязвимостей с помощью Snyk CLI:

~$ snyk test next-intl@latest

Testing next-intl@latest...

Organization:      ***
Package manager:   npm
Open source:       yes
Project path:      next-intl@latest

✔ Tested next-intl@latest for known vulnerabilities, no vulnerable paths found.

Проверив все пакеты, мы обнаруживаем, что все указанные пакеты не имеют известных уязвимостей — отлично!

Теперь давайте взглянем на документацию.

1. next-intl — хорошо структурированная и подробная документация с примерами использования App Router и Pages Router.
2. @lingui/react — хорошо структурированная и подробная документация, но примеры описаны только для приложений React. , требующий адаптации для Next.js
3. react-i18next — подробная документация, но, на мой взгляд, плохо структурированная и перегруженная неактуальной информацией. Пример интеграции для Next.js ведет на страницу за пределами документации библиотеки.
4. react-intl — подробная документация по библиотеке и ее API, в которой отсутствуют примеры использования библиотеки в приложение. Документация ориентирована на React, поэтому требуется адаптация библиотеки для использования в приложении Next.js
5. next-translate — подробная одностраничная документация с оглавлением, улучшающая навигацию. Документация относится к Next.js версии 10, которая кажется устаревшей. Во всех примерах используется Pages Router.
6. next-i18next — одностраничная документация, использование описано только с помощью Pages Router, рекомендуется использовать act-i18next непосредственно для Next.js 13/14.

Поскольку мы сосредоточимся на разработке приложения с помощью Next.js 14, мы не будем далее рассматривать next-i18next, поскольку вместо этого они рекомендуют использовать react-i18next. Библиотеку next-translate мы также рассматривать не будем, так как, на мой взгляд, ее документация не выглядит актуальной и достаточно удобной для простой и быстрой интеграции в нашу будущую систему.

Мой личный выбор однозначно пал на next-intl как наиболее качественно документированную и react-i18next как на самую популярную библиотеку.

Выбор третьего варианта для дальнейшего анализа кажется более сложным, поскольку конкурируют две библиотеки: @lingui/react и react-intl. Оба потребуют дополнительных исследований для интеграции в приложение Next.js 14. Один из них очень популярен: его загружают более миллиона раз в неделю, а у другого более структурированная документация.

Обе эти библиотеки используют подходы, отличные от next-intl и react-i18next. @lingui/react использует дополнительный CLI для извлечения переводимых строк из кода страницы, что, на мой взгляд, усложняет процесс разработки и затрудняет абстрагирование переводов от кода. react-intl использует специальные объекты JavaScript, описывающие переводимые сообщения.

Для дальнейшего изучения давайте рассмотрим все четыре библиотеки: next-intl, react-i18next, @lingui/react и react-. международный. Мы постараемся сравнить их различные подходы и функциональные возможности, которые они предоставляют.

Если вы используете другие библиотеки и уверены, что они смогут конкурировать с выбранными, сообщите мне об этом в комментариях, и я обязательно изучу их.

Подпишитесь на уведомления, чтобы не пропустить следующие части.

---

Пока вы ждете следующего раунда.

Нам нужны ваши отзывы о нашей недавно запущенной Gitloc — платформе локализации современных веб-приложений. Это идеальный выбор для независимых разработчиков. и небольшие команды.

Приглашаем вас протестировать нашу систему, что займет всего 10–15 минут, ознакомьтесь с документацией.

На этом этапе нам крайне важно получать обратную связь от разработчиков. Вы можете оставить свой отзыв в комментариях к последнему выпуску на нашем канале Telegram или написать на адрес feedback@gitloc.org.

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

:::информация Также опубликовано здесь.

:::

---

Оригинал