# 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 Cache Components en tu proyecto.

<Steps>
  <Step>
    ### Habilita los Cache Components y configura las funciones de solicitud

    Habilita los Cache Components en tu configuración de Next.js y define funciones de solicitud personalizadas `getLocale` y `getRegion` que usen `next/root-params` para que gt-next pueda resolver la configuración regional dentro de los Cache Components.

    <Callout type="warn">
      Tu segmento `[locale]` debe ser un **parámetro raíz**: el primer segmento dinámico de tu directorio `app`, sin ningún `app/layout.tsx` por encima. Tu layout root debe estar dentro de `app/[locale]/`.
    </Callout>

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

    export default withGTConfig(nextConfig, {
      // Apunta a tus funciones de solicitud personalizadas
      getLocalePath: './getLocale.ts',
      getRegionPath: './getRegion.ts',
    });
    ```

    Crea estos archivos en la raíz de tu proyecto. Usan `next/root-params` en lugar de `headers()`, lo que significa que funcionan dentro de los límites de `"use cache"`:

    ```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">
      **No uses `headers()` en tus funciones `getLocale` o `getRegion`.** Llamar a `headers()` dentro de un límite de `"use cache"` provoca un error de compilación. Usa `next/root-params` como se muestra arriba.
    </Callout>

    <Callout type="warn">
      `experimentalLocaleResolution` está obsoleto desde gt-next@6.16.29. Depende de internals no compatibles de Next.js y podría fallar en futuras versiones de Next.js. Usa en su lugar la configuración explícita de `getLocalePath` y `getRegionPath`.
    </Callout>
  </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 Cache Components con contenido traducible

    Al usar Cache Components 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

* Al usar `getLocalePath` y `getRegionPath` personalizados, esas funciones se encargan de resolver la configuración regional y la región de los Cache Components.
* La API `next/root-params` permite leer parámetros de ruta como `[locale]` desde cualquier parte del árbol de componentes, incluso dentro de los límites de `"use cache"`. El valor del parámetro raíz pasa a formar parte automáticamente de la clave de caché.
* El segmento `[locale]` debe ser un parámetro raíz (sin `app/layout.tsx` por encima).

***

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