⚛️ Локализация приложений React с i18next

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

Текст публикуется в переводе, автор оригинальной статьи Aryclenio Xavier Barros.

Благодаря интернету, стирающему географические границы, веб-разработчики имеют возможность распространять свои приложения по всему миру. Однако тут возникает проблема – интернационализация.

Как быстро и эффективно перевести приложение на другие языки?

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

Создание проекта

Начнем с разворачивания нового React-проекта для демонстрации:

yarn create react-app i18napp

Теперь нужно установить зависимости для корректной работы i18next. Зайдите в директорию проекта

cd i18napp

и запустите следующую команду:

yarn add react-i18next i18next i18next-http-backend i18next-browser-languagedetector

Все подготовительные работы выполнены. Можно добавлять интернационализацию.

Конфигурация i18next

Для начала создадим конфигурационный файл i18n.js. Положите его рядом с корневым файлом index.js.

import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'

i18n
  // Подключение бэкенда i18next
  .use(Backend)
  // Автоматическое определение языка 
  .use(LanguageDetector)
  // модуль инициализации
  .use (initReactI18next)
  .init({
    // Стандартный язык
    fallbackLng: 'en',
    debug: true,
    // Распознавание и кэширование языковых кук
    detection: {
      order: ['queryString', 'cookie'],
      cache: ['cookie']
    },
    interpolation: {
      escapeValue: false
    }
  })

export default i18n;

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

Теперь импортируем файл конфигурации в index.js:

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// настройки плагина
import './i18n';

ReactDOM.render (
  <React.StrictMode>
    <Suspense fallback={<div>Loading...</div>}>
        <App />
    </Suspense>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

Плагин react i18next включен и готов к использованию. Следующий шаг – подключение нужных языков.

Подключение локалей

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

В директорию /public нужно добавить новую папку locales. Для каждого языка будет создана своя подпапка: /en и /ru – в каждой из них json-файл translation.json с переводами.

Файл для английского языка:

{
  "title": "Internationalizing with i18next",
  "description": {
    "part1": "To get started, edit <1>src/App.js</1> and save to reload.",
    "part2": "Switch language between english and russian using buttons above."
  }
}

Файл для русского языка:

{
  "title": "Интернационализация с i18next",
  "description": {
    "part1": "Чтобы начать работу, отредактируйте и сохраните файл <1>src/App.js</1>.",
    "part2": "С помощью кнопок переключайте язык между английским и русским."
  }
}

Структура папок с локалями:

Теперь выведем информацию на домашней странице приложения.

Настройка App.js

Откройте файл App.js и замените его автоматически сгенерированное содержимое на следующее:

import React from "react";
import "./App.css";
import { useTranslation } from "react-i18next";

function App() {
  const { t, i18n } = useTranslation();

  const changeLanguage = (language) => {
    i18n.changeLanguage(language);
  };

  return (
    <div className="App">
      <button onClick={() => changeLanguage("en")}>EN</button>
      <button onClick={() => changeLanguage("ru")}>RU</button>
      <hr />
      <div><h1>{t("title")}</h1></div>
      <div>{t("description.part1")}</div>
      <div>{t("description.part2")}</div>
    </div>
  );
}

export default App;

Давайте разберемся, что здесь происходит.

Хук useTranslation

Импортируем хук useTranslation плагина i18next:

import {useTranslation} from "react-i18next";

и подключаем его в коде приложения:

const {t, i18n} = useTranslation ();

С помощью функции t плагин будет подключать переводы и отслеживать изменения текущего языка.

Вывод контента

Теперь нужно просто вызвать эту функцию в нужном месте, передав ей идентификатор из файла локали:

<div><h1>{t("title")}</h1></div>
<div>{t("description.part1")}</div>
<div>{t("description.part2")}</div>

Все предельно просто!

Добавим еще две кнопки для переключения языка в реальном времени:

<button onClick={() => changeLanguage("en")}>EN</button>
<button onClick={() => changeLanguage("ru")}>RU</button>

Интернационализация в действии

Запустите проект:

yarn start

Если вы все сделали правильно, то магия должна свершиться – перевод выполняется прямо во время работы приложения.

Github-репозиторий

Демо-приложение

Источники

• https://dev.to/aryclenio/internationalizing-your-react-app-with-i18next-43op