クイックスタート

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

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

このガイドを完了すると、以下のことができるようになります：

  1. ReactアプリにLingo.dev コンパイラーをインストールして設定する
  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 コンパイラーはAI駆動の翻訳に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. AIを使用して翻訳を生成
  4. lingo/ディレクトリに最適化された翻訳ファイルを作成

これでアプリは多言語対応になりました！コンパイラはコンテンツの変更を追跡するバージョン管理された辞書を作成し、変更されたコンテンツのみを再翻訳します。

オプション：言語切替機能の追加

ユーザーが言語を変更できるように言語切替機能を追加します：

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

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

次のステップ