i18n設定

Next.jsアプリケーションでのi18nの動作を設定する

概要

withGTConfig() 関数は、Next.js アプリケーションのための一般翻訳 (GT) 設定を初期化します。 この関数にプロップスを渡すことで、アプリの国際化 (i18n) の動作を制御できます。 これには、デフォルトのロケール(フォールバック言語とも呼ばれる)、サポートされているロケール、その他の翻訳関連のオプションの設定が含まれます。

プラグインの追加

最初のステップは、withGTConfig() プラグイン関数を次の設定ファイルに追加することです。

次の設定ファイルの場所

プロジェクトのルートディレクトリには、next.config.js(または .ts.mjs.cjs)というファイルがあるはずです。

next.config.js
.gitignore
package.json
README.md

プラグインを追加

next.config.js ファイルにプラグインの基本設定をセットアップします。 これにより、デフォルト値にフォールバックします。

next.config.mjs
import { withGTConfig } from 'gt-next/config';
 
const nextConfig = {}
 
export default withGTConfig(nextConfig);

いくつかの例

基本的な使用法

この設定では、アプリが英語スペイン語フランス語で利用可能であることを指定します。 また、デフォルトの言語が英語であることも指定します。 さらに、説明として"技術と旅行に関する個人ブログ"を追加します。 この説明は、実行されるすべての翻訳で考慮されます。

next.config.mjs
import { withGTConfig } from 'gt-next/config'
 
const nextConfig = {}
 
export default withGTConfig(nextConfig, {
  defaultLocale: "en-US", // アプリのデフォルト言語、通常は "en" または "en-US"
  locales: ["en-US", "es", "fr"], // アプリが利用可能な言語
  description: "A personal website for John Smith" // 翻訳を支援するために使用されるサイトの自然言語による説明
});

ロケールを含める

withGTConfig()を使用すると、含めたいロケールのリストを指定できます。 例えば、この設定では、アプリが英語、中国語、日本語で利用可能になることを指定しています。

これは、アプリがこれらの言語でのみ利用可能であることを意味します。 このリストに含まれていないロケールは翻訳されません。 例えば、ユーザーがリストにない言語でアプリにアクセスしようとした場合、アプリは指定されたデフォルトのロケールにフォールバックします。

デフォルトでは、アプリはすべての利用可能な言語に翻訳できます。

next.config.mjs
import { withGTConfig } from 'gt-next/config'
 
const nextConfig = {}
 
export default withGTConfig(nextConfig, {
  defaultLocale: "en-US",
  locales: ["en-US", "zh", "jp"]
});

サポートされているロケールのリストを見るには、Supported Localesを参照してください。 ロケールの選択に関する詳細なガイドについては、Locale Management Guideを参照してください。

getLocale()の設定

i18nは、getLocale()関数を定義するファイルへのカスタムパスを指定する文字列です。 getLocale()という関数をエクスポートするファイルを作成することで、ユーザーのロケールを決定するためのカスタム動作を指定できます。

myapp/next.config.mjs
import { withGTConfig } from 'gt-next/config'
 
const nextConfig = {};
 
export default withGTConfig(nextConfig, {
  defaultLocale: "en-US", // アプリのデフォルト言語、通常は "en" または "en-US"
  i18n: "./i18n.js"
});
myapp/i18n.js
import { cookies } from "next/headers";
 
export async function getLocale() {
  const cookieStore = await cookies();
  return cookieStore.get('myCustomLocaleCookie') || 'en';
}

優先プロバイダー

preferredModelProviderを使用すると、優先するモデルプロバイダーを指定できます。 現在、AnthropicとOpenAIのみが有効ですが、将来的にはさらに多くのプロバイダーが追加される予定です。

すべての翻訳を優先するLLMプロバイダーにルーティングしますが、優先するモデルが利用できない場合やすぐにアクセスできない場合は、別のプロバイダーにフォールバックします。

next.config.mjs
import { withGTConfig } from 'gt-next/config'
 
const nextConfig = {};
 
export default withGTConfig(nextConfig, {
  defaultLocale: "en-US",
  preferredModelProvider: "anthropic"
});

メモ

  • withGTConfig() は、Next.js アプリケーションで GT の動作を設定することができます。
  • デフォルトのロケール、サポートされているロケール、その他の翻訳関連のオプションを指定できます。

次のステップ

このページについて