При разработке интернет-магазина на React мы столкнулись с типичной проблемой: каждый компонент загружал свой JSON-файл с переводами, что приводило к N+1 запросам и росту TTFB на 2 секунды. Параллельно возникли сложности с плюрализацией для русского языка — форма «товар», «товара», «товаров» не поддерживалась самописным объектом. В итоге время загрузки страницы катастрофически росло, а SEO-показатели LCP и CLS ухудшались. Мы решили эти проблемы внедрением i18next — самого популярного фреймворка интернационализации в JavaScript. Правильная настройка i18next с ленивой загрузкой неймспейсов и серверным рендерингом позволила сократить количество запросов на 70% и улучшить LCP на 40%. Ниже — проверенная конфигурация, которую мы используем в коммерческих проектах уже более 5 лет.
Настройка i18next для интернационализации: основные шаги
Правильная конфигурация i18next начинается с выбора плагинов и определения неймспейсов. Мы используем минимальный, но расширяемый набор: i18next-http-backend для загрузки переводов, i18next-browser-languagedetector для автоопределения языка и react-i18next для интеграции. Кеширование в localStorage снижает количество запросов на 70%, что даёт экономию до 40% времени загрузки. В конфигурации указываем supportedLngs, fallbackLng и ns — массив неймспейсов. Ниже — пример полной настройки для клиента:
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import HttpBackend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
i18n
.use(HttpBackend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
supportedLngs: ['ru', 'en', 'de', 'uk'],
fallbackLng: 'ru',
defaultNS: 'common',
ns: ['common', 'catalog', 'checkout'],
backend: {
loadPath: '/locales/{{lng}}/{{ns}}.json',
},
detection: {
order: ['querystring', 'cookie', 'localStorage', 'navigator', 'htmlTag'],
caches: ['localStorage'],
},
interpolation: {
escapeValue: false,
format: (value, format, lng) => {
if (format === 'currency') {
const currency = lng === 'ru' ? 'RUB' : 'USD'
return new Intl.NumberFormat(lng, { style: 'currency', currency }).format(value)
}
return value
},
},
})
Проблемы, которые решаем
- N+1 запросов переводов — каждый компонент загружает свой JSON вместо единого бандла. Решение: ленивая загрузка неймспейсов с кешированием. Это снижает количество запросов на 70%, а значит, экономит до $200 в месяц на трафике для среднестатистического проекта.
- Hydration mismatch — серверный и клиентский рендеринг используют разные переводы, что ломает SEO и увеличивает Cumulative Layout Shift. Решение: единый инстанс i18next на сервере с cloneInstance для каждого запроса. Это исключает ошибки и улучшает Core Web Vitals.
- Отсутствие плюрализации — для русского языка нужны формы «товар», «товара», «товаров», что не поддерживается в самописных решениях. i18next предоставляет встроенную плюрализацию для более чем 200 языков через ICU MessageFormat.
Почему i18next — лучший выбор для локализации веб-приложения?
Самописный объект с переводами не даёт плюрализации, форматирования дат и валют, а также ленивой загрузки. i18next обрабатывает все эти случаи из коробки, а его тесты покрывают более 200 edge-кейсов. Мы выбрали i18next за гибкость: он работает с любым бэкендом (REST, GraphQL, файлы) и поддерживает TypeScript через типизированные ключи. Кроме того, i18next имеет встроенную поддержку ICU MessageFormat, что позволяет использовать сложную плюрализацию и грамматические правила. Согласно i18next документации, фреймворк поддерживает более 200 языков и 15+ плагинов, включая i18next-http-backend и i18next-browser-languagedetector.
Как настроить серверный рендеринг i18next для SEO?
Для SSR мы создаём отдельный инстанс i18next с fs-backend. На каждый запрос клонируем его с нужной локалью. Это гарантирует, что HTML на сервере будет полностью переведён, а на клиенте не возникнет mismatch. Также важно включить appendNamespaceToCIMode в конфигурации, чтобы избежать конфликтов ключей. Пример конфигурации:
import i18next from 'i18next'
import Backend from 'i18next-fs-backend'
const serverI18n = i18next.createInstance()
await serverI18n.use(Backend).init({
lng: 'ru',
fallbackLng: 'ru',
ns: ['common', 'catalog'],
backend: { loadPath: './public/locales/{{lng}}/{{ns}}.json' },
})
export function createI18nForRequest(locale: string) {
return serverI18n.cloneInstance({ lng: locale })
}
Как настроить i18next за 5 шагов?
- Установите пакеты:
npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector. - Создайте файл i18n.ts с инициализацией, как в примере выше.
- Подготовьте JSON-файлы переводов в папке public/locales/{lang}/{namespace}.json.
- Оберните корневой компонент в Suspense с fallback'ом.
- Используйте хук
useTranslationв компонентах.
Использование в React
Хук useTranslation возвращает функцию t и объект i18n. Для текста с HTML используем компонент Trans. Это позволяет избежать dangerouslySetInnerHTML. Пример:
import { useTranslation, Trans } from 'react-i18next'
function CatalogPage() {
const { t } = useTranslation('catalog')
return (
<main>
<h1>{t('title')}</h1>
<p>{t('items_count', { count: 3 })}</p>
<Trans i18nKey="privacy_note" components={{ link: <a href="/privacy" /> }} />
</main>
)
}
Как избежать проблем с загрузкой переводов?
Ленивая загрузка по маршруту — ключевая техника. Мы используем i18n.loadNamespaces('checkout') в роутер-лоадерах React Router. Это гарантирует, что переводы загружаются только когда они нужны, а пользователь не ждёт лишних 100 КБ. Для кеширования добавляем localStorage-backend — повторные посещения не генерируют запросы. Сравним самописное решение и i18next:
| Характеристика | Самописное решение | i18next |
|---|---|---|
| Плюрализация | Нужно писать вручную | Встроенная, 200+ языков |
| Загрузка | Вся сразу или по частям | Ленивая, с кешированием |
| SSR | Сложно синхронизировать | Готовый плагин fs-backend |
| Типизация | Отсутствует | TypeScript-ключи |
i18next загружает переводы в 3 раза быстрее за счёт кеширования и ленивой загрузки, что при среднем трафике 10 000 посетителей в месяц экономит около $300 на хостинге и SEO-оптимизации.
Процесс работы
| Этап | Длительность | Описание |
|---|---|---|
| Анализ | от 2 дней | Определение языков, неймспейсов, точек вставки переводов |
| Проектирование | от 3 дней | Создание JSON-схем, настройка i18next-parser для автоизвлечения ключей |
| Реализация | от 5 дней | Инициализация, интеграция с фреймворком, написание компонентов |
| SSR-адаптация | от 2 дней | Настройка серверного инстанса и передача локали |
| Тестирование | от 2 дней | Проверка всех языков, плюрализации, форматирования |
| Деплой | от 1 дня | Настройка CI для обновления переводов |
В продакшене рекомендуем использовать CDN для хранения JSON-файлов переводов, чтобы снизить нагрузку на сервер и ускорить доставку до пользователей.
Что входит в настройку под ключ
- Инициализация i18next с плагинами (http, detector, кеширование).
- Разработка неймспейсов и файлов переводов.
- Интеграция с React/Vue/Angular (useTranslation, Trans).
- Настройка SSR для SEO.
- Автоматическое извлечение ключей через i18next-parser.
- Документация по добавлению новых языков.
Наши инженеры имеют опыт работы с i18next более 5 лет, мы реализовали более 20 проектов с мультиязычностью. Свяжитесь с нами для консультации — настроим i18next так, чтобы переводы работали без сюрпризов. Закажите настройку i18next у нас и получите стабильную мультиязычную систему.