概要

withGTConfig は gt-next ライブラリを構成するための主要な手段です。 NextConfig オブジェクトを直接ラップします。

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

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

export default withGTConfig(nextConfig, {
  // 追加の options 設定
});

withGTConfig を使用すると、次のことができます:

• サポートする言語と既定の locale（フォールバック言語）を設定する。
• GT サービスにアクセスするための API Keys とプロジェクト ID を設定する。
• ローディング動作を設定する。
• timeout 設定を構成する。
• カスタムエンドポイントを設定する。
• 翻訳動作、キャッシュ、リクエストのバッチ処理をカスタマイズする。
• SWC プラグインによるビルド時の検証を構成する。

リファレンス

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

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

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

必須の Props

推奨プロップス

高度なプロップ

戻り値

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

例外

デフォルトのURLを使用していて projectId が指定されていない場合、または APIキー が必須にもかかわらず設定されていない場合に、Error をスローします。

レンダリング設定

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

レンダリング方法

• skeleton: フラグメントを描画します。
• replace: 待機中はデフォルト言語のコンテンツを表示します。
• default: 同じ言語の locale（例：en-US と en-GB）では replace と同様に動作します。異なる言語の locale（例：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 = {
  // その他の Next.js の設定
};

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

ビルド時の検証

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

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

const nextConfig = {
  // その他の Next.js の設定
};

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

注意事項

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

次のステップ

• CDプロセス（継続的デリバリー／継続的デプロイ）に翻訳を追加する