クイックスタート - Lingo.dev Compiler

Lingo.dev コンパイラーは、既存のReactコンポーネントを変更することなく、ビルド時に任意のReactアプリを多言語対応にするように設計されています。

このクイックスタートガイドでは、5分以内にReactアプリに多言語サポートを追加する方法をご案内します。

このガイドを完了すると、以下のことが実現します：

ReactアプリにLingo.devコンパイラーをインストールして設定する
自動翻訳抽出と注入のセットアップ
最適化された翻訳を備えた多言語アプリの実現

始めましょう！

前提条件

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エンジン
  // models: {
  //   "*:*": "groq:mistral-saba-24b", // オプション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エンジン
    // models: {
    //   "*:*": "groq:mistral-saba-24b", // オプション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
    // },
  })(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エンジン
    // models: {
    //   "*:*": "groq:mistral-saba-24b", // オプション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エンジン

Lingo.dev Compilerは、AIトランスレーションエンジンとしてLingo.dev Engineを使用することができます。

これは動的モデル選択、各言語ペアに対する異なるモデルへの自動ルーティング、自動モデルフォールバック、過去の翻訳を考慮する翻訳メモリ、およびプロジェクトのドメイン固有の用語集のサポートを提供します。無料と有料のオプションがあり、無料のHobbyティアはほとんどのプロジェクトに十分です。

認証するには、次のコマンドを実行してください：

npx lingo.dev@latest login

重要な詳細。Braveブラウザを使用している場合、またはブラウザ拡張機能が認証フローをブロックしている場合は、.envファイルにLINGODOTDEV_API_KEY環境変数を追加して手動で認証することができます：

LINGODOTDEV_API_KEY=...

トークンはLingo.dev Engineのプロジェクト設定で見つけることができます。

オプション2. 代替LLMプロバイダー

あるいは、サポートされているLLMプロバイダーのいずれかからモデルを使用することもできます：

設定したLLMプロバイダーのAPIキーを環境に追加してください：


# .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コンポーネントをスキャン
翻訳キーを抽出
AIを使用して翻訳を生成
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
仕組み: ビルド時処理の理解
高度な設定: カスタマイズオプション