|Labs
デモを予約プラットフォーム
React (Lingo Compiler)
Alpha
React MCPReact (i18n)旧CLI(v0)
非推奨

Lingo.dev Compiler

  • 仕組み
  • セットアップ
  • Compiler クイックスタート

フレームワーク

  • Next.js 連携
  • Vite + React

ガイド

  • ロケールの切り替え
  • 自動複数形変換
  • 手動オーバーライド
  • ビルドモード
  • プロジェクト構成
  • 翻訳プロバイダー
  • カスタムロケールリゾルバー
  • 開発ツール

リファレンス

  • ベストプラクティス
  • 設定リファレンス
  • トラブルシューティング
  • 移行ガイド
  • 最適化
  • 出力形式

設定リファレンス

アルファ

Lingo.dev Compiler は現在アルファ版です。動作は安定しておらず、本番環境での利用は推奨されません。また、API はリリースごとに変更される可能性があります。

Lingo.dev Compiler の設定オブジェクトは、React アプリケーションをビルド時にどのように翻訳するかを制御します。このページでは、利用可能なすべてのオプションを、型、デフォルト値、使用例とあわせて紹介します。

コアオプション#

オプション型デフォルト説明
sourceRootstring"src"翻訳対象のコンポーネントが含まれるディレクトリ。プロジェクトルートからの相対パスです。
lingoDirstring".lingo"翻訳メタデータとキャッシュファイルを保存するディレクトリ。
sourceLocalestring必須ソースコンテンツの言語コード(例: "en")。
targetLocalesstring[]必須ターゲット言語コードの配列(例: ["es", "de", "fr"])。
useDirectivebooleanfalsetrue の場合は、'use i18n' ディレクティブが付いたファイルだけが翻訳対象になります。false の場合は、sourceRoot 配下のすべてのファイルが翻訳されます。
modelsstring | object"lingo.dev"翻訳プロバイダーの設定です。文字列を指定すると、すべてのロケールペアに共通のデフォルト値として使われます。オブジェクトを指定すると、ロケールペアごとに使用するプロバイダーを割り当てられます。
promptstringundefined翻訳用 LLM に渡すカスタムシステムプロンプトです。{SOURCE_LOCALE} と {TARGET_LOCALE} のプレースホルダーをサポートします。
buildMode"translate" | "cache-only""translate"Compiler が新しい翻訳を生成するか、キャッシュ済みの翻訳だけを使うかを制御します。

開発オプション#

dev キー配下のオプションでは、開発時の挙動を制御できます。

オプション型デフォルト説明
dev.usePseudotranslatorbooleanfalseLLM を呼び出す代わりに、すぐに疑似翻訳(例: [!!! Welcome !!!])を生成します。API キーは不要です。
dev.translationServerStartPortnumber60000ローカル翻訳サーバーの開始ポートです。Compiler は 60000〜60099 の範囲から利用可能なポートを自動で見つけます。
dev.translationServerUrlstringundefined翻訳サーバーの URL を上書きします。カスタム構成やリモート翻訳サーバーを使う場合に便利です。

ロケール保持#

localePersistence 配下のオプションでは、ユーザーが選択したロケールをどのように保存・取得するかを制御します。

オプション型デフォルト説明
localePersistence.typestring"cookie"保持の仕組みです。現在は "cookie" をサポートしています。
localePersistence.config.namestring"locale"ロケールの保存に使用する Cookie 名です。
localePersistence.config.maxAgenumber31536000Cookie の max-age を秒単位で指定します(デフォルトは1年)。

カスタムの保持ロジック(localStorage、URL ベース、ヘッダー)については、カスタムロケールリゾルバー をご覧ください。

複数形処理#

pluralization 配下のオプションでは、自動的な複数形の検出と生成を制御します。

オプション型デフォルト説明
pluralization.enabledbooleantrue自動複数形検出の有効・無効を切り替えます。
pluralization.modelstring"groq:llama-3.1-8b-instant"ソーステキスト内の複数形を検出するために使う LLM モデルです。検出は翻訳よりもシンプルなタスクのため、より小さく高速なモデルを推奨します。

複数形検出の仕組みについて詳しくは、自動複数形処理 をご覧ください。

環境変数#

環境変数を使うと、設定を上書きしたり補完したりできます。

変数必要になる場合説明
LINGO_BUILD_MODE任意buildMode 設定オプションを上書きします。"translate" または "cache-only" を設定してください。
LINGODOTDEV_API_KEY"lingo.dev" モデルを使用する場合Lingo.dev ローカライゼーションエンジンの API キーです。npx lingo.dev@latest login から取得できます。
OPENAI_API_KEY"openai:*" モデルを使用する場合OpenAI API キー。
ANTHROPIC_API_KEY"anthropic:*" モデルを使用する場合Anthropic API キー。
GOOGLE_API_KEY"google:*" モデルを使用する場合Google AI API キー。
GROQ_API_KEY"groq:*" モデルを使用する場合Groq API キー。
MISTRAL_API_KEY"mistral:*" モデルを使用する場合Mistral API キー。
OPENROUTER_API_KEY"openrouter:*" モデルを使用する場合OpenRouter API キー。

完全な例#

ts
// 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",
    lingoDir: ".lingo",
    sourceLocale: "en",
    targetLocales: ["es", "de", "fr", "ja"],
    useDirective: false,
    models: {
      "*:*": "lingo.dev",
      "*:ja": "anthropic:claude-3-5-sonnet",
    },
    prompt: "Translate UI text from {SOURCE_LOCALE} to {TARGET_LOCALE}. Keep it concise.",
    buildMode: "translate",
    dev: {
      usePseudotranslator: true,
      translationServerStartPort: 60000,
    },
    localePersistence: {
      type: "cookie",
      config: {
        name: "locale",
        maxAge: 31536000,
      },
    },
    pluralization: {
      enabled: true,
      model: "groq:llama-3.1-8b-instant",
    },
  });
}

次のステップ#

翻訳プロバイダー
サポートされているすべての LLM プロバイダーとロケールペアのマッピング
ビルドモード
開発、CI、本番環境でのワークフロー
カスタムロケールリゾルバー
カスタムのロケール検出を実装する
ベストプラクティス
本番運用に向けた推奨パターン

このページは役に立ちましたか?

Max PrilutskiyMax Prilutskiy·更新済み 4か月前·3分で読めます