# gt-next: General Translation Next.js SDK: 缓存组件
URL: https://generaltranslation.com/zh/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>
    ### 在 gt-next 配置中启用缓存组件支持：

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

    export default withGTConfig(nextConfig, {
      experimentalLocaleResolution: true,
    });
    ```
  </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>

## 配置说明

* 自定义 `getLocale` 函数会被覆盖
* `getRegion` 和 `getDomain` 函数将被禁用
* 你可以通过 `experimentalLocaleResolutionParam` 自定义用于解析的区域设置参数名 (默认为 `'locale'`) 

```js title="next.config.js"
export default withGTConfig(nextConfig, {
  experimentalLocaleResolution: true,
  experimentalLocaleResolutionParam: 'lang', // 可选自定义
});
```

***


## 后续步骤

* 如需了解更多信息，请阅读此功能的发布说明：[gt-next@6.10.0](/devlog/gt-next_v6_10_0)。