withGTConfig()

概要

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

import { withGTConfig } from 'gt-next/config';
 
const nextConfig = {
    // 既存のnext.config.js
}
 
export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['en-US', 'es', 'fr'],
});

翻訳機能を有効にするためにwithGTConfig()を使用する必要はありませんが、ニーズに合わせてライブラリを設定することをお勧めします。

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

• サポートされている言語とデフォルトのロケール（フォールバック言語とも呼ばれます）を設定します。
• GTサービスにアクセスするためのAPIキーとプロジェクトIDを設定します。
• ローディングの動作を設定します。
• タイムアウト設定を構成します。
• カスタムエンドポイントを設定します。
• 翻訳の動作、キャッシング、およびリクエストのバッチ処理をカスタマイズします。

リファレンス

必須プロップ

推奨プロップ

高度なプロップ

戻り値

指定された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 をデフォルトのロケールとして英語 (en-US) で設定しています。 スペイン語 (es) とフランス語 (fr) の翻訳のみをサポートし、文脈に応じた翻訳のための説明を提供します。

ロケールが一致しない場合、サイトは最適な言語にフォールバックします。 一致する言語（例：en-US と en-GB）や、ユーザーがブラウザで設定した他の優先言語を探します。 すべてが失敗した場合、デフォルトの言語にフォールバックします。

import { withGTConfig } from 'gt-next/config';
 
const nextConfig = {
  // Your other next.js configurations
}
 
export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  locales: ['en-US', 'es', 'fr'],
  description: 'A personal blog about technology and travel',
});

レンダー設定

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

import { withGTConfig } from 'gt-next/config';
 
const nextConfig = {
  // Your other next.js configurations
};
 
// locales field is left empty, so this configuration supports all 100+ languages
export default withGTConfig(nextConfig, {
  defaultLocale: 'en-US',
  renderSettings: {
    method: 'skeleton',
    timeout: 10000,
  },
});

メモ

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

次のステップ

• CDプロセスへの翻訳の追加。
• リファレンスガイドでi18n設定についてさらに読む。