# gt-next: General Translation Next.js SDK: Cache Components
URL: https://generaltranslation.com/it/docs/next/guides/cache-components.mdx
---
title: Cache Components
description: Configurare i Cache Components in gt-next
---

Questa guida mostra come usare gt-next con i Cache Components di Next.js per ottimizzare le applicazioni internazionalizzate.

***

## Setup

Se non l'hai ancora fatto, segui la [guida ai Cache Components di Next.js](https://nextjs.org/docs/app/getting-started/cache-components) per configurare i Cache Components nel tuo progetto.

<Steps>
  <Step>
    ### Abilita i Cache Components e configura le funzioni di richiesta

    Abilita i Cache Components nella configurazione di Next.js e definisci funzioni di richiesta personalizzate `getLocale` e `getRegion` che usano `next/root-params` in modo che gt-next possa risolvere l&#39;impostazione regionale all&#39;interno dei cached components.

    <Callout type="warn">
      Il segmento `[locale]` deve essere un **parametro radice** — il primo segmento dinamico nella directory app, senza alcun `app/layout.tsx` sopra di esso. Il layout root deve trovarsi all&#39;interno di `app/[locale]/`.
    </Callout>

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

    export default withGTConfig(nextConfig, {
      // Percorso delle funzioni di richiesta personalizzate
      getLocalePath: './getLocale.ts',
      getRegionPath: './getRegion.ts',
    });
    ```

    Crea questi file nella radice del progetto. Usano `next/root-params` invece di `headers()`, il che significa che funzionano all&#39;interno dei boundary `"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">
      **Non usare `headers()` nelle tue funzioni `getLocale` o `getRegion`.** Chiamare `headers()` all&#39;interno di un boundary `"use cache"` causa un errore di build. Usa `next/root-params` come mostrato sopra.
    </Callout>

    <Callout type="warn">
      `experimentalLocaleResolution` è deprecato a partire da gt-next@6.16.29. Si basa su componenti interni non supportati di Next.js e potrebbe non funzionare nelle future versioni di Next.js. Usa invece la configurazione esplicita `getLocalePath` e `getRegionPath`.
    </Callout>
  </Step>

  <Step>
    ### Abilita il middleware

    Consulta la guida completa al middleware [qui](/docs/next/guides/middleware).

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

    export default createNextMiddleware();

    export const config = {
    // Corrisponde a tutti i percorsi tranne le route API, i file statici e gli elementi interni di Next.js
    matcher: ['/((?!api|static|.*\\..*|_next).*)']
    };

    ```
  </Step>

  <Step>
    ### Aggiungi il parametro `locale` ai Cache Components con contenuti traducibili

    Quando usi Cache Components con contenuti traducibili, devi passare `locale` come parametro. In questo modo, ogni impostazione regionale avrà una voce di cache dedicata.

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

## Note sulla configurazione

* Quando usi versioni personalizzate di `getLocalePath` e `getRegionPath`, queste funzioni gestiscono la risoluzione dell&#39;impostazione regionale e dell&#39;area geografica per i componenti in cache.
* L&#39;API `next/root-params` consente di leggere parametri di route come `[locale]` da qualsiasi punto dell&#39;albero dei componenti, anche all&#39;interno dei limiti di `"use cache"`. Il valore del parametro radice diventa automaticamente parte della chiave della cache.
* Il segmento `[locale]` deve essere un parametro radice (senza alcun `app/layout.tsx` sopra di esso).

***

## Passaggi successivi

* Leggi le note di rilascio di questa funzionalità, [gt-next@6.10.0](/devlog/gt-next_v6_10_0), per ulteriori informazioni.