クイックスタート

5分以内でReactアプリに多言語サポートを追加できます。

前提条件

  • Node.js 18以上
  • Next.js（App Router）またはViteを使用したReactアプリケーション

インストール

pnpm install @lingo.dev/compiler

設定

Next.js

設定を非同期にし、withLingoでラップします。

// next.config.ts
import type { NextConfig } from "next";
import { withLingo } from "@lingo.dev/compiler/next";

const nextConfig: NextConfig = {};

export default async function (): Promise<NextConfig> {
  return await withLingo(nextConfig, {
    sourceRoot: "./app",
    sourceLocale: "en",
    targetLocales: ["es", "de", "fr"],
    models: "lingo.dev",
    dev: {
      usePseudotranslator: true, // Fake translations for development
    },
  });
}

Vite

ViteのconfigにLingoプラグインを追加します。

// vite.config.ts
import { defineConfig } from "vite";
import { lingoCompilerPlugin } from "@lingo.dev/compiler/vite";

export default defineConfig({
  plugins: [
    lingoCompilerPlugin({
      sourceRoot: "src",
      sourceLocale: "en",
      targetLocales: ["es", "de", "fr"],
      models: "lingo.dev",
      dev: {
        usePseudotranslator: true,
      },
    }),
    // ...other plugins
  ],
});

プロバイダーの設定

Next.js

ルートレイアウトでLingoProviderを使用してアプリをラップします。

// app/layout.tsx
import { LingoProvider } from "@lingo.dev/compiler/react";

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

Vite

エントリーポイントでLingoProviderを使用してアプリをラップします。

// src/main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { LingoProvider } from "@lingo.dev/compiler/react";
import App from "./App";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <LingoProvider>
      <App />
    </LingoProvider>
  </StrictMode>
);

認証

コンパイラはデフォルトでLingo.dev Engineを翻訳に使用します。

オプション1: Lingo.dev Engine（推奨）

lingo.devでサインアップし、認証を行います。

{/* CODE_PLACEHOLDER_3616742fc33230e2a9c1b99c2fb73b99 */

Windowsユーザーの方へ: npx lingo.devがお使いの環境で動作しない場合:

  1. パッケージをインストールしてください: npm install lingo.dev@latest
  2. 代わりにnpx lingoを使用してください(例: npx lingo login)

これによりAPIキーがローカルに保存されます。無料のHobbyプランは、ほとんどのプロジェクトに十分です。

認証に問題がありますか? ブラウザが認証フローをブロックしている場合は、.envに手動でAPIキーを追加してください:

LINGODOTDEV_API_KEY=your_key_here

APIキーはLingo.devプロジェクト設定で確認できます。

オプション2: 直接LLMプロバイダー

または、サポートされている任意のLLMプロバイダーを直接使用することもできます。設定を更新してください:

{
  models: {
    "*:*": "groq:llama-3.3-70b-versatile",
    // or "google:gemini-2.0-flash"
    // or "openai:gpt-4o"
    // or "anthropic:claude-3-5-sonnet"
  }
}

対応するAPIキーを.envに追加してください:

GROQ_API_KEY=your_key
# or GOOGLE_API_KEY, OPENAI_API_KEY, ANTHROPIC_API_KEY

サポートされているすべてのプロバイダーについては、翻訳プロバイダーを参照してください。

開発サーバーの実行

開発サーバーを起動してください:

npm run dev

コンパイラは以下を実行します:

  1. JSX内の翻訳可能なテキストをスキャン
  2. 疑似翻訳を生成(翻訳対象を視覚化するための仮の翻訳)
  3. コンポーネントに注入
  4. メタデータを.lingo/metadata.jsonに保存

なぜ疑似翻訳なのか? 即座に生成され(API呼び出し不要)、翻訳対象を正確に表示し、さまざまなテキスト長でUIをテストできます。しかもAPIクレジットを消費しません。

翻訳のテスト

シンプルなコンポーネントを追加してください:

export function Welcome() {
  return (
    <div>
      <h1>Welcome to our app</h1>
      <p>This text will be translated automatically</p>
    </div>
  );
}

コード変更は不要です。テキストは自動的に抽出され、翻訳されます。

言語切り替え機能の追加(オプション)

ユーザーが言語を変更できるようにします:

"use client"; // For Next.js

import { useLingoContext } from "@lingo.dev/compiler/react";

export function LanguageSwitcher() {
  const { locale, setLocale } = useLingoContext();

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      <option value="en">English</option>
      <option value="es">Español</option>
      <option value="de">Deutsch</option>
      <option value="fr">Français</option>
    </select>
  );
}

実際の翻訳の生成

実際の翻訳の準備ができたら、設定を更新してください:

{
  dev: {
    usePseudotranslator: false, // Disable fake translations
  }
}

開発サーバーを再起動してください。コンパイラは、新規または変更されたテキストに対して実際のAI翻訳を生成するようになります。

コストを抑えたい場合は？ 疑似翻訳は無料で即座に生成されます。実際の翻訳品質を確認する必要がある場合にのみ無効にしてください。

よくある質問

翻訳可能な文字列をすべてマークする必要がありますか？ いいえ。コンパイラはJSXテキストを自動的に検出します。オプトイン方式にする場合は、useDirective: trueを設定し、翻訳したいファイルの先頭に'use i18n'を追加してください。

動的コンテンツやpropsについてはどうですか？ コンパイラはalt、aria-label、placeholderなどの文字列属性を自動的に処理します。動的テキストの場合は、テンプレート構文を使用してください：<p>Hello {name}</p>は期待通りに動作します。

特定の翻訳をカスタマイズできますか？ はい。data-lingo-override属性を使用してください：

<h1 data-lingo-override={{ es: "Bienvenido", de: "Willkommen" }}>
  Welcome
</h1>

翻訳をコミットするにはどうすればよいですか？ .lingo/ディレクトリをバージョン管理にコミットしてください。メタデータとキャッシュされた翻訳が含まれており、コミットしても安全で、コードと一緒にバージョン管理すべきです。

次のステップ