# General Translation React SDKs (gt-react, gt-next, gt-react-native): Cache Components の使用
URL: https://generaltranslation.com/ja/docs/react/nextjs/cache-components.mdx
---

title: Cache Components の使用
description: ロケールに依存しないリクエスト関数とローカルに保存された翻訳を使用して、Next.js Cache Components を利用する方法。
related:
  links:
    - /docs/react/nextjs/app-router-middleware
    - /docs/react/nextjs/app-router-static-site-generation
    - /docs/react/nextjs/registering-request-locales
    - /docs/react/nextjs/locale-alias-seo

---

Cache Components は、ローカライズされたサーバーコンテンツを事前レンダリングしてキャッシュできます。ロケール、リージョン、翻訳はすべて、リクエストヘッダー、cookie、デフォルトのリモート翻訳ローダーに依存せずに解決できる必要があります。

*注: このガイドでは、`cacheComponents: true` で Cache Components を設定する Next.js 16 以降を使用します。*

## Cache Components を有効にする [#enable]

`next.config.ts` で Cache Components を有効にします。Next.js の設定は [`withGTConfig`](/docs/react/nextjs/config) でラップしたままにしてください。

```ts title="next.config.ts"
import type { NextConfig } from 'next';
import { withGTConfig } from 'gt-next/config';

const nextConfig: NextConfig = {
  cacheComponents: true,
};

export default withGTConfig(nextConfig);
```

Cache Components を有効にすると、`gt-next` は次のように動作します。

* カスタムの [`loadTranslations`](/docs/react/reference/functions/load-translations) 関数が必要になります。デフォルトのリモートローダーは事前レンダリング中に安全に使用できません。
* カスタムの [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) および [`getRegion`](/docs/react/nextjs/reference/functions/get-region) リクエスト関数がない場合、警告を表示します。
* 動的リクエストが発生するため、開発時の runtime translation の hot reload を無効にします。
* 通常の General Translation のキャッシュ有効期限を適用せず、キャッシュの無効化は Next.js に任せます。

## リクエスト値を解決する [#request-values]

App Router ツリーのルートに `[locale]` セグメントを配置します。ルートレイアウトは `app/[locale]/layout.tsx` とし、その上位に `app/layout.tsx` を配置しないでください。

プロジェクトルートに `getLocale.ts` を作成します。

```ts title="getLocale.ts"
import { locale } from 'next/root-params';

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

同じディレクトリに `getRegion.ts` を作成します。出力がリージョンに依存する場合は固定のリージョンを返し、リージョン検出を無効にする場合は `undefined` を返します。

```ts title="getRegion.ts"
export default async function getRegion() {
  return undefined;
}
```

`withGTConfig` は両方のファイルを自動的に検出します。別の場所にある場合は、[`getLocalePath` と `getRegionPath`](/docs/react/nextjs/config#request-function-paths) を設定してください。

<Callout type="warn">
  これらのリクエスト関数内で `headers()` や `cookies()` を呼び出さないでください。動的リクエスト API は `"use cache"` 境界内では実行できません。代わりに `next/root-params` からロケールを読み取り、固定のリージョンを返してください。
</Callout>

## 翻訳をローカルに保存する [#local-translations]

Next.js のビルド前に翻訳ファイルを生成し、バンドルから読み込みます。

```ts title="loadTranslations.ts"
export default async function loadTranslations(locale: string) {
  try {
    const translations = await import(`./public/_gt/${locale}.json`);
    return translations.default;
  } catch {
    return {};
  }
}
```

`withGTConfig` は、プロジェクトルートまたは `src/` 内の `loadTranslations.ts` を検出します。[`loadTranslationsPath`](/docs/react/nextjs/config#load-translations-path) を設定することもできます。

CLI の出力をローダーに合わせて設定し、`next build` の前に [`npx gt translate`](/docs/cli/reference/commands/translate) を実行してください。ワークフロー全体については、[翻訳をローカルに保存する](/docs/react/guides/storing-translations) を参照してください。

## 翻訳済みコンテンツをキャッシュする [#cache-content]

キャッシュされる関数の外でロケールを解決し、シリアライズ可能な引数として渡します。関数の引数はCache Componentsのキャッシュキーの一部となるため、ロケールごとにエントリが分離されます。

```tsx title="app/[locale]/page.tsx"
import { T } from 'gt-next';
import { getLocale } from 'gt-next/server';
import { cacheLife, cacheTag } from 'next/cache';

async function CachedContent({ locale }: { locale: string }) {
  'use cache';

  cacheLife('hours');
  cacheTag(`home-${locale}`);

  return <T>Welcome to our site</T>;
}

export default async function Page() {
  const locale = await getLocale();
  return <CachedContent locale={locale} />;
}
```

レンダリングされる翻訳を変えるリージョンやその他のリクエスト値にも、同じパターンを適用してください。異なるロケールで同じキャッシュエントリを共有しないでください。
## Next steps

- /docs/react/nextjs/app-router-middleware
- /docs/react/nextjs/app-router-static-site-generation
- /docs/react/nextjs/registering-request-locales
- /docs/react/nextjs/locale-alias-seo