# gt-next: General Translation Next.js SDK: кэшируемые компоненты
URL: https://generaltranslation.com/ru/docs/next/guides/cache-components.mdx
---
title: кэшируемые компоненты
description: Настройка кэшируемых компонентов в gt-next
---

В этом руководстве показано, как использовать gt-next с кэшируемыми компонентами в Next.js для оптимизации многоязычных приложений.

***

## Настройка

Если вы ещё этого не сделали, следуйте [руководству Next.js по кэшируемым компонентам](https://nextjs.org/docs/app/getting-started/cache-components), чтобы настроить кэшируемые компоненты в своём проекте.

<Steps>
  <Step>
    ### Включите кэшируемые компоненты и настройте функции запроса

    Включите кэшируемые компоненты в конфигурации Next.js и определите пользовательские функции запроса `getLocale` и `getRegion`, которые используют `next/root-params`, чтобы gt-next мог определять локаль внутри кэшируемых компонентов.

    <Callout type="warn">
      Сегмент `[locale]` должен быть **корневым параметром** — первым динамическим сегментом в каталоге app, без `app/layout.tsx` над ним. Корневой layout должен находиться внутри `app/[locale]/`.
    </Callout>

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

    export default withGTConfig(nextConfig, {
      // Укажите пути к вашим пользовательским функциям запроса
      getLocalePath: './getLocale.ts',
      getRegionPath: './getRegion.ts',
    });
    ```

    Создайте эти файлы в корне проекта. Они используют `next/root-params` вместо `headers()`, а это значит, что они работают внутри границ `"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">
      **Не используйте `headers()` в функциях `getLocale` или `getRegion`.** Вызов `headers()` внутри границы `"use cache"` вызывает ошибку сборки. Используйте `next/root-params`, как показано выше.
    </Callout>

    <Callout type="warn">
      `experimentalLocaleResolution` объявлен устаревшим начиная с gt-next@6.16.29. Он опирается на неподдерживаемые внутренние механизмы Next.js и может перестать работать в будущих версиях Next.js. Вместо этого используйте явную конфигурацию `getLocalePath` и `getRegionPath`.
    </Callout>
  </Step>

  <Step>
    ### Включите middleware

    Полное руководство по middleware см. [здесь](/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>

## Примечания по конфигурации

* При использовании пользовательских `getLocalePath` и `getRegionPath` эти функции отвечают за определение локали и региона для кэшируемых компонентов.
* API `next/root-params` позволяет считывать параметры маршрута, такие как `[locale]`, из любого места в дереве компонентов, включая границы `"use cache"`. Значение корневого параметра автоматически становится частью ключа кэша.
* Сегмент `[locale]` должен быть корневым параметром (то есть над ним не должно быть `app/layout.tsx`).

***

## Что дальше

* Подробнее см. в примечаниях к выпуску этой функции: [gt-next@6.10.0](/devlog/gt-next_v6_10_0).