Настройка

Альфа

Lingo.dev Compiler находится в альфа-версии. Он нестабилен, не рекомендуется для использования в production, а API могут меняться от релиза к релизу.

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

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

Node.js 18+ и React-приложение на Next.js (App Router) или Vite.

Установка#

bash

pnpm install @lingo.dev/compiler

Настройте фреймворк#

Сделайте конфигурацию асинхронной и оберните её в withLingo:

// next.config.ts
import type { NextConfig } from "next";
import { withLingo } from "@lingo.dev/compiler/next";

const nextConfig: NextConfig = {};

export default async function (): Promise<NextConfig> {
  return await withLingo(nextConfig, {
    sourceRoot: "./app",
    sourceLocale: "en",
    targetLocales: ["es", "de", "fr"],
    models: "lingo.dev",
    dev: {
      usePseudotranslator: true,
    },
  });
}

Добавьте LingoProvider#

tsx

// app/layout.tsx
import { LingoProvider } from "@lingo.dev/compiler/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <LingoProvider>
      <html>
        <body>{children}</body>
      </html>
    </LingoProvider>
  );
}

Аутентификация#

bash

npx lingo.dev@latest login

Откроется браузер для аутентификации. Бесплатный тариф Hobby подходит для большинства проектов.

Если аутентификация через браузер недоступна, добавьте ключ в .env вручную:

bash

LINGODOTDEV_API_KEY=your_key_here

Запустите dev-сервер#

bash

npm run dev

Compiler сканирует ваш JSX, генерирует псевдопереводы (мгновенные тестовые переводы, чтобы увидеть, что будет переведено) и внедряет их в компоненты. Метаданные сохраняются в .lingo/metadata.json — добавьте этот файл в систему контроля версий.

Добавьте переключатель языка (необязательно)#

tsx

"use client"; // For Next.js

import { useLingoContext } from "@lingo.dev/compiler/react";

export function LanguageSwitcher() {
  const { locale, setLocale } = useLingoContext();

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      <option value="en">English</option>
      <option value="es">Espanol</option>
      <option value="de">Deutsch</option>
    </select>
  );
}

Сгенерируйте реальные переводы#

Когда будете готовы, отключите pseudotranslator:

{
  dev: {
    usePseudotranslator: false,
  }
}

Перезапустите dev-сервер. Compiler сгенерирует реальные AI-переводы для нового или изменённого текста.

Что дальше#

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

Пайплайн преобразований на этапе сборки

Next.js

Настройка и Возможности для Next.js

Vite + React

Настройка и Возможности для Vite

Справочник по Конфигурации

Все параметры конфигурации

Эта страница была полезной?

Альфа

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

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

Node.js 18+ и React-приложение на Next.js (App Router) или Vite.

Установка#

bash

pnpm install @lingo.dev/compiler

Настройте фреймворк#

Сделайте конфигурацию асинхронной и оберните её в withLingo:

// next.config.ts
import type { NextConfig } from "next";
import { withLingo } from "@lingo.dev/compiler/next";

const nextConfig: NextConfig = {};

export default async function (): Promise<NextConfig> {
  return await withLingo(nextConfig, {
    sourceRoot: "./app",
    sourceLocale: "en",
    targetLocales: ["es", "de", "fr"],
    models: "lingo.dev",
    dev: {
      usePseudotranslator: true,
    },
  });
}

Добавьте LingoProvider#

tsx

// app/layout.tsx
import { LingoProvider } from "@lingo.dev/compiler/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <LingoProvider>
      <html>
        <body>{children}</body>
      </html>
    </LingoProvider>
  );
}

Аутентификация#

bash

npx lingo.dev@latest login

Откроется браузер для аутентификации. Бесплатный тариф Hobby подходит для большинства проектов.

Если аутентификация через браузер недоступна, добавьте ключ в .env вручную:

bash

LINGODOTDEV_API_KEY=your_key_here

Запустите dev-сервер#

bash

npm run dev

Добавьте переключатель языка (необязательно)#

tsx

"use client"; // For Next.js

import { useLingoContext } from "@lingo.dev/compiler/react";

export function LanguageSwitcher() {
  const { locale, setLocale } = useLingoContext();

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      <option value="en">English</option>
      <option value="es">Espanol</option>
      <option value="de">Deutsch</option>
    </select>
  );
}

Сгенерируйте реальные переводы#

Когда будете готовы, отключите pseudotranslator:

{
  dev: {
    usePseudotranslator: false,
  }
}

Перезапустите dev-сервер. Compiler сгенерирует реальные AI-переводы для нового или изменённого текста.

Что дальше#

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

Пайплайн преобразований на этапе сборки

Next.js

Настройка и Возможности для Next.js

Vite + React

Настройка и Возможности для Vite

Справочник по Конфигурации

Все параметры конфигурации