ローカル翻訳

ローカル翻訳とは？

ローカル翻訳は、CDN（コンテンツ配信ネットワーク）から取得されるのではなく、アプリのバンドル内に保存されます。

例えば、gtx-cli translate コマンドをCDプロセスに追加したとします。これにより、アプリ用の翻訳がJSON形式で生成されます。最終ステップは、これらの翻訳をAPIから取得し、アプリ内に取り込んで利用できるようにすることです。

これを行う方法は2つあります：

デフォルトでは、gt-next はGeneral Translation CDNから翻訳を取得し、APIを使ってアプリを翻訳する際には、翻訳が自動的に当社のCDNに保存されます。

このガイドでは、Next.js アプリのバンドル内に翻訳を保存する方法について説明します。外部 CDN（たとえば当社のもの）を使用する代わりに、翻訳をアプリのコード内に保持し、外部インフラへの依存を避けることができます。

このガイドでは、次の内容について順を追って説明します。

ローカル翻訳を使用する際のトレードオフ。

Next.js アプリでローカル翻訳を設定する方法。

より速い読み込み時間： ローカル翻訳はアプリから直接配信されるため、CDNから配信される翻訳よりも速く読み込まれます。
外部サービスへの依存がない： アプリが翻訳を読み込む能力はCDNの稼働状況に依存しません。 gt-next を使えば、指定したロケールの翻訳が見つからない場合でも、アプリは自動的にデフォルト言語にフォールバックし、元のコンテンツを表示します。

バンドルサイズの増加： ローカル翻訳はアプリと一緒に配信されるため、アプリのバンドルサイズが増加します。そのため、クライアント側でアプリの読み込みに時間がかかる場合があります。
コンテンツ管理： 翻訳を編集したい場合（例：他言語での表現が気に入らない場合）、変更のたびに新しい翻訳でアプリを再デプロイする必要があります。

Next.jsアプリでGTのセットアップが既に完了していることを確認してください。まだの場合は、まずクイックスタートガイドを完了してください。

./srcの下に以下の内容でloadTranslations.[js|ts]ファイルを追加します：

src/loadTranslations.ts

export default async function loadTranslations(locale: string) {
  const t = await import(`../public/_gt/${locale}.json`);
  return t.default;
}

src/loadTranslations.js

export default async function loadTranslations(locale) {
  const t = await import(`../public/_gt/${locale}.json`);
  return t.default;
}

プロジェクトルートで以下のコマンドを実行し、GT CDNに翻訳を保存するかどうか聞かれたら「No」オプションを選択してください。

npx gtx-cli configure

翻訳ディレクトリのパスを聞かれたら、./public/_gtと入力してください。

または、gt.config.jsonファイルを手動で設定してローカル翻訳を使用することもできます。詳細については、CLI設定ドキュメントを参照してください。

これで、translateコマンドを実行すると、翻訳が自動的にダウンロードされ、コードベースに含まれるようになります。

npx gtx-cli translate

loadTranslations関数は、これらの翻訳をアプリに読み込むために使用されます。

以上です！アプリはローカルファイルからのみ翻訳を読み込むようになります。

loadTranslations関数をさらにカスタマイズして、データベースや独自のCDNなど、他のソースから翻訳を読み込むことができます。詳細については、loadTranslations()ドキュメントを参照してください。