Интернационализация с Intlayer и i18next

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

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

Intlayer vs. i18next: Ключевые различия

1. Декларация контента

С i18next словари перевода должны быть объявлены в определенной папке, что может усложнить масштабируемость приложения. В отличие от этого, Intlayer позволяет декларацию контента в той же директории, что и ваш компонент. Это имеет несколько преимуществ:

• Упрощенное редактирование контента: Пользователям не нужно искать правильный словарь для редактирования, что уменьшает вероятность ошибок.
• Автоматическая адаптация: Если компонент меняет местоположение или удаляется, Intlayer обнаруживает это и адаптируется автоматически.

2. Сложность конфигурации

Конфигурация i18next может быть сложной, особенно при интеграции с серверными компонентами или настройке промежуточного ПО для таких фреймворков, как Next.js. Intlayer упрощает этот процесс, предлагая более простую конфигурацию.

3. Согласованность словарей перевода

Обеспечение согласованности словарей перевода на разных языках может быть сложной задачей с i18next. Эта несогласованность может привести к сбоям приложения, если с ней не справиться должным образом. Intlayer решает эту проблему, устанавливая ограничения на переведенный контент, чтобы гарантировать, что никакой перевод не будет пропущен и что переведенный контент будет точным.

4. Интеграция с TypeScript

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

5. Совместное использование контента между приложениями

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

Как генерировать словари i18next с Intlayer

Конфигурация Intlayer для экспорта словарей i18next

Важные замечания Экспорт словарей i18next в настоящее время находится в бета-версии и не гарантирует совместимость 1: 1 с другими фреймворками. Рекомендуется придерживаться конфигурации, основанной на Intlayer, чтобы минимизировать проблемы.

Чтобы экспортировать словари i18next, вам нужно соответствующим образом настроить Intlayer. Ниже приведен пример того, как настроить Intlayer для экспорта как словарей Intlayer, так и словарей i18next.

// intlayer.config.ts

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  content: {
    // Укажите, что Intlayer будет экспортировать как словари Intlayer, так и словари i18next
    dictionaryOutput: ["intlayer", "i18next"],
    // Относительный путь от корня проекта к директории, куда будут экспортироваться словари i18n
    i18nDictionariesDir: "./i18n/dictionaries",
  },
};

export default config;

Включив 'i18next' в конфигурацию, Intlayer создает специальные словари i18next в дополнение к словарям Intlayer. Обратите внимание, что удаление 'intlayer' из конфигурации может нарушить совместимость с React-Intlayer или Next-Intlayer.

Импорт словарей в вашу конфигурацию i18next

Чтобы импортировать сгенерированные словари в вашу конфигурацию i18next, вы можете использовать 'i18next-resources-to-backend'. Вот пример того, как импортировать ваши словари i18next:

// i18n/client.ts

import i18next from "i18next";
import resourcesToBackend from "i18next-resources-to-backend";

i18next
  // Ваша конфигурация i18next
  .use(
    resourcesToBackend(
      (language: string, namespace: string) =>
        import(`../i18n-dictionaries/${language}/${namespace}.json`)
    )
  );