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

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

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

Intlayer против i18next: ключевые отличия

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

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

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

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

Настройка i18next может быть сложной, особенно при интеграции с серверными компонентами или настройке middleware для таких фреймворков, как 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.

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`)
    )
  );