概要

gt-next 6.10.0 では、キャッシュ済みコンポーネントの実験的サポートが導入され、gt-next@6.9 の従来の静的リクエスト関数が非推奨になりました。

• experimentalLocaleResolution を用いたキャッシュ済みコンポーネントの実験的サポートを追加
• gt-next@6.9 の従来の静的リクエスト関数を非推奨化

キャッシュされたコンポーネント

キャッシュされたコンポーネントを有効にするには、gt-next の設定に experimentalLocaleResolution: true を追加し、Next.js Cache Components guide に従ってください。翻訳可能なコンテンツでキャッシュされたコンポーネントを使用する場合は、対応ロケールごとにキャッシュが正しく無効化されるよう、必ず locale をパラメーターとして渡す必要があります。

次のようなアプリケーション構成を考えてみましょう:

import { Suspense } from "react";
import { getLocale, getLocales } from "gt-next/server";

export const generateStaticParams = () => {
  return getLocales().map(locale => ({ locale }))
}

async function CachedContent({locale: _locale}: {locale: string}) {
  "use cache"
  return (
    <div>
      <T><h1>Cached Content</h1></T>
    </div>
  )
}
export default async function Home() {
  const locale = await getLocale()
  return (
    <div>
      <CachedContent locale={locale} />
    </div>
  );
}

locale パラメーターの必須要件

キャッシュ済みコンポーネントは、そのパラメーターをキャッシュキーとして使用します。そのため、翻訳可能なコンテンツを含むキャッシュ済みコンポーネントは、ユーザーの locale が変化したときに更新されるようにするため、必ず locale パラメーターを受け取る必要があります。たとえば、CachedContent は、locale ごとに別々のキャッシュエントリを作成するために locale パラメーターを受け取らなければなりません。このパラメーターがなければ、コンポーネントはユーザーの locale に関係なく、常に同じキャッシュ済みコンテンツを返してしまいます。

設定に関する注意事項

experimentalLocaleResolution が有効な場合：

• locale 解決を機能させるには I18n Proxy を有効にする必要があります（I18n Proxy を参照）
• 任意のカスタム getLocale 関数よりも優先されます（locale 解決は URL パスの読み取りによって行われます）
• getRegion および getDomain 関数は無効化されます
• 非推奨の experimentalEnableSSG 設定と競合します — 同時に有効にできるのはどちらか一方のみです
• experimentalLocaleResolutionParam で locale パラメーターの名称をカスタマイズできます（デフォルトは 'locale' です）

export default withGTConfig(nextConfig, {
  experimentalLocaleResolution: true,
  // 必要に応じてパラメータ名をカスタマイズできます
  experimentalLocaleResolutionParam: 'lang',
})

旧式の静的リクエスト関数の非推奨化

gt-next@6.9 で静的レンダリングのサポートを導入したことに伴い、従来の静的リクエスト関数（getStaticLocale、getStaticRegion、getStaticDomain）を標準のリクエスト関数（getLocale、getRegion、getDomain）に置き換えるため、これらを非推奨とします。

この非推奨化は、機能を損なうことなく API の表面をシンプルに保つという私たちの方針に沿うものです。旧式の静的関数は引き続き動作しますが、非推奨警告を出力します。整合性のため、標準のリクエスト関数への移行 を推奨します。

移行ガイド

レガシー SSG

非推奨となった静的リクエスト関数を置き換える：

// 変更前（非推奨）
export default withGTConfig(nextConfig, {
  experimentalEnableSSG: true,
})

// 変更後  
export default withGTConfig(nextConfig, {
  // デフォルトで利用可能
})

カスタムの getStaticLocale、getStaticRegion、getStaticDomain 関数は削除し、代わりにカスタム getLocale、getRegion、getDomain 関数を使用してください。必ずカスタム getLocale 関数を追加し、getRegion 関数は無効にしてください。詳細については、SSG ガイドを参照してください。

import { locale } from "next/root-params";

export default async function getLocale() {
  return await locale();
}

export default async function getRegion() {
  return undefined;
}

キャッシュされたコンポーネント向け

実験的な locale 解決機能を有効にし、キャッシュされたコンポーネントに locale パラメーターが渡されるようにしてください。

const nextConfig = {
  cacheComponents: true,
}

// 設定
export default withGTConfig(nextConfig, {
  experimentalLocaleResolution: true,
})

// コンポーネントの実装
async function MyCachedComponent({locale}: {locale: string}) {
  "use cache"
  // 国際化コンテンツをここに記述
  return <T>Content for <Var>{locale}</Var></T>
}

// 使用例
export default async function Page() {
  const locale = await getLocale()
  return <MyCachedComponent locale={locale} />
}