Lingo.dev コンパイラ

Lingo.dev コンパイラは、コンポーネントを変更することなくReactアプリケーションを多言語化する、無料のオープンソースビルド時翻訳システムです。

コンパイラの動作を確認するには、こちらのライブデモをご覧ください: https://x.com/MaxPrilutskiy/status/1929946504216932746

クイックサンプル

コンパイラ追加前:

export function Welcome() {
  return <h1>Welcome to our app</h1>;
}

コンパイラ追加後(コード変更不要):

// Same code - translations injected automatically at build time
export function Welcome() {
  return <h1>Welcome to our app</h1>;
}
// Renders "Bienvenido a nuestra aplicación" in Spanish

仕組み

コンパイラはJSX内の翻訳可能なテキストを自動的に検出し、AI駆動の翻訳を生成して、ビルド時に注入します。ソースコードは変更されず、翻訳はビルドプロセス中に透過的に行われます。

主要原則: 翻訳はコンパイル時に決定され、必要な翻訳のみを含む最適化されたバンドルが作成されます。これにより、読み込み時間の短縮、バンドルサイズの削減、SEOの向上が実現します。

他との違い

ランタイム翻訳ライブラリ(i18next、react-intl)とは異なり、Lingo.dev コンパイラは:

  • ランタイムではなくビルド時に動作
  • 手動での翻訳キー管理が不要
  • AIを使用して翻訳を自動生成
  • ランタイムオーバーヘッドがゼロ
  • Reactコードをクリーンに保つ — t()関数呼び出しが不要

主な機能

  • デフォルトで自動 - "use i18n"ディレクティブは不要(オプトイン動作が必要な場合はオプション)
  • ランタイムオーバーヘッドゼロ - 翻訳はビルドに事前コンパイル
  • ビルドモード - 開発環境では疑似翻訳、CI環境では実際の翻訳、本番環境ではキャッシュのみを使用
  • 型安全 - 自動型生成による完全なTypeScriptサポート
  • 手動オーバーライド - data-lingo-override属性を使用して特定の翻訳を正確に制御
  • カスタムロケールリゾルバ - 独自のロケール検出と永続化ロジックを実装
  • 自動複数形化 - 複数形のICU MessageFormatサポート
  • 開発ウィジェット - リアルタイム編集のためのブラウザ内翻訳エディタ

サポートされているフレームワーク

  • Next.js（React Server ComponentsによるApp Router）
  • Vite + React（SPAおよびSSR）

その他のフレームワークも近日対応予定です。

よくある質問

本番環境でAPIキーは必要ですか？ いいえ。本番環境ではbuildMode: "cache-only"を使用してください。翻訳はCI内で事前生成されるため、API呼び出しは不要です。

翻訳対象のファイルを制御できますか？ はい。useDirective: trueを設定することで、翻訳したいファイルの先頭に'use i18n'ディレクティブを必須にできます。デフォルトは自動（すべてのファイル）です。

AI翻訳が間違っている場合はどうすればよいですか？ data-lingo-override属性を使用して、特定のロケールに対する正確な翻訳を指定できます。任意のJSX要素で使用可能です。

API呼び出しなしでテストするにはどうすればよいですか？ 開発環境でusePseudotranslator: trueを有効にすると、偽の翻訳が即座に生成されるため、APIコストをかけずに翻訳内容を確認できます。

次のステップ