Установка react-i18next

Библиотека i18next используется как базовый слой интернационализации, предоставляя механизмы хранения, загрузки и выбора переводов. Надстройка react-i18next интегрирует этот функционал в экосистему React, обеспечивая реактивные переводы, контексты и удобные хуки.

Минимальная конфигурация для работы с React требует установки трёх ключевых зависимостей:

  • i18next — ядро системы интернационализации
  • react-i18next — связка с React
  • i18next backend или плагин для загрузки переводов (по необходимости)

Установка через npm:

npm install i18next react-i18next

При использовании yarn:

yarn add i18next react-i18next

Дополнительно часто подключается загрузчик переводов по HTTP:

npm install i18next-http-backend

и детектор языка пользователя:

npm install i18next-browser-languagedetector

Структура зависимостей и роль пакетов

i18next выполняет роль движка, который управляет:

  • словарями переводов
  • текущим языком
  • интерполяцией строк
  • fallback-языками
  • namespace-разделением

react-i18next добавляет слой интеграции:

  • React Context для хранения i18n-инстанса
  • хуки (useTranslation, useLanguage)
  • HOC (withTranslation)
  • компоненты (Trans)

React обеспечивает реактивную модель обновления интерфейса, в которой смена языка автоматически вызывает перерисовку компонентов.

Установка с расширенными возможностями

Для типичного production-приложения установка часто расширяется:

npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector

Назначение дополнительных модулей

i18next-http-backend Позволяет загружать переводы из внешних JSON-файлов:

  • /public/locales/en/translation.json
  • /public/locales/ru/translation.json

i18next-browser-languagedetector Определяет язык пользователя через:

  • navigator.language
  • cookies
  • localStorage
  • query string

Подключение в проекте после установки

После установки зависимости формируют единый i18n-слой, который должен быть инициализирован до рендера React-приложения.

Пример базовой структуры:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next)
  .init({
    resources: {},
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

Здесь происходит связывание ядра i18next с React-обвязкой react-i18next через плагин initReactI18next.

Подключение инициализации в React-приложение

Файл инициализации обычно импортируется один раз в точке входа:

import './i18n';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

Это гарантирует, что i18n-инстанс создан до рендера компонентов React.

Установка типов для TypeScript

При использовании TypeScript дополнительно устанавливаются типы:

npm install -D @types/i18next

Для react-i18next отдельные типы обычно не требуются, так как они встроены в пакет.

Проверка корректной установки

После установки корректная конфигурация характеризуется следующими признаками:

  • отсутствуют ошибки импорта i18next
  • доступен хук useTranslation из react-i18next
  • инициализация происходит один раз при старте приложения
  • смена языка приводит к обновлению UI без ручного рефреша

Типичная структура пакетов в проекте

src/
  i18n/
    index.js
    locales/
      en/
        translation.json
      ru/
        translation.json
  App.jsx
  main.jsx

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

Оглавление