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

Configure el middleware, un segmento raíz `[locale]` y una función para la configuración regional de la solicitud, de modo que las solicitudes del App Router se resuelvan a la ruta localizada correcta.

## Configura el middleware [#middleware]

Crea `proxy.ts` en el directorio raíz de tu proyecto (`middleware.ts` en Next.js 15 y versiones anteriores):

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

export default createNextMiddleware();

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

El middleware detecta la configuración regional a partir de la URL, la cookie, las cabeceras del navegador o la configuración regional predeterminada. Luego redirige o reescribe la solicitud a la ruta localizada que corresponda.

## Añade la ruta de la configuración regional [#locale-route]

Mueve las páginas de tu App Router a `app/[locale]`:

<Files>
  <Folder name="app">
    <Folder name="[locale]">
      <File name="layout.tsx" />

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

  <File name="getLocale.ts" />

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

El segmento de la ruta recibe la configuración regional seleccionada por el middleware. Consulta [`createNextMiddleware`](/docs/react/nextjs/reference/functions/create-next-middleware) para ver las opciones de enrutamiento, los [alias de rutas localizadas](/docs/react/nextjs/reference/functions/create-next-middleware#path-config) y las [implementaciones de páginas específicas de cada configuración regional](/docs/react/nextjs/reference/functions/create-next-middleware#route-overrides).

<Callout type="info">
  **Renderizado en tiempo de solicitud:** puedes mantener el layout raíz en `app/layout.tsx`
  y colocar solo las páginas bajo `app/[locale]`. Llama a
  [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) desde el
  layout raíz; el middleware proporciona la configuración regional de la solicitud, por lo que no necesitas
  un `getLocale.ts` personalizado. Usa la función de solicitud que aparece abajo al prerenderizar,
  ya que el middleware no se ejecuta durante la generación estática.
</Callout>

## Lee la configuración regional del directorio raíz [#root-locale]

Crea `getLocale.ts` en el directorio raíz del proyecto. `withGTConfig` detecta este archivo automáticamente.

```ts title="./getLocale.ts"
import { locale } from 'next/root-params';

export default async function getLocale() {
  return await locale();
}
```

El parámetro raíz proporciona la configuración regional sin leer las cabeceras de la solicitud ni las cookies.

<Callout type="info">
  **Next.js 15.2–15.4:** `next/root-params` está disponible en Next.js 15.5 y
  versiones posteriores. En las versiones 15.2 a 15.4, importa `unstable_rootParams` desde `next/server`
  y devuelve `(await unstable_rootParams())?.locale` en su lugar. Los parámetros raíz no están
  disponibles de ninguna forma antes de la versión 15.2, así que resuelve la configuración regional a partir de la solicitud
  allí.
</Callout>

## Cambiar de configuración regional [#locale-switching]

Cuando un visitante cambia de configuración regional, `gt-next` guarda la elección en una cookie y, por lo general, actualiza los Server Components con `router.refresh()`.

Si el visitante cambia a la configuración regional predeterminada mientras la URL actual se resuelve a otra, el navegador recarga la página para que el middleware pueda reescribir el pathname. Por ejemplo, con una configuración regional predeterminada sin prefijo, `/fr/about` se convierte en `/about`.

## Rechazar configuraciones regionales no admitidas [#validate-locales]

De forma predeterminada, una configuración regional de solicitud no admitida genera una advertencia y recurre a `defaultLocale`. Para rutas estrictas con prefijo de configuración regional, valida el parámetro de ruta en `app/[locale]/layout.tsx` y llama a `notFound()`:

```tsx title="app/[locale]/layout.tsx"
import { isLocaleSupported } from 'gt-next';
import { notFound } from 'next/navigation';

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;

  if (!isLocaleSupported(locale)) {
    notFound();
  }

  return (
    <html lang={locale}>
      <body>{children}</body>
    </html>
  );
}
```

[`isLocaleSupported`](/docs/react/nextjs/reference/functions/is-locale-supported) acepta alias de configuración regional y restringe el valor a `string`. El middleware no convierte automáticamente un segmento de ruta desconocido en un error 404.

## Next steps

- /docs/react/nextjs/app-router-static-site-generation
- /docs/react/nextjs/registering-request-locales
- /docs/react/nextjs/cache-components
- /docs/react/nextjs/locale-alias-seo

## Sitemap

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