# General Translation React SDKs (gt-react, gt-next): Pages Router middleware
URL: https://generaltranslation.com/en-GB/docs/react/nextjs/pages-router-middleware.mdx
---
title: Pages Router middleware
description: How to configure General Translation locale routing for the Next.js Pages Router.
related:
  links:
    - /docs/react/nextjs-pages-router-quickstart
    - /docs/react/nextjs/pages-router-static-site-generation
    - /docs/react/nextjs/reference/functions/create-next-middleware

---

Configure middleware and a `[locale]` root segment so Pages Router requests resolve to the correct localised route.

## Configure the middleware [#middleware]

Create `proxy.ts` in your project root (`middleware.ts` on Next.js 15 and earlier):

```ts title="proxy.ts"
import { createNextMiddleware } from 'gt-next/middleware';

export default createNextMiddleware();

export const config = {
  matcher: ['/((?!api|static|.*\\..*|_next).*)'],
};
```

The middleware detects the locale from the URL, cookie, browser headers, or the default locale. It then redirects or rewrites the request to the matching localised route.

## Add the locale route [#locale-route]

Move your Pages Router pages under `pages/[locale]`. Keep `_app.tsx` at the root of `pages`:

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

    <Folder name="[locale]">
      <File name="index.tsx" />

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

  <File name="proxy.ts" />
</Files>

The route segment receives the locale selected by the middleware. See [`createNextMiddleware`](/docs/react/nextjs/reference/functions/create-next-middleware) for routing options and localised path configuration.

## Connect locale changes [#locale-changes]

Override `_reload` on [`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 { useRouter } from 'next/router';
import { GTProvider, type WithGTStaticProps } from 'gt-next';

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

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

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

- /docs/react/nextjs-pages-router-quickstart
- /docs/react/nextjs/pages-router-static-site-generation
- /docs/react/nextjs/reference/functions/create-next-middleware