キャッシュコンポーネント
gt-next におけるキャッシュコンポーネントのセットアップ
Cache Components
このガイドでは、国際化対応アプリケーションを最適化するために、Next.js の Cache Components と組み合わせて gt-next を使用する方法を説明します。
セットアップ
まだ行っていない場合は、プロジェクトで Cache Components をセットアップするために、Next.js Cache Components guide に従ってください。
gt-next の設定で cache components サポートを有効にする:
const nextConfig = {
cacheComponents: true,
}
export default withGTConfig(nextConfig, {
experimentalLocaleResolution: true,
})middleware を有効にする
middleware の詳細なガイドはこちらを参照してください。
import { createNextMiddleware } from 'gt-next/middleware';
export default createNextMiddleware();
export const config = {
// API ルート、静的ファイル、および Next.js の内部処理を除くすべてのパスにマッチさせる
matcher: ['/((?!api|static|.*\\..*|_next).*)']
};翻訳可能なコンテンツを含むキャッシュコンポーネントに locale パラメータを追加する
翻訳可能なコンテンツを含むキャッシュコンポーネントを使用する場合は、locale をパラメータとして渡す必要があります。これにより、各 locale ごとに専用のキャッシュ Entry が作成されます。
import { getLocale } from "gt-next/server"
async function CachedContent({locale}: {locale: string}) {
"use cache"
return <T>Hello World</T>
}
export default async function Page() {
const locale = await getLocale()
return <CachedContent locale={locale} />
}設定に関する注意事項
- カスタムの
getLocale関数は上書きされます getRegionおよびgetDomain関数は使用できませんexperimentalLocaleResolutionParamを使用して、locale 判別に使われるパラメーター名をカスタマイズできます（デフォルトは'locale'）
export default withGTConfig(nextConfig, {
experimentalLocaleResolution: true,
experimentalLocaleResolutionParam: 'lang', // オプション設定
})次のステップ
- 詳細については、gt-next@6.10.0 のリリースノートをご覧ください。
このガイドはいかがですか?