Library. i18n

🧱 Суть

Для локализации React-приложений чаще всего используют связку:

i18next
react-i18next
Это фактически стандарт для интернационализации (i18n).

📦 Проблема

1. Текст жёстко прописан в компонентах

<button>Сохранить</button>

При добавлении второго языка приходится менять все компоненты.

2. Нет централизованного хранения переводов

Строки разбросаны по всему проекту, что усложняет поддержку.

✅ Решение

Использовать i18next и хранить переводы в отдельных JSON-файлах.

💻 Код

Основные библиотеки:

npm install i18next react-i18next

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

npm install i18next-browser-languagedetector

Структура проекта

src/
 └── shared/
       └── i18n/
            ├── index.ts
                   └── locales/
                            ├── en.json
                            └── ru.json

Файлы переводов

ru.json

{  
	"welcome": "Добро пожаловать",
	"rename": "Переименовать файлы"
}

en.json

{  
	"welcome": "Welcome",
	"rename": "Rename files"
}

Инициализация

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
 
import en from './locales/en.json';
import ru from './locales/ru.json';
 
i18n.use(initReactI18next).init({
	resources: {
		en: { translation: en },
		ru: { translation: ru },
	},
	lng: 'ru',
	fallbackLng: 'en',
});

Использование

import { useTranslation } from 'react-i18next';
 
const { t } = useTranslation();
 
<h1>{t('welcome')}</h1>;

Переключение языка

import i18n from '@/shared/i18n';
 
<select onChange={(e) => i18n.changeLanguage(e.target.value)}>
	<option value="ru">Русский</option>
	<option value="en">English</option>
</select>

Лучшие практики

Не хардкодить текст:

<button>{t('save')}</button>

Использовать понятные ключи:

{
	"auth": {
		"login": "Войти"
	}
}

или

{
	"auth.login": "Войти"
}

Хранить настройки локализации в shared/i18n, а для больших проектов использовать отдельные namespace.

🎯 Вывод

i18next + react-i18next – стандарт для локализации React
переводы лучше хранить в JSON-файлах
компоненты должны использовать t(...) вместо строк
заранее продуманная структура облегчает поддержку и масштабирование проекта

LETUNOFF DOCS

Навигация