Интеграция с Next.js

Компилятор Lingo.dev легко интегрируется с маршрутизатором приложений Next.js, обеспечивая локализацию на этапе сборки без необходимости изменения ваших React-компонентов.

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

Или изучите демо-проект Next.js, чтобы попробовать Компилятор в действии.

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

  • Next.js 13+ с маршрутизатором приложений
  • React 18+
  • Node.js 18 или выше

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

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

npm install lingo.dev

Шаг 2. Настройте Next.js

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

import lingoCompiler from "lingo.dev/compiler";

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Ваша существующая конфигурация Next.js
};

export default lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
})(nextConfig);

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

Создайте бесплатный аккаунт на groq.com и добавьте ваш API-ключ:


# .env.local

GROQ_API_KEY=gsk_...

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

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

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

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

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

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

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

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

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

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

npm run dev

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

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

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

Параметры конфигурации

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

export default lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de", "ja"],
  sourceRoot: "app", // По умолчанию для Next.js
  lingoDir: "lingo", // Директория файлов перевода
  rsc: true, // Включить поддержку React Server Components
  debug: false, // Включить отладочный лог
})(nextConfig);

Серверные и клиентские компоненты

Компилятор Lingo.dev работает как с серверными, так и с клиентскими компонентами:

Серверные компоненты

Серверные компоненты обрабатываются на этапе сборки с полной поддержкой перевода:

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

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

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

"use client";

import { useState } from "react";

export function InteractiveComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы нажали {count} раз(а)</p>
      <button onClick={() => setCount(count + 1)}>Нажмите меня</button>
    </div>
  );
}

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

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

    npm run build

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

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

  3. Разверните приложение, используя предпочитаемую платформу (Vercel, Netlify и т.д.)

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

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