---
title: Как это работает
---

**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](/compiler/how-it-works#llm-providers)
- **Контекстные границы** помогают ИИ понимать взаимосвязи компонентов
- **Единая терминология** по всему вашему приложению
- **Пакетная обработка** для оптимальной производительности

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

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

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

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

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

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

### Next.js App Router

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

```js
// next.config.js
export default lingoCompiler.next(config)(nextConfig);
```

- **Серверные компоненты** обрабатываются на этапе сборки
- **Клиентские компоненты** получают оптимизированные пакеты переводов
- **Автоматическая маршрутизация** поддерживает URL-адреса на основе локалей

### React Router / Remix

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

```js
// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
```

- **Серверный рендеринг** с предварительно загруженными словарями
- **Гидратация на стороне клиента** сохраняет состояние переводов
- **Разделение кода по маршрутам** включает пакеты переводов

### Vite

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

```js
// 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 должно быть достаточно для большинства проектов.

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

```bash
npx lingo.dev@latest login
```

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

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

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

```bash
LINGODOTDEV_API_KEY=...
```

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

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

- [GROQ](https://groq.com/) и их [модели](https://console.groq.com/docs/models),
- [Google AI](https://aistudio.google.com/) и их [модели](https://ai.google.dev/gemini-api/docs/models),
- [OpenRouter](https://openrouter.ai/) и их [модели](https://openrouter.ai/models),
- [Ollama](https://ollama.com/) и их [модели](https://ollama.com/library).
- [Mistral](https://mistral.ai/) и их [модели](https://docs.mistral.ai/getting-started/models/models_overview/).

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

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

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

```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 в переменные окружения:

```bash

# .env

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

Мы будем рады поддерживать больше LLM - [свяжитесь с нами](https://lingo.dev/go/discord) или [отправьте pull request](https://github.com/lingodotdev/lingo.dev/)!

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

- **Интеграция с фреймворками**: [Next.js](/compiler/frameworks/nextjs-app-router), [React Router](/compiler/frameworks/react-router-v6), [Vite](/compiler/frameworks/vite-react-ts)
- **Расширенная конфигурация**: [Варианты настройки](/compiler/configuration/advanced)
- **Часто задаваемые вопросы**: [Общие вопросы и устранение неполадок](/compiler/guides/faq)
