コンテンツにスキップ

クイックスタート

Tyndale をインストール
Terminal window
```
npm install tyndale tyndale-react
```
プロジェクトを初期化
Terminal window
```
npx tyndale init
```
これにより、デフォルト設定を含む tyndale.config.json が作成されます。
AI プロバイダーで認証
Terminal window
```
npx tyndale auth
```
プロンプトに従って API キー（Anthropic、OpenAI など）を設定してください。

翻訳対象コンテンツをラップ

import { T, useTranslation } from 'tyndale-react';

export function Welcome() {
  const t = useTranslation();
  return (
    <div>
      <T>Welcome to our app!</T>
      <p>{t('You have {count} items', { count: 3 })}</p>
    </div>
  );
}

抽出して翻訳
Terminal window
```
npx tyndale translate
```
Tyndale はソースファイルをスキャンし、翻訳対象文字列を抽出して、設定されたすべてのロケール向けの翻訳を生成します。

何が起こったのでしょうか？

Tyndale は JSX 内の <T> コンポーネントと useTranslation() 呼び出しをスキャンし、英語のソーステキストを抽出して、翻訳のために AI プロバイダーへ送信し、output ディレクトリにロケールファイルを書き出しました。

キーファイルは不要です。JSON を手動で編集する必要もありません。翻訳はすぐに使えます。

次のステップ

プロジェクトを設定する — ロケール、AI モデル、出力ディレクトリ
Next.js をセットアップする — middleware、providers、静的生成
React API を学ぶ — すべてのコンポーネントとフック