ローカル翻訳

概要

このガイドでは、CDNを使用するのではなく、Next.jsアプリに翻訳を保存する方法を紹介します。これにより、翻訳はアプリのバンドル内に存在します。これにより、読み込み時間が速くなり、外部インフラストラクチャへの依存を避けることができます。

このドキュメントでは、(1) ローカル翻訳とは何か、どのように機能するかを説明し、 (2) Next.jsアプリのローカル翻訳を設定する方法を示します。

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

例えば、gtx-cli translate コマンドをCDプロセスに追加したとします。これにより、アプリの翻訳を含むJSONファイルが生成されます。最終ステップは、これらの翻訳をAPIから取り出し、アプリに組み込むことです。

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

読み込み時間の短縮: ローカル翻訳はアプリから直接提供されるため、 CDNから提供される翻訳よりも速く読み込まれます。

外部サービスへの依存なし: アプリが翻訳を読み込む能力は、CDNの可用性に依存しません。

バンドルサイズの増加: ローカル翻訳はアプリのバンドルサイズを増加させます。これにより、初回の読み込みが若干遅くなる可能性があります。

ロケール管理: ロケールのサポートを追加または削除するには、毎回アプリを再デプロイする必要があります。

コンテンツ管理: ロケール管理と同様に、翻訳を変更したい場合（例：他の言語での表現が気に入らない場合）、新しい翻訳でアプリを再デプロイする必要があります。

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

次のコマンドを実行し、「言語ファイルはどこに保存されていますか？」と聞かれたら、「ローカル」オプションを選択します。

npx gtx-cli init

その後、翻訳コマンドを実行します。

npx gtx-cli translate

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