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

Lingo.dev Compiler автоматизирует локализацию React-приложений на этапе сборки с помощью интеллектуального анализа кода и перевода на основе ИИ.

Когда вы запускаете процесс сборки, компилятор выполняет следующие шаги, чтобы сделать ваше приложение многоязычным без изменения исходного кода:

1. Анализ AST

Lingo.dev Compiler обрабатывает абстрактное синтаксическое дерево (AST) вашего React-кода, чтобы детерминированно выявить переводимый контент. Он анализирует:

  • Текстовое содержимое и атрибуты JSX
  • Строковые литералы внутри React-компонентов (Поддержка строковых литералов скоро появится.)
  • Шаблоны динамического контента

Компилятор понимает границы React-компонентов и сохраняет контекстную информацию для точных переводов.

2. Извлечение контента

Компилятор извлекает переводимые строки, сохраняя:

  • Иерархию компонентов и контекст
  • React-специфические шаблоны, такие как props и state
  • Структуру и форматирование кода

Извлекается только читаемый человеком контент. Технические идентификаторы, фрагменты кода и непереводимые элементы автоматически отфильтровываются.

3. Создание отпечатков и версионирование

Создание отпечатков контента обеспечивает эффективное управление переводами:

  • Хэширование MD5 создает уникальные отпечатки контента
  • Версионированные словари отслеживают изменения в директории lingo/
  • Интеграция с Git сохраняет историю переводов
  • Обработка дельт переводит только новый или измененный контент

Этот подход минимизирует затраты на перевод и обеспечивает согласованность между сборками.

4. Перевод с помощью ИИ

Перевод осуществляется с помощью моделей ИИ с учетом контекста:

  • Интеграция моделей ИИ обеспечивает быстрые и качественные переводы через Lingo.dev Engine или одного из поддерживаемых поставщиков LLM
  • Контекстные границы помогают ИИ понимать взаимосвязи компонентов
  • Единая терминология по всему вашему приложению
  • Пакетная обработка для оптимальной производительности

Компилятор отправляет контекстную информацию, чтобы гарантировать, что переводы естественно вписываются в ваши UI-компоненты.

5. Внедрение кода

Переводы внедряются обратно в вашу сборку без изменения исходных файлов:

  • Обработка на этапе сборки создаёт локализованные версии
  • Интеграция с фреймворками работает с Next.js, Vite и React Router
  • Оптимизированные сборки с загрузкой словарей для каждой локали
  • Эффективность выполнения благодаря предварительно скомпилированным переводам

Результат — готовые к продакшену многоязычные React-приложения с минимальной нагрузкой во время выполнения.

Интеграция с фреймворками

Next.js App Router

Компилятор интегрируется с Next.js через систему конфигурации:

// next.config.js
export default lingoCompiler.next(config)(nextConfig);
  • Серверные компоненты обрабатываются на этапе сборки
  • Клиентские компоненты получают оптимизированные пакеты переводов
  • Автоматическая маршрутизация поддерживает URL-адреса на основе локалей

React Router / Remix

Интеграция через архитектуру плагинов Vite:

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • Серверный рендеринг с предварительно загруженными словарями
  • Гидратация на стороне клиента сохраняет состояние переводов
  • Разделение кода по маршрутам включает пакеты переводов

Vite

Прямая интеграция с плагином Vite:

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • Горячая замена модулей обновляет переводы во время разработки
  • Оптимизация сборки создаёт минимальные продакшен-пакеты
  • Обработка ресурсов эффективно управляет файлами переводов

Рабочий процесс разработки

  1. Пишите React-компоненты, используя текст на естественном языке
  2. Запустите сервер разработки — компилятор извлекает и переводит контент
  3. Проверьте переводы в сгенерированном каталоге lingo/
  4. Закоммитьте файлы переводов в систему контроля версий
  5. Разверните с встроенной поддержкой многоязычности

Преимущества в продакшене

  • Нулевая стоимость выполнения — переводы предварительно скомпилированы
  • Оптимальные размеры пакетов — включаются только используемые переводы
  • SEO-дружественность — корректный рендеринг для каждой локали
  • Единообразный UX — профессиональное качество переводов

Компилятор создаёт продакшен-приложения, которые ощущаются как нативно разработанные для каждого поддерживаемого языка, сохраняя ваш исходный рабочий процесс разработки.

Провайдеры LLM

Вариант 1. Движок Lingo.dev

Компилятор Lingo.dev может использовать Движок Lingo.dev в качестве вашего AI-движка для перевода.

Он предоставляет динамический выбор моделей, автоматическую маршрутизацию к различным моделям для каждой языковой пары, автоматические резервные модели, память переводов, учитывающую предыдущие переводы, и поддержку глоссариев для терминологии, специфичной для вашего проекта. Доступны как бесплатные, так и платные варианты, и бесплатного уровня Hobby должно быть достаточно для большинства проектов.

Для аутентификации выполните команду:

npx lingo.dev@latest login

Настройте Движок Lingo.dev как вашего провайдера, например, для Next.js:

lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: "lingo.dev",
})(nextConfig);

Важная деталь. Если вы используете браузер Brave или ваши расширения браузера блокируют процесс аутентификации, вы можете вручную аутентифицироваться, добавив переменную окружения LINGODOTDEV_API_KEY в ваш файл .env:

LINGODOTDEV_API_KEY=...

Вариант 2. Альтернативные провайдеры LLM

Компилятор поддерживает следующие провайдеры LLM:

Вам нужно создать учетную запись и получить API-ключ у выбранного провайдера LLM для настройки.

Примечание: Убедитесь, что вы активировали свою учетную запись у провайдера LLM и приняли их Условия использования перед тем, как использовать его в Компиляторе. Провайдер LLM может запретить вам использовать их платформу, пока вы не выполните все шаги. Шаги могут различаться для каждого провайдера LLM.

Настройте выбранного провайдера LLM, например, чтобы использовать Groq в приложении Next.js:

lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: {
    "*:*": "groq:qwen/qwen3-32b", // GROQ
    // "*:*": "google:gemini-2.0-flash", // Google AI
    // "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // OpenRouter
    // "*:*": "ollama:mistral-small3.1", // Ollama
    // "*:*": "mistral:mistral-small-latest", // Mistral
  },
})(nextConfig);

Добавьте ваш API-ключ для настроенного провайдера LLM в переменные окружения:


# .env

GROQ_API_KEY=gsk_...
GOOGLE_API_KEY=...
OPENROUTER_API_KEY=...
MISTRAL_API_KEY=...

Мы будем рады поддерживать больше LLM - свяжитесь с нами или отправьте pull request!

Следующие шаги