Intlayer: компонентная интернационализация для React и Vue со строгой типизацией словарей

В крупных фронтенд-проектах интернационализация интерфейсов со временем превращается в источник скрытого технического долга. Традиционная схема с хранением переводов в общих гигантских файлах en.json и ru.json быстро деградирует: ключи дублируются в разных разделах, устаревшие строки годами не удаляются из-за страха сломать соседние экраны, а компилятор TypeScript бессилен заметить пропущенный перевод или опечатку в строковом идентификаторе.

Открытая библиотека Intlayer предлагает архитектурный сдвиг: переход к компонентно-ориентированной интернационализации (per-component i18n) для приложений на React, Vue, Next.js и Vite. Текстовые словари объявляются непосредственно рядом с кодом компонентов, получая строгую статическую типизацию и автоматический контроль полноты локализации.

Словари контента рядом с кодом и автовывод типов

В подходе Intlayer каждый компонент хранит свои локализованные тексты в специальном файле декларации контента (например, Hero.content.ts лежит в одной папке с Hero.tsx). Это решает фундаментальную проблему управления жизненным циклом интерфейса: когда компонент удаляется из проекта или подвергается рефакторингу, его локализованные тексты удаляются автоматически, не оставляя «мусорных» строк в кодовой базе.

Функция t() связывает строковые значения с поддерживаемыми языковыми кодами. На этапе сборки компилятор Intlayer анализирует эти файлы и автоматически генерирует интерфейсы TypeScript:

// src/components/Hero.content.ts — объявление словаря контента компонента
import { t, type ContentDeclaration } from 'intlayer';

const heroContent: ContentDeclaration = {
  key: 'hero-section',
  content: {
    title: t({
      ru: 'Интеллектуальная разработка без рутины',
      en: 'Smart engineering without friction',
    }),
    badge: t({
      ru: 'Новый релиз',
      en: 'New Release',
    }),
    cta: t({
      ru: 'Начать бесплатно',
      en: 'Get Started Free',
    }),
  },
};

export default heroContent;

Бесшовная интеграция с React и Next.js Server Components

В клиентском коде доступ к локализованным данным осуществляется через специализированный хук useIntlayer(). Он автоматически определяет активный язык пользователя, возвращая строго типизированный объект с полями, готовыми для рендеринга:

// src/components/Hero.tsx — использование типизированного словаря в React / Next.js
'use client';

import { useIntlayer } from 'next-intlayer';

export function Hero() {
  // Хук автоматически возвращает поля с учетом текущей локали пользователя
  const { title, badge, cta } = useIntlayer('hero-section');

  return (
    <section className="py-16 text-center">
      <span className="px-3 py-1 bg-sky-100 text-sky-800 rounded-full text-sm font-semibold">
        {badge}
      </span>
      <h1 className="mt-4 text-4xl font-bold tracking-tight text-slate-900">
        {title}
      </h1>
      <button className="mt-6 px-6 py-3 bg-sky-600 text-white font-medium rounded-lg shadow">
        {cta}
      </button>
    </section>
  );
}

Для серверных компонентов (React Server Components) в Next.js App Router библиотека предоставляет нативные функции извлечения словарей на этапе генерации страницы, исключая необходимость отправлять массив неиспользуемых языковых чанков в браузер клиента.

Визуальный редактор и автоматизация переводов

Дополнительное преимущество Intlayer — встроенный режим визуального редактирования (Visual Editor). Редакторы и переводчики могут корректировать тексты прямо в работающем интерфейсе приложения, а система сохраняет изменения обратно в локальные .content.ts файлы или передает их через удаленную CMS. Кроме того, инструмент поддерживает вызов языковых моделей на этапе CI для автоматического перевода недостающих языковых ключей.

Инженерный вердикт

Intlayer превращает интернационализацию из хаотичной возни с JSON-файлами в дисциплинированную инженерную систему с проверкой типов на этапе компиляции. Для современных приложений на Next.js и React, ориентированных на международную аудиторию, этот подход обеспечивает непревзойденную чистоту архитектуры и предотвращает утечку непереведенных интерфейсов в продакшен.