React Router / Remix 統合

Lingo.dev コンパイラーはReact Routerおよび最新のRemix（現在はReact Router v7）とシームレスに連携し、ビルド時のローカリゼーションを提供します。

以下の手順に従って、React RouterまたはRemixアプリケーションに多言語サポートを追加しましょう。

または、React Router / Remixデモプロジェクトを探索して、コンパイラーの実際の動作を試してみてください。

前提条件

React Router v6+ または Remix
ビルドツールとして Vite
React 18+
Node.js 18以上

ステップ1. パッケージのインストール

lingo.devパッケージをインストールします：

npm install lingo.dev

ステップ2. Viteの設定

コンパイラをインポートしてvite.config.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. 認証の設定

groq.comで無料アカウントを作成し、APIキーを追加します：


# .env

GROQ_API_KEY=gsk_...

ステップ4. プロバイダーの追加

React Router向け

ルートコンポーネント（app/root.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）でプロバイダーをインポートします：

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. オプション: ロケールスイッチャーの追加

言語切り替えコンポーネントを作成します：

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

コンパイラーは自動的に以下を実行します：

Reactコンポーネントから翻訳可能なコンテンツをスキャン
翻訳キーを抽出
AI駆動の翻訳を生成
lingo/ディレクトリに最適化された翻訳ファイルを作成

http://localhost:5173にアクセスして、多言語アプリケーションの動作を確認してください。

設定オプション

コンパイラーの動作をカスタマイズできます：

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

サーバーサイドレンダリング

コンパイラーはクライアントサイドとサーバーサイドの両方のレンダリングに対応しています：

クライアントコンポーネント

// src/components/Welcome.tsx
export function Welcome() {
  return (
    <div>
      <h1>Welcome to our app</h1>
      <p>This content is automatically translated</p>
    </div>
  );
}

ルートコンポーネント

// app/routes/about.tsx
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Learn more about our company</p>
    </div>
  );
}

本番環境へのデプロイ

アプリケーションをビルドする：
```
npm run build
```

翻訳ファイルをコミットする：

git add lingo/
git commit -m "Add translations"

お好みのプラットフォームを使用してデプロイする

React RouterまたはRemixアプリは、ユーザー設定またはURLパターンに基づいて自動的にローカライズされたコンテンツを提供します。