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

This guide shows how to use gt-next with Next.js Cache Components to optimize internationalized 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 handle locale and region resolution for cached components.
- The `next/root-params` API allows reading route parameters like `[locale]` from anywhere in the component tree, including inside `"use cache"` boundaries. The root param value automatically becomes part of the cache key.
- The `[locale]` segment must be a root parameter (no `app/layout.tsx` above it).

---

## Next steps

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