# gt-next: General Translation Next.js SDK: Cache Components
URL: https://generaltranslation.com/es/docs/next/guides/cache-components.mdx
---
title: Cache Components
description: Configuración de Cache Components en gt-next
---

Esta guía muestra cómo usar gt-next con Cache Components de Next.js para optimizar aplicaciones internacionalizadas.

***

## Configuración

Si todavía no lo has hecho, sigue la [guía de Cache Components de Next.js](https://nextjs.org/docs/app/getting-started/cache-components) para configurar los componentes en caché en tu proyecto.

<Steps>
  <Step>
    ### Habilita la compatibilidad con componentes en caché en tu configuración de gt-next:

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

    export default withGTConfig(nextConfig, {
      experimentalLocaleResolution: true,
    });
    ```
  </Step>

  <Step>
    ### Habilita el middleware

    Consulta la guía completa sobre middleware [aquí](/docs/next/guides/middleware).

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

    export default createNextMiddleware();

    export const config = {
    // Hace coincidir todas las rutas excepto las rutas de API, los archivos estáticos y los elementos internos de Next.js
    matcher: ['/((?!api|static|.*\\..*|_next).*)']
    };

    ```
  </Step>

  <Step>
    ### Agrega el parámetro `locale` a los componentes en caché con contenido traducible

    Al usar componentes en caché con contenido traducible, debes pasar `locale` como parámetro. Esto garantiza que cada configuración regional tenga su propia entrada de caché.

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

## Notas de configuración

* Las funciones `getLocale` personalizadas se reemplazan
* Las funciones `getRegion` y `getDomain` están deshabilitadas
* Puedes personalizar el nombre del parámetro de configuración regional que se usa para la resolución con `experimentalLocaleResolutionParam` (el valor predeterminado es `'locale'`)

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

***


## Próximos pasos

* Lee las notas de la versión de esta función, [gt-next@6.10.0](/devlog/gt-next_v6_10_0), para más información.