# gt-next: General Translation Next.js SDK: Cache Components
URL: https://generaltranslation.com/en-GB/docs/next/guides/cache-components.mdx
---
title: Cache Components
description: Setting up Cache Components in gt-next
---

This guide shows you how to use gt-next with Next.js Cache Components to optimise internationalised applications.

***

## Setup

If you have not already, follow the [Next.js Cache Components guide](https://nextjs.org/docs/app/getting-started/cache-components) to set up cache components in your project.

<Steps>
  <Step>
    ### Enable cache components and configure request functions

    Enable cache components in your Next.js config, and define custom `getLocale` and `getRegion` request functions that use `next/root-params` so that gt-next can resolve the locale inside cached components.

    <Callout type="warn">
      Your `[locale]` segment must be a **root parameter** — the first dynamic segment in your app directory, with no `app/layout.tsx` above it. Your root layout must live inside `app/[locale]/`.
    </Callout>

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

    export default withGTConfig(nextConfig, {
      // Point to your custom request functions
      getLocalePath: './getLocale.ts',
      getRegionPath: './getRegion.ts',
    });
    ```

    Create these files in your project root. They use `next/root-params` instead of `headers()`, which means they work inside `"use cache"` boundaries:

    ```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">
      **Do not use `headers()` in your `getLocale` or `getRegion` functions.** Calling `headers()` inside a `"use cache"` boundary causes a build error. Use `next/root-params` as shown above.
    </Callout>

    <Callout type="warn">
      `experimentalLocaleResolution` is deprecated as of gt-next@6.16.29. It relies on unsupported Next.js internals and may break in future Next.js releases. Use explicit `getLocalePath` and `getRegionPath` configuration instead.
    </Callout>
  </Step>

  <Step>
    ### Enable middleware

    See the full middleware guide [here](/docs/next/guides/middleware).

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

    export default createNextMiddleware();

    export const config = {
    // Match all paths except API routes, static files, and Next.js internals
    matcher: ['/((?!api|static|.*\\..*|_next).*)']
    };

    ```
  </Step>

  <Step>
    ### Add the `locale` parameter to cached components with translatable content

    When using cached components with translatable content, you must pass the `locale` as a parameter. This ensures each locale gets its own cache entry.

    ```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>

## Configuration notes

* When using custom `getLocalePath` and `getRegionPath`, those functions determine the locale and region for cached components.
* The `next/root-params` API allows route parameters such as `[locale]` to be read from anywhere in the component tree, including inside `"use cache"` boundaries. The root parameter value automatically becomes part of the cache key.
* The `[locale]` segment must be a root parameter (with no `app/layout.tsx` above it).

***

## Next steps

* For more information, read the release notes for this feature: [gt-next@6.10.0](/devlog/gt-next_v6_10_0).