Быстрый старт

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

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

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

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

Давайте начнем!

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

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: {
    "*:*": "groq:mistral-saba-24b",
  },
})(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: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

Vite

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

import lingoCompiler from "lingo.dev/compiler";

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    targetLocales: ["es", "fr", "de"],
    models: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

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

Lingo.dev Compiler использует GROQ для переводов с поддержкой ИИ. Создайте бесплатный аккаунт на groq.com и получите ваш API-ключ.

Добавьте ваш API-ключ в файл окружения:


# .env

GROQ_API_KEY=gsk_...

Шаг 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

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

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

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

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

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

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

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

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