Интеграция с React Router / Remix

Lingo.dev Compiler безупречно работает с React Router и последней версией Remix (которая теперь является React Router v7), обеспечивая локализацию на этапе сборки.

Следуйте этим шагам, чтобы добавить поддержку нескольких языков в ваше приложение на React Router или Remix.

Или изучите демо-проект React Router / Remix, чтобы увидеть Compiler в действии.

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

  • React Router v6+ или Remix
  • Vite в качестве инструмента сборки
  • React 18+
  • Node.js 18 или выше

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

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

bash npm install lingo.dev


## Шаг 2. Настройте Vite

Импортируйте и настройте компилятор в вашем `vite.config.ts`:

```ts
import { defineConfig } from "vite";
import lingoCompiler from "lingo.dev/compiler";

const viteConfig = {
  // Ваша существующая конфигурация Vite
};

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

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

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

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

Lingo.dev Compiler может использовать **Lingo.dev Engine** в качестве вашего AI-движка перевода. Он предоставляет динамический выбор моделей, авто-маршрутизацию, память переводов и поддержку глоссария. Доступны бесплатные и платные варианты.

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

bash
npx lingo.dev@latest login
```

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

```bash

# .env

LINGODOTDEV_API_KEY=...
```

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

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

В качестве альтернативы вы можете использовать модели от поддерживаемых провайдеров LLM:

- [GROQ](https://groq.com/)
- [Google AI](https://aistudio.google.com/)
- [OpenRouter](https://openrouter.ai/)
- [Ollama](https://ollama.com/)

Добавьте ваш API-ключ(и) в файл `.env`:

```bash

# .env

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

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

## Шаг 4. Добавление провайдера

### Для React Router

Импортируйте провайдер в вашем корневом компоненте (`app/root.tsx`):

```tsx
import { LingoProvider } from "lingo.dev/react/client";
import { loadDictionary } from "lingo.dev/react/react-router";
import type { LoaderFunctionArgs } from "react-router";
import { useLoaderData } from "react-router";

// Для React Router с загрузчиками данных
export async function loader(args: LoaderFunctionArgs) {
  return {
    lingoDictionary: await loadDictionary(args.request),
  };
}

export default function Root() {
  const { lingoDictionary } = useLoaderData<typeof loader>();

  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <body>
          <Outlet />
        </body>
      </html>
    </LingoProvider>
  );
}
```

### Для Remix

Импортируйте провайдер в вашем корневом маршруте (`app/root.tsx`):

```tsx
import { LingoProvider } from "lingo.dev/react/client";
import { loadDictionary } from "lingo.dev/react/react-router";
import type { LoaderFunctionArgs } from "react-router";
import { useLoaderData } from "react-router";

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

export default function App() {
  const { lingoDictionary } = useLoaderData<typeof loader>();

  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <head>
          <Meta />
          <Links />
        </head>
        <body>
          <Outlet />
          <ScrollRestoration />
          <Scripts />
        </body>
      </html>
    </LingoProvider>
  );
}
```

## Шаг 5. Необязательно: добавьте переключатель локалей

Создайте компонент переключателя языков:

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

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

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

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

```bash
npm run dev
```

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

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

Перейдите по адресу `http://localhost:5173`, чтобы увидеть ваш многоязычный приложение в действии.

## Настройки конфигурации

Вы можете настроить поведение компилятора:

```ts
export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    sourceLocale: "en",
    targetLocales: ["es", "fr", "de", "ja"],
    lingoDir: "lingo",
    debug: false,
  })(viteConfig),
);
```

## Серверный рендеринг

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

### Клиентские компоненты

```tsx
// src/components/Welcome.tsx
export function Welcome() {
  return (
    <div>
      <h1>Добро пожаловать в наше приложение</h1>
      <p>Этот контент переводится автоматически</p>
    </div>
  );
}
```

### Компоненты маршрутов

```tsx
// app/routes/about.tsx
export default function About() {
  return (
    <div>
      <h1>О нас</h1>
      <p>Узнайте больше о нашей компании</p>
    </div>
  );
}
```

## Развертывание в продакшн

1. **Соберите ваше приложение**:

   ```bash
   npm run build
   ```

2. **Закоммитьте файлы переводов**:

   ```bash
   git add lingo/
   git commit -m "Добавить переводы"
   ```

3. **Разверните** на вашей предпочтительной платформе

Ваше приложение на React Router или Remix будет автоматически предоставлять локализованный контент на основе предпочтений пользователя или шаблонов URL.

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

- **Расширенная конфигурация**: [Варианты настройки](../configuration/advanced)
- **Часто задаваемые вопросы**: [Общие вопросы и устранение неполадок](../guides/faq)
- **Как это работает**: [Понимание процесса сборки](../how-it-works)