withGTConfig()

概要

withGTConfig()はgt-nextライブラリを設定するための主要な方法です。 NextConfigオブジェクトを直接ラップします。

import { withGTConfig } from 'gt-next/config';

const nextConfig = {
    // 既存のnext.config.js
}

export default withGTConfig(nextConfig, {
  // 追加の設定オプション
});

withGTConfig()を使用して以下を行います：

• サポートされる言語とデフォルトロケール（フォールバック言語とも呼ばれる）を設定する
• GTサービスにアクセスするためのAPIキーとプロジェクトIDを設定する
• 読み込み動作を設定する
• タイムアウト設定を構成する
• カスタムエンドポイントを設定する
• 翻訳動作、キャッシュ、リクエストバッチ処理をカスタマイズする
• SWCプラグインを通じてビルド時検証を設定する

リファレンス

デフォルトでは、withGTConfig()はnext.config.jsファイルと同じディレクトリにあるgt.config.jsonファイルを探します。

このJSONファイルが読み込まれ、withGTConfig()に渡された設定とマージされます。

設定ファイルの詳細については、gt.config.jsonリファレンスを参照してください。

必須Props

推奨Props

高度なProps

戻り値

指定されたGT設定でNext.js設定オブジェクトを拡張する関数(NextConfig) => NextConfig。

例外

projectIdが不足してデフォルトURLが使用されている場合、またはAPIキーが必要だが不足している場合にErrorをスローします。

レンダリング設定

レンダリング設定は、翻訳が読み込まれている間の挙動を制御します。 これは、実行時に行われる翻訳にのみ適用されます。 翻訳がキャッシュされている場合、応答時間が非常に短いため、読み込み挙動を設定する必要はありません。

レンダリング方法

• skeleton: フラグメントをレンダリングします。
• replace: 待機中はデフォルト言語のコンテンツをレンダリングします。
• default: 同じ言語のロケール（例：en-US と en-GB）の場合は replace と同様に動作します。異なる言語のロケール（例：en-US と fr）の場合は skeleton と同様に動作します。

タイムアウト

タイムアウトは、実行時翻訳、またはキャッシュされていないためにオンデマンドで実行する必要がある翻訳にのみ適用されます。

タイムアウトはデフォルトで8秒に設定されています。 この設計は、無料プランでサーバーレス関数のデフォルトタイムアウトが10秒である vercel ユーザーを考慮したものです。

例

レンダリング設定

この例では、翻訳の読み込み中にスケルトンを表示するようにgt-nextを設定します。 翻訳の読み込みに8秒以上かかる場合、メソッドはタイムアウトしてデフォルト言語のコンテンツを表示します。

{
  "defaultLocale": "en-US",
  "locales": ["en-US", "es", "fr"],
}

import { withGTConfig } from 'gt-next/config';

const nextConfig = {
  // Your other next.js configurations
};

export default withGTConfig(nextConfig, {
  renderSettings: {
    method: 'skeleton',
    timeout: 10000,
  },
});

ビルド時バリデーション

この例では、動的コンテンツの違反を警告ではなくビルドエラーとして扱うようにSWCプラグインを設定します。

import { withGTConfig } from 'gt-next/config';

const nextConfig = {
  // Your other next.js configurations
};

export default withGTConfig(nextConfig, {
  // 動的JSXの違反でビルドを失敗させる
  dynamicJsxCheckLogLevel: 'error',
  // 動的文字列の違反で警告を出す  
  dynamicStringCheckLogLevel: 'warn',
});

注意事項

• withGTConfig() は GT の翻訳機能を Next.js アプリに統合し、ルートの設定ファイルで使用する必要があります。
• apiKey や projectId などのパラメータは、設定内で直接指定するか、環境変数として設定できます。
• renderSettings や _batchInterval などの高度なパラメータを使うことで、翻訳の動作やパフォーマンスを細かく制御できます。

次のステップ

• 翻訳をCDプロセスに追加する。