Интернационализация (i18n) с i18next и react-i18next

Интернационализация (i18n) может быть одной из функций, которые вам нужны сегодня. Благодаря i18next задача локализации вашего приложения может быть решена легко. В этой статье я покажу вам, как локализовать приложение React, используя i18next и react-i18next.

О чем будет рассказано в этой статье?

  1. Запустите и используйте функцию перевода.
  2. Обработка выбора языка пользователем.
  3. Управляйте файлами перевода.
  4. Сохраните языковой ключ в Cookie.

Я сосредоточусь на том, как интернационализация реализована в приложении React. В этом руководстве я использую новое приложение React, созданное с помощью Create React App и Ant Design для компонентов. Вы можете создать свое приложение React по своему усмотрению.

Чего мы хотим достичь?

1. Запустите и используйте функцию перевода.

Установите i18next и react-i18next.

npm install i18next react-i18next --save
// or
yarn add i18next react-i18next

Создайте i18n.js файл для размещения ваших конфигураций. Вот пример содержимого файла i18n.js.

  • resources: данные локали (перевода).
  • lng: исходный используемый язык.
  • fallbackLng: язык, который будет использоваться, если некоторые переводы не определены.

Импортируйте его в свой index.js файл.

Теперь вы можете использовать его в своих компонентах. Мы будем использовать ловушку useTranslation, предоставленную react-i18next.

Функция перевода (t) принимает ключ перевода, определенный в resources, например: t("title") (или с, если у вас есть вложенный объект перевода: t("content.description")).

Вот и все. Теперь, если вы обновите страницу в браузере, текст заголовка должен быть «Земля».

2. Обработка выбора языка пользователем.

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

Мы используем i18n.changeLanguage метод, который принимает языковой ключ. Доступные языковые ключи определены в resources (en, de, fr или id). Вернитесь в браузер, теперь вы можете изменить язык и сразу увидеть результат.

Примечание: я использую Ant Design для компонента Radio. Вы можете использовать HTML-тег select, радио-тег ввода или собственный компонент для своего приложения.

3. Управляйте файлами переводов.

Все переводы помещаются в i18n.js файл. Если ваше приложение растет, то этот файл будет труднее поддерживать. Чтобы решить эту проблему, мы можем переместить каждый перевод в отдельные файлы JSON. Затем наше приложение загрузит эти файлы JSON по мере необходимости.

Мы будем использовать i18next-http-backend для загрузки ресурсов с внутреннего сервера. Он использует XMLHttpRequest или API выборки для получения файлов ресурсов.

Установить i18next-http-backend:

npm install i18next-http-backend --save
// or
yarn add i18next-http-backend

Создайте папку locales в папке public. Затем создайте папки для каждого языкового ключа. В каждую папку добавьте translation.json файл. Структура папок должна выглядеть так:

Скопируйте данные перевода из resources в соответствующие файлы, например:

/* en/translation.json */
{
  "title": "Earth",
  "content": {
    "description": "Earth is the third planet...",
    "source": "Source: "
  }
}

Обновите свой i18n.js файл:

Как я сказал ранее, i18next-http-backend загружает файлы ресурсов с помощью XMLHttpRequest, что означает, что процесс является асинхронным. Может быть время, когда файлы ресурсов еще не готовы. Чтобы справиться с этим, мы можем использовать Suspense из React, чтобы обернуть наш компонент. Вы можете поместить его в index.js, чтобы обернуть все компоненты:

Теперь вы вернетесь в свой браузер и посмотрите, работает ли он должным образом.

4. Сохраните ключ языка в Cookie.

Вы заметите, что если вы обновите браузер или закроете, а затем снова откроете его, язык вернется к английскому (en). Это потому, что мы все еще жестко запрограммировали его в i18n.js. У нас нет более постоянного места для хранения.

Я буду использовать Cookie (с js-cookie) для хранения кода языка. Вы можете выбрать другие способы, такие как локальное хранилище или даже на вашем внутреннем сервере.

Обновите i18n.js, чтобы теперь lng использовал языковой ключ из файла cookie.

Я также добавил код резервного языка с использованием короткого замыкания, если значение locale из Cookie равно undefined.

Не забудьте обновить нашу changeLanguage функцию, чтобы можно было сохранить выбранный ключ для Cookie. Просто добавьте приведенный ниже код после строки i18n.changeLanguage(code);. Но не забудьте сначала импортировать Cookies.

Cookies.set("locale", code);

Это все. Вы реализовали интернационализацию в своем приложении React.

Заключение

i18next и react-i18next - отличные инструменты, которые помогают нам реализовать интернационализацию в нашем приложении React. Они просты и удобны в использовании. Полное руководство можно найти на странице документации.

Пример кода можно найти на GitHub.

Спасибо.