React Academy · Урок

Настройка react-i18next

Установите и настройте i18next с определением языка и разделением пространств имён.

«Настройка react-i18next» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Добро пожаловать

В этом уроке Вы установите и настроите react-i18next с определением языка и разделением по пространствам имён, чтобы добавить многоязычную поддержку в приложение React.

Установка зависимостей

Установите i18next и react-i18next. При желании добавьте i18next-browser-languagedetector для автоматического определения локали и i18next-http-backend для загрузки переводов по HTTP.

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

Создание i18n.js

Создайте файл `i18n.js`, который инициализирует i18next. Вызовите `i18n.use(...)`, чтобы добавить плагины, и `.init({...})` с Вашей конфигурацией.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

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

export default i18n;

Импорт i18n в main.jsx

Импортируйте файл инициализации i18n ДО отображения приложения. Это гарантирует, что i18n будет готов до того, как любой компонент вызовет useTranslation.

import './i18n'; // must be before App
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')).render(
  <StrictMode><App /></StrictMode>
);

Пространства имён

Пространства имён разделяют переводы на логические группы (например, «common», «auth», «dashboard»). Каждое пространство имён хранится в отдельном JSON-файле и загружается по требованию, чтобы уменьшить размер исходного пакета.

resources: {
  en: {
    common: { save: 'Save', cancel: 'Cancel' },
    auth: { login: 'Log in', logout: 'Log out' },
  }
}

Определение языка

Плагин LanguageDetector считывает предпочитаемый язык пользователя из браузера (navigator.language), localStorage или строки запроса URL. При первой загрузке он автоматически устанавливает активный язык.

Загрузка переводов из общедоступной папки

Храните переводы в виде JSON-файлов по пути `public/locales/{lang}/{ns}.json`. Настройте плагин серверной части для их загрузки во время выполнения, чтобы добавление нового языка не требовало изменения кода.

import Backend from 'i18next-http-backend';

i18n.use(Backend).init({
  backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json',
  },
});

I18nextProvider (необязательно)

I18nextProvider оборачивает приложение и предоставляет экземпляр i18n через контекст. При использовании react-i18next v11+ и плагина initReactI18next это необязательно — хук напрямую считывает глобальный экземпляр i18n.

Проверка инициализации в компонентах

i18next загружает переводы асинхронно. Используйте свойство `ready` из useTranslation или проверяйте `i18n.isInitialized` перед отображением текста, чтобы не показывать ключи переводов.

const { t, ready } = useTranslation();
if (!ready) return null;

DevTools и обработка отсутствующих ключей

В режиме разработки установите `saveMissing: true`, чтобы записывать отсутствующие ключи переводов в консоль. Это помогает быстро находить непереведённые строки.

i18n.init({ saveMissing: true,
  missingKeyHandler: (lng, ns, key) => console.warn('Missing:', key) });

Быстрая проверка

Почему файл инициализации i18n необходимо импортировать до отображения приложения React?

Итоги

Установите i18next и react-i18next, создайте i18n.js с плагинами и конфигурацией init, импортируйте его до отображения приложения и организуйте переводы по пространствам имён. Используйте http-backend для загрузки файлов переводов во время выполнения.

Следующий урок: **Использование хука useTranslation** — Вы замените жёстко заданные строки вызовами t() и упорядочите файлы переводов JSON.

Часто задаваемые вопросы

Урок «Настройка react-i18next» бесплатный?

Да — полный текст урока «Настройка react-i18next» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Настройка react-i18next»?

Установите и настройте i18next с определением языка и разделением пространств имён. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Настройка react-i18next»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к React Academy