# General Translation React SDKs (gt-react, gt-next, gt-react-native): enrutamiento por configuración regional del Pages Router
URL: https://generaltranslation.com/es/docs/react/nextjs/pages-router-middleware.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Cómo configurar el enrutamiento internacionalizado de Next.js con General Translation en el Pages Router.

El Pages Router usa el enrutamiento internacionalizado de Next.js para resolver URL localizadas y pasar la configuración regional activa a `gt-next`. Las rutas permanecen en sus ubicaciones habituales en `pages`.

## Configura el enrutamiento por configuración regional [#configure-routing]

Importa la configuración regional de `gt.config.json` en `next.config.ts`. La lista `locales` debe incluir `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 sirve la configuración regional predeterminada sin prefijo y añade prefijos a las demás. Por ejemplo, el inglés usa `/about` y el francés, `/fr/about`.

Mantén todas las páginas en la raíz de `pages`; no añadas un segmento `[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` y `withGTStaticProps` leen la configuración regional del contexto de la función de datos de Next.js. No se necesita middleware de `gt-next`, `proxy.ts` ni `middleware.ts` para el enrutamiento por configuración regional del Pages Router.

## Conectar los cambios de configuración regional [#locale-changes]

Pasa un callback `_reload` adaptado a la configuración regional a [`GTProvider`](/docs/react/reference/components/gt-provider) para que los cambios de configuración regional utilicen la navegación de Pages Router y carguen las props de la página de la configuración regional seleccionada:

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

Para las páginas renderizadas en el servidor, usa `WithGTServerSideProps` en su lugar. El callback sustituye la recarga predeterminada de toda la página del proveedor por una navegación con Pages Router.

## Cómo funciona la detección de la configuración regional [#locale-detection]

Next.js resuelve la configuración regional de la solicitud antes de ejecutar `getServerSideProps` o `getStaticProps`:

* Un prefijo de configuración regional como `/fr/about` establece `context.locale` en `fr`.
* La cookie `NEXT_LOCALE` almacena la preferencia del usuario y puede redirigir una solicitud sin prefijo.
* Las preferencias de idioma del navegador pueden seleccionar una configuración regional cuando no hay ninguna preferencia almacenada.
* Se usa `defaultLocale` cuando no coincide ninguna otra configuración regional configurada.

Establece `localeDetection: false` dentro de `nextConfig.i18n` para desactivar las redirecciones automáticas basadas en el navegador y las cookies. Las rutas con prefijo de configuración regional y la navegación del router adaptada a la configuración regional seguirán funcionando.

<Callout type="info">
  **Modificado en v11.1.3:** La configuración de Pages Router ahora usa el enrutamiento internacionalizado de Next.js en lugar del middleware `gt-next` y un segmento `pages/[locale]`. La detección de solicitudes existente se mantiene como alternativa de compatibilidad cuando Next.js no proporciona `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.