# General Translation React SDKs (gt-react, gt-next, gt-react-native): Маршрутизация по локалям в Pages Router
URL: https://generaltranslation.com/ru/docs/react/nextjs/pages-router-middleware.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Как настроить интернационализированную маршрутизацию Next.js с General Translation в Pages Router.

Pages Router использует интернационализированную маршрутизацию Next.js для определения локализованных URL-адресов и передачи активной локали в `gt-next`. Маршруты остаются в своих обычных расположениях в `pages`.

## Настройте маршрутизацию по локалям [#configure-routing]

Импортируйте настройки локалей из `gt.config.json` в `next.config.ts`. Массив `locales` должен содержать `defaultLocale`:

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["en", "es", "fr"]
}
```

```ts title="next.config.ts"
import type { NextConfig } from 'next';
import { withGTConfig } from 'gt-next/config';
import gtConfig from './gt.config.json';

const nextConfig: NextConfig = {
  i18n: {
    locales: gtConfig.locales,
    defaultLocale: gtConfig.defaultLocale,
  },
};

export default withGTConfig(nextConfig);
```

Next.js обслуживает локаль по умолчанию без префикса, а для остальных локалей добавляет префиксы. Например, для английского используется `/about`, а для французского — `/fr/about`.

Размещайте каждую страницу в корне `pages`; не добавляйте сегмент `[locale]`:

<Files>
  <Folder name="pages">
    <File name="_app.tsx" />

    <File name="index.tsx" />

    <File name="about.tsx" />
  </Folder>

  <File name="next.config.ts" />
</Files>

`withGTServerSideProps` и `withGTStaticProps` получают локаль из контекста функций получения данных Next.js. Для маршрутизации по локалям в Pages Router не нужны ни middleware `gt-next`, ни `proxy.ts`, ни `middleware.ts`.

## Подключите обработку изменений локали [#locale-changes]

Передайте в [`GTProvider`](/docs/react/reference/components/gt-provider) колбэк `_reload` с учётом локали, чтобы при изменении локали использовалась навигация Pages Router и загружались пропсы страницы для выбранной локали:

```tsx title="pages/_app.tsx"
import type { AppProps } from 'next/app';
import Router from 'next/router';
import { GTProvider, type WithGTStaticProps } from 'gt-next';

export default function App({
  Component,
  pageProps,
}: AppProps<WithGTStaticProps>) {
  const { locale, translations } = pageProps;

  return (
    <GTProvider
      locale={locale}
      translations={translations}
      _reload={({ locale: nextLocale }) => {
        void Router.push(Router.pathname, Router.asPath, {
          locale: nextLocale,
        });
      }}
    >
      <Component {...pageProps} />
    </GTProvider>
  );
}
```

Для страниц с серверным рендерингом вместо этого используйте `WithGTServerSideProps`. Колбэк заменяет стандартную для provider полную перезагрузку страницы на навигацию через Pages Router.

## Как работает определение локали [#locale-detection]

Next.js определяет локаль запроса до выполнения `getServerSideProps` или `getStaticProps`:

* Префикс локали, например `/fr/about`, задаёт `context.locale` значение `fr`.
* Cookie-файл `NEXT_LOCALE` хранит предпочтение пользователя и может перенаправить запрос без префикса.
* Если предпочтение не сохранено, локаль может быть выбрана на основе языковых настроек браузера.
* `defaultLocale` используется, если ни одна другая настроенная локаль не подходит.

Установите `localeDetection: false` в `nextConfig.i18n`, чтобы отключить автоматические перенаправления на основе настроек браузера и cookie-файлов. Маршруты с префиксом локали и навигация роутера с учётом локали продолжат работать.

<Callout type="info">
  **Изменено в v11.1.3:** Настройка Pages Router теперь использует интернационализированную маршрутизацию Next.js вместо middleware `gt-next` и сегмента `pages/[locale]`. Существующее определение локали запроса остаётся резервным вариантом для совместимости, если Next.js не предоставляет `context.locale`.
</Callout>

## Next steps

- /docs/react/nextjs-pages-router-quickstart
- /docs/react/nextjs/pages-router-static-site-generation
- /docs/react/nextjs/config

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.