# gt-next: General Translation Next.js SDK: キャッシュコンポーネント
URL: https://generaltranslation.com/ja/docs/next/guides/cache-components.mdx
---
title: キャッシュコンポーネント
description: gt-next で キャッシュコンポーネント を設定する
---

このガイドでは、gt-next を Next.js の キャッシュコンポーネント と組み合わせて使用し、国際化アプリケーションを最適化する方法を説明します。

***

## セットアップ

まだ設定していない場合は、[Next.js Cache Components ガイド](https://nextjs.org/docs/app/getting-started/cache-components)に従って、プロジェクトでキャッシュコンポーネントを有効にしてください。

<Steps>
  <Step>
    ### キャッシュコンポーネントを有効にしてリクエスト関数を設定する

    Next.js の設定でキャッシュコンポーネントを有効にし、`next/root-params` を使用するカスタムの `getLocale` および `getRegion` リクエスト関数を定義して、gt-next がキャッシュコンポーネント内でロケールを判別できるようにします。

    <Callout type="warn">
      `[locale]` セグメントは**ルートパラメータ**でなければなりません。つまり、app ディレクトリ内の最初の動的セグメントであり、その上位に `app/layout.tsx` が存在しない状態です。ルートレイアウトは `app/[locale]/` の中に配置する必要があります。
    </Callout>

    ```js title="next.config.js"
    const nextConfig = {
      cacheComponents: true,
    };

    export default withGTConfig(nextConfig, {
      // カスタムリクエスト関数へのパスを指定
      getLocalePath: './getLocale.ts',
      getRegionPath: './getRegion.ts',
    });
    ```

    これらのファイルをプロジェクトのルートに作成してください。これらは `headers()` ではなく `next/root-params` を使用するため、`"use cache"` 境界内でも動作します:

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

    export default async function getLocale(): Promise<string> {
      return await locale();
    }
    ```

    ```ts title="getRegion.ts"
    export default async function getRegion(): Promise<string | undefined> {
      return undefined;
    }
    ```

    <Callout type="warn">
      **`getLocale` または `getRegion` 関数内で `headers()` を使用しないでください。** `"use cache"` 境界内で `headers()` を呼び出すと、ビルドエラーが発生します。代わりに、上記のように `next/root-params` を使用してください。
    </Callout>

    <Callout type="warn">
      `experimentalLocaleResolution` は gt-next@6.16.29 で非推奨になりました。これはサポート対象外の Next.js の内部実装に依存しており、今後の Next.js リリースで動作しなくなる可能性があります。代わりに、`getLocalePath` と `getRegionPath` を明示的に設定してください。
    </Callout>
  </Step>

  <Step>
    ### ミドルウェアを有効にする

    ミドルウェアの完全なガイドは[こちら](/docs/next/guides/middleware)を参照してください。

    ```ts
    import { createNextMiddleware } from 'gt-next/middleware';

    export default createNextMiddleware();

    export const config = {
    // API ルート、静的ファイル、Next.js の内部パスを除くすべてのパスにマッチ
    matcher: ['/((?!api|static|.*\\..*|_next).*)']
    };

    ```
  </Step>

  <Step>
    ### 翻訳可能なコンテンツを含むキャッシュコンポーネントに `locale` パラメータを追加する

    翻訳可能なコンテンツを含むキャッシュコンポーネントを使用する場合は、`locale` をパラメータとして渡す必要があります。これにより、各ロケールごとに個別のキャッシュエントリが作成されます。

    ```tsx
    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} />
    }
    ```
  </Step>
</Steps>

## 設定に関する注意

* カスタムの `getLocalePath` と `getRegionPath` を使用する場合、キャッシュコンポーネントでは、これらの関数がロケールとリージョンの解決を担当します。
* `next/root-params` API を使用すると、`"use cache"` 境界内を含め、コンポーネントツリー内のどこからでも `[locale]` のようなルートパラメータを読み取れます。ルートパラメータの値は自動的にキャッシュキーの一部になります。
* `[locale]` セグメントはルートパラメータである必要があります (`app/layout.tsx` がその上位にあってはなりません)。

***

## 次のステップ

* 詳しくは、この機能のリリースノート [gt-next@6.10.0](/devlog/gt-next_v6_10_0) を参照してください。