概要

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

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

キャッシュコンポーネント

キャッシュコンポーネントのサポートを有効にするには、gt-next の設定に experimentalLocaleResolution: true を追加し、Next.js の Cache Components ガイドに従ってください。翻訳可能なコンテンツを含むキャッシュコンポーネントを使用する場合は、ロケールごとにキャッシュが正しく無効化されるよう、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 パラメータを受け取る必要があります。たとえば、CachedContent はロケールごとに個別のキャッシュエントリを作成するため、locale パラメータを受け取る必要があります。このパラメータがないと、ユーザーのロケールに関係なく、コンポーネントは常に同じキャッシュ済みコンテンツを返します。

設定に関する注意

experimentalLocaleResolution が有効な場合:

• ロケール解決を機能させるには、I18n プロキシを有効にする必要があります (I18n Proxy を参照)
• カスタムの getLocale 関数はすべて無視されます (ロケール解決は URL パスの読み取りによって行われます)
• getRegion 関数と getDomain 関数は無効化されます
• 非推奨の experimentalEnableSSG 設定と競合するため、同時に有効にできるのはどちらか 1 つだけです
• experimentalLocaleResolutionParam を使ってロケールパラメータ名をカスタマイズできます (デフォルトは '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;
}

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

実験的なロケール解決を有効にし、キャッシュコンポーネントにロケールパラメータが渡されるようにします。

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} />
}