# gt-next: General Translation Next.js SDK: Composants mis en cache
URL: https://generaltranslation.com/fr/docs/next/guides/cache-components.mdx
---
title: Composants mis en cache
description: Configurer les composants mis en cache dans gt-next
---

Ce guide explique comment utiliser gt-next avec les composants mis en cache de Next.js afin d’optimiser les applications internationalisées.

***

## Configuration

Si ce n’est pas déjà fait, suivez le [guide Next.js sur les composants mis en cache](https://nextjs.org/docs/app/getting-started/cache-components) pour configurer les composants mis en cache dans votre projet.

<Steps>
  <Step>
    ### Activez les composants mis en cache et configurez les fonctions de requête

    Activez les composants mis en cache dans votre configuration Next.js, et définissez des fonctions de requête personnalisées `getLocale` et `getRegion` qui utilisent `next/root-params` afin que gt-next puisse résoudre le paramètre régional à l’intérieur des composants mis en cache.

    <Callout type="warn">
      Votre segment `[locale]` doit être un **paramètre racine** — le premier segment dynamique dans votre répertoire app, sans `app/layout.tsx` au-dessus. Votre layout racine doit se trouver dans `app/[locale]/`.
    </Callout>

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

    export default withGTConfig(nextConfig, {
      // Pointez vers vos fonctions de requête personnalisées
      getLocalePath: './getLocale.ts',
      getRegionPath: './getRegion.ts',
    });
    ```

    Créez ces fichiers à la racine de votre projet. Ils utilisent `next/root-params` au lieu de `headers()`, ce qui signifie qu’ils fonctionnent à l’intérieur des limites `"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">
      **N’utilisez pas `headers()` dans vos fonctions `getLocale` ou `getRegion`.** Appeler `headers()` à l’intérieur d’une limite `"use cache"` provoque une erreur de build. Utilisez `next/root-params` comme indiqué ci-dessus.
    </Callout>

    <Callout type="warn">
      `experimentalLocaleResolution` est obsolète depuis gt-next@6.16.29. Cette option repose sur des éléments internes non pris en charge de Next.js et peut cesser de fonctionner dans de futures versions de Next.js. Utilisez plutôt une configuration explicite avec `getLocalePath` et `getRegionPath`.
    </Callout>
  </Step>

  <Step>
    ### Activez le middleware

    Consultez le guide complet du middleware [ici](/docs/next/guides/middleware).

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

    export default createNextMiddleware();

    export const config = {
    // Correspond à tous les chemins, sauf les routes d’API, les fichiers statiques et les éléments internes de Next.js
    matcher: ['/((?!api|static|.*\\..*|_next).*)']
    };

    ```
  </Step>

  <Step>
    ### Ajoutez le paramètre `locale` aux composants mis en cache contenant du contenu traduisible

    Lorsque vous utilisez des composants mis en cache avec du contenu traduisible, vous devez transmettre `locale` en paramètre. Cela garantit que chaque paramètre régional dispose de sa propre entrée de cache.

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

## Notes de configuration

* Lorsque vous utilisez des fonctions `getLocalePath` et `getRegionPath` personnalisées, celles-ci gèrent la résolution du paramètre régional et de la région pour les composants mis en cache.
* L’API `next/root-params` permet de lire des paramètres de route comme `[locale]` depuis n’importe quel endroit de l’arborescence des composants, y compris à l’intérieur des limites de `"use cache"`. La valeur du paramètre racine fait automatiquement partie de la clé de cache.
* Le segment `[locale]` doit être un paramètre racine (sans `app/layout.tsx` au-dessus).

***

## Prochaines étapes

* Consultez les notes de version de cette fonctionnalité, [gt-next@6.10.0](/devlog/gt-next_v6_10_0), pour en savoir plus.