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

# Cache Components

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 support in your gt-next configuration:

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

export default withGTConfig(nextConfig, {
  experimentalLocaleResolution: true,
});
```

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

- Custom `getLocale` functions are overridden
- `getRegion` and `getDomain` functions are disabled
- You can customize the locale parameter name used for resolution with `experimentalLocaleResolutionParam` (defaults to `'locale'`)

```js title="next.config.js"
export default withGTConfig(nextConfig, {
  experimentalLocaleResolution: true,
  experimentalLocaleResolutionParam: 'lang', // Optional customization
});
```

---

## Next steps

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