クイックスタート

npm install @lingo.dev/react

Next.js を使っている場合は、@lingo.dev/react-next もあわせてインストールしてください。同じランタイムをベースに、ルーター対応のヘルパーが追加されます。

import { LingoProvider } from "@lingo.dev/react";
import esMessages from "./locales/es.json";

export function App() {
  return (
    <LingoProvider locale="es" messages={esMessages}>
      <Page />
    </LingoProvider>
  );
}

messages はコンテンツハッシュをキーにしたオブジェクトで、CLI が locales/<locale>.json に出力するものそのものです。初回実行時は空でも問題ありません。未翻訳の文字列は元のソーステキストがそのまま表示されます。

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

function Page() {
  const l = useLingo();
  return <h1>{l.text("Hello", { context: "Hero heading" })}</h1>;
}

l.text(source, { context }) が基本となる呼び出しです。context は必須で、英語では同じ表記でも他の言語では意味が分かれる文字列（動詞の "Save" と名詞の "Save" など）を翻訳者が正しく区別できるようにします。

lingo extract

ソースコードをスキャンし、"Hello" とコンテキストから安定したハッシュを計算して、ソースロケールファイル（デフォルトでは locales/en.jsonc）に書き出します。変更があれば都度再実行してください。抽出は冪等です。

lingo push --backfill-missing

CLI はソースファイルをアップロードし、エンジンに設定済みの対象ロケールへの翻訳を依頼し、その結果を locales/<locale>.json にダウンロードします。以後のプッシュでは、変更分だけが送信されます。

アプリが現在表示しているロケール用の JSON ファイルをインポートするか、ユーザーに応じて動的に選択し、それを LingoProvider に渡します。ステップ 3 のフック呼び出しはそのままで、l.text("Hello", ...) はダウンロード済みの内容とハッシュが一致するため、翻訳済みの値を返すようになります。