Благодаря интернету, стирающему географические границы, веб-разработчики имеют возможность распространять свои приложения по всему миру. Однако тут возникает проблема – интернационализация.
Как быстро и эффективно перевести приложение на другие языки?
К счастью, уже существует множество решений, в том числе для популярнейших библиотек и фреймворков. В этой статье мы познакомимся с плагином i18next для React и научимся работать с ним.
Создание проекта
Начнем с разворачивания нового React-проекта для демонстрации:
Теперь нужно установить зависимости для корректной работы i18next. Зайдите в директорию проекта
и запустите следующую команду:
Все подготовительные работы выполнены. Можно добавлять интернационализацию.
Конфигурация i18next
Для начала создадим конфигурационный файл i18n.js . Положите его рядом с корневым файлом index.js .
Здесь активируются нужные хуки и устанавливаются настройки плагина: базовый язык, работа с куками и т.д.
Теперь импортируем файл конфигурации в index.js :
Плагин react i18next включен и готов к использованию. Следующий шаг – подключение нужных языков.
Подключение локалей
Интернационализация в вебе основана обычно на json-файлах, в которых каждому слову/сочетанию слов соответствует свой перевод. В нашем демо-приложении мы будем работать с английским и русским языками.
В директорию /public нужно добавить новую папку locales . Для каждого языка будет создана своя подпапка: /en и /ru – в каждой из них json-файл translation.json с переводами.
Файл для английского языка:
Файл для русского языка:
Структура папок с локалями:
Теперь выведем информацию на домашней странице приложения.
Настройка App.js
Откройте файл App.js и замените его автоматически сгенерированное содержимое на следующее:
Давайте разберемся, что здесь происходит.
Хук useTranslation
Импортируем хук useTranslation плагина i18next:
и подключаем его в коде приложения:
С помощью функции t плагин будет подключать переводы и отслеживать изменения текущего языка.
Вывод контента
Теперь нужно просто вызвать эту функцию в нужном месте, передав ей идентификатор из файла локали:
Все предельно просто!
Добавим еще две кнопки для переключения языка в реальном времени:
Интернационализация в действии
Если вы все сделали правильно, то магия должна свершиться – перевод выполняется прямо во время работы приложения.