Lingo.dev Compiler

Lingo.dev Compiler — это бесплатная система трансляции с открытым исходным кодом, которая делает React-приложения многоязычными без изменений в ваших компонентах.

Чтобы увидеть компилятор в действии, посмотрите этот live demo: https://x.com/MaxPrilutskiy/status/1929946504216932746

Быстрый пример

До добавления компилятора:

export function Welcome() {
  return <h1>Welcome to our app</h1>;
}

После добавления компилятора (код менять не нужно):

// Same code - translations injected automatically at build time
export function Welcome() {
  return <h1>Welcome to our app</h1>;
}
// Renders "Bienvenido a nuestra aplicación" in Spanish

Как это работает

Компилятор автоматически находит переводимый текст в вашем JSX, генерирует переводы с помощью ИИ и внедряет их на этапе сборки. Ваш исходный код остаётся без изменений — переводы добавляются прозрачно во время сборки.

Ключевой принцип: Переводы определяются на этапе компиляции, создавая оптимизированные бандлы только с нужными языками. Это значит — более быстрая загрузка, меньший размер бандла и лучший SEO.

Чем отличается

В отличие от библиотек для перевода на лету (i18next, react-intl), Lingo.dev Compiler:

  • Работает на этапе сборки, а не во время выполнения
  • Не требует ручного управления ключами переводов
  • Генерирует переводы автоматически с помощью ИИ
  • Не создаёт нагрузки в рантайме
  • Оставляет ваш React-код чистым — никаких вызовов t()

Основные возможности

  • Автоматически по умолчанию — не нужен директив "use i18n" (опционально, если хотите включать вручную)
  • Нулевая нагрузка в рантайме — переводы компилируются заранее в ваш билд
  • Режимы сборки — используйте псевдопереводчик в разработке, реальные переводы в CI, только кэш в продакшене
  • Безопасность типов — полная поддержка TypeScript с автогенерацией типов
  • Ручные правки — используйте атрибут data-lingo-override для точного контроля отдельных переводов
  • Собственные резолверы локали — реализуйте свою логику определения и сохранения локали
  • Автоматическая плюрализация — поддержка ICU MessageFormat для форм множественного числа
  • Виджет для разработки — редактор переводов прямо в браузере для редактирования на лету

Поддерживаемые фреймворки

  • Next.js (App Router с React Server Components)
  • Vite + React (SPA и SSR)

Скоро появится поддержка других фреймворков.

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

Нужны ли API-ключи в продакшене? Нет. Используйте buildMode: "cache-only" в продакшене — переводы заранее генерируются в CI, API-запросы не требуются.

Можно ли управлять тем, какие файлы переводятся? Да. Установите useDirective: true, чтобы требовать директиву 'use i18n' в начале файлов, которые хотите перевести. По умолчанию всё происходит автоматически (все файлы).

Что делать, если AI-перевод неверный? Используйте атрибут data-lingo-override, чтобы задать точный перевод для конкретных локалей. Работает с любым JSX-элементом.

Как тестировать без API-запросов? Включите usePseudotranslator: true в режиме разработки — он мгновенно генерирует фейковые переводы, чтобы вы могли увидеть, что переводится, без затрат на API.

Дальнейшие шаги