Быстрый старт - Lingo.dev Compiler

Lingo.dev Compiler создан для того, чтобы сделать любое React-приложение многоязычным на этапе сборки без необходимости вносить изменения в существующие React-компоненты.

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

После завершения этого руководства вы сможете:

Установить и настроить Lingo.dev Compiler в вашем React-приложении
Настроить автоматическое извлечение и внедрение переводов
Получить работающее многоязычное приложение с оптимизированными переводами

Начнем!

Предварительные требования

Lingo.dev Compiler работает с современными React-фреймворками. Перед началом убедитесь, что у вас есть одна из поддерживаемых конфигураций:

Next.js (App Router)
React Router / Remix
Vite + React

Или изучите наши демонстрационные приложения: Next.js, React Router и Vite.

Шаг 1. Установите пакет

Установите пакет lingo.dev в ваш проект:

npm install lingo.dev

Шаг 2. Настройте ваш фреймворк

Выберите ваш фреймворк и следуйте конкретным инструкциям по настройке:

Next.js

Обновите ваш next.config.js:

import lingoCompiler from "lingo.dev/compiler";

export default lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: "lingo.dev", // Вариант 1: Lingo.dev Engine
  // models: {
  //   "*:*": "groq:qwen/qwen3-32b", // Вариант 2: GROQ
  //   "*:*": "google:gemini-2.0-flash", // Вариант 2: Google AI
  //   "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // Вариант 2: OpenRouter
  //   "*:*": "ollama:mistral-small3.1", // Вариант 2: Ollama
  //   "*:*": "mistral:mistral-small-latest", // Mistral
  // },
})(nextConfig);

React Router / Remix

Обновите ваш vite.config.ts:

import lingoCompiler from "lingo.dev/compiler";

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    targetLocales: ["es", "fr", "de"],
    models: "lingo.dev", // Вариант 1: Lingo.dev Engine
    // models: {
    //   "*:*": "groq:qwen/qwen3-32b", // Вариант 2: GROQ
    //   "*:*": "google:gemini-2.0-flash", // Вариант 2: Google AI
    //   "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // Вариант 2: OpenRouter
    //   "*:*": "ollama:mistral-small3.1", // Вариант 2: Ollama
    //   "*:*": "mistral:mistral-small-latest", // Mistral
    // },
  })(viteConfig),
);

Vite

Обновите ваш vite.config.ts:

import lingoCompiler from "lingo.dev/compiler";

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    targetLocales: ["es", "fr", "de"],
    models: "lingo.dev", // Вариант 1: Lingo.dev Engine
    // models: {
    //   "*:*": "groq:qwen/qwen3-32b", // Вариант 2: GROQ
    //   "*:*": "google:gemini-2.0-flash", // Вариант 2: Google AI
    //   "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // Вариант 2: OpenRouter
    //   "*:*": "ollama:mistral-small3.1", // Вариант 2: Ollama
    //   "*:*": "mistral:mistral-small-latest", // Mistral
    // },
  })(viteConfig),
);

Шаг 3. Настройка аутентификации

Lingo.dev Compiler отправляет ваш контент в AI-движки для локализации, поэтому сначала необходимо выполнить аутентификацию.

Вариант 1. Lingo.dev Engine

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

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

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

npx lingo.dev@latest login

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

LINGODOTDEV_API_KEY=...

Вы найдете токен в настройках проекта Lingo.dev Engine.

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

Кроме того, вы можете использовать модели от одного из поддерживаемых поставщиков LLM:

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


# .env

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

Примечание: Перед использованием в Compiler убедитесь, что вы активировали свою учетную запись у поставщика LLM и приняли их Условия использования.

Шаг 4. Добавьте провайдера

Обертайте ваше приложение с помощью LingoProvider, чтобы включить переводы:

Next.js

В вашем layout.tsx:

import { LingoProvider, loadDictionary } from "lingo.dev/react/rsc";

export default function Layout({ children }) {
  return (
    <LingoProvider loadDictionary={(locale) => loadDictionary(locale)}>
      <html>
        <body>{children}</body>
      </html>
    </LingoProvider>
  );
}

React Router / Remix

В вашем root.tsx:

import { LingoProvider } from "lingo.dev/react/client";
import { loadDictionary } from "lingo.dev/react/react-router";

export async function loader(args) {
  return { lingoDictionary: await loadDictionary(args.request) };
}

export default function Root() {
  const { lingoDictionary } = useLoaderData();
  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <body>
          <Outlet />
        </body>
      </html>
    </LingoProvider>
  );
}

Vite

В вашем main.tsx:

import { LingoProviderWrapper, loadDictionary } from "lingo.dev/react/client";

ReactDOM.createRoot(document.getElementById("root")).render(
  <LingoProviderWrapper loadDictionary={(locale) => loadDictionary(locale)}>
    <App />
  </LingoProviderWrapper>,
);

Шаг 5. Сборка и тестирование

Запустите сервер разработки:

npm run dev

Компилятор автоматически:

Сканирует ваши React-компоненты на наличие текста для перевода
Извлекает ключи переводов
Генерирует переводы с помощью ИИ
Создает оптимизированные файлы переводов в директории lingo/

Теперь ваше приложение многоязычное! Компилятор создает версионированные словари, которые отслеживают изменения контента и повторно переводят только измененный контент.

Дополнительно: Добавьте переключатель языка

Добавьте переключатель языка, чтобы пользователи могли менять языки:

import { LocaleSwitcher } from "lingo.dev/react/client";

export function Header() {
  return (
    <header>
      <LocaleSwitcher locales={["en", "es", "fr", "de"]} />
    </header>
  );
}

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

Руководства для конкретных фреймворков: Next.js, React Router, Vite
Как это работает: Понимание обработки на этапе сборки
Расширенная конфигурация: Варианты настройки