# General Translation React SDKs (gt-react, gt-next, gt-react-native): Pages Router locale routing
URL: https://generaltranslation.com/en-GB/docs/react/nextjs/pages-router-middleware.mdx
---

title: Pages Router locale routing
description: How to configure Next.js internationalised routing with General Translation in the Pages Router.
related:
  links:
    - /docs/react/nextjs-pages-router-quickstart
    - /docs/react/nextjs/pages-router-static-site-generation
    - /docs/react/nextjs/config

---

The Pages Router uses Next.js internationalised routing to resolve localised URLs and pass the active locale to `gt-next`. Routes stay in their normal locations under `pages`.

## Configure locale routing [#configure-routing]

Import the locale settings from `gt.config.json` into `next.config.ts`. The `locales` array must include `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 serves the default locale without a prefix and prefixes the others. For example, English uses `/about` and French uses `/fr/about`.

Keep each page at the root of `pages`; do not add a `[locale]` segment:

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

    <File name="index.tsx" />

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

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

`withGTServerSideProps` and `withGTStaticProps` read the locale from the Next.js data-function context. No `gt-next` middleware, `proxy.ts`, or `middleware.ts` is required for Pages Router locale routing.

## Connect locale changes [#locale-changes]

Pass a locale-aware `_reload` callback to [`GTProvider`](/docs/react/reference/components/gt-provider) so locale changes use Pages Router navigation and load the selected locale&#39;s page props:

```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>
  );
}
```

For server-rendered pages, use `WithGTServerSideProps` instead. The callback replaces the provider&#39;s default full-page reload with a Pages Router navigation.

## How locale detection works [#locale-detection]

Next.js resolves the request locale before `getServerSideProps` or `getStaticProps` runs:

* A locale prefix such as `/fr/about` sets `context.locale` to `fr`.
* The `NEXT_LOCALE` cookie stores the user&#39;s preference and can redirect an unprefixed request.
* Browser language preferences can select a locale when no preference is stored.
* `defaultLocale` is used when no other configured locale matches.

Set `localeDetection: false` inside `nextConfig.i18n` to disable automatic browser and cookie redirects. Locale-prefixed routes and locale-aware router navigation continue to work.

<Callout type="info">
  **Changed in v11.1.3:** Pages Router setup now uses Next.js internationalised routing instead of `gt-next` middleware and a `pages/[locale]` segment. Existing request detection remains as a compatibility fallback when Next.js does not provide `context.locale`.
</Callout>
## Next steps

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