# General Translation React SDKs (gt-react, gt-next, gt-react-native): createNextMiddleware
URL: https://generaltranslation.com/es/docs/react/nextjs/reference/functions/create-next-middleware.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Agrega enrutamiento y detección por configuración regional a una aplicación de Next.js con General Translation. Referencia de API de createNextMiddleware.
La función `createNextMiddleware` de `gt-next/middleware` detecta la configuración regional de cada visitante, la guarda en una cookie y lo redirige a la versión localizada de una página.
Usa la [guía de middleware de App Router](/docs/react/nextjs/app-router-middleware) para la configuración actual. Las aplicaciones de Pages Router usan el [enrutamiento internacionalizado de Next.js](/docs/react/nextjs/pages-router-middleware) en su lugar.
*El middleware es opcional cuando no necesitas detección de la configuración regional en tiempo de solicitud ni URLs con prefijo de configuración regional. Sin él, los selectores de configuración regional mantienen las URLs sin prefijo, guardan la configuración regional seleccionada en una cookie y actualizan el contenido del App Router.*
## Descripción general [#overview]
Crea el middleware y expórtalo, junto con un path matcher, desde tu archivo de middleware. Colócalo en la raíz del proyecto — `proxy.ts` en Next.js 16+ o `middleware.ts` en Next.js 15 y versiones anteriores — no dentro de `app/` ni de `pages/`.
```ts title="proxy.ts"
import { createNextMiddleware } from 'gt-next/middleware';
export default createNextMiddleware();
export const config = {
// Coincide con todas las rutas excepto rutas de API, archivos estáticos e internos de Next.js
matcher: ['/((?!api|static|.*\\..*|_next).*)'],
};
```
## Cómo funciona [#how-it-works]
El middleware determina la configuración regional de cada solicitud a partir de estas fuentes, en este orden:
1. **Restablecer cookie de configuración regional** — la configuración regional que se acaba de seleccionar en el navegador mientras hay pendiente un restablecimiento del enrutamiento de configuración regional.
2. **Configuración regional de la URL** — un prefijo de configuración regional compatible, como `/es/about`, o una ruta de configuración regional predeterminada sin prefijo configurada.
3. **Cookie de configuración regional** — la configuración regional seleccionada previamente por el visitante cuando no hay ningún restablecimiento pendiente.
4. **Cookie de configuración regional de referencia** — la configuración regional de la ruta de cliente anterior cuando no hay ningún restablecimiento pendiente.
5. **Cabeceras del navegador** — la cabecera `Accept-Language`, a menos que [`ignoreBrowserLocales`](/docs/react/nextjs/config#ignore-browser-locales) esté habilitado.
6. **Configuración regional predeterminada** — tu `defaultLocale` configurado como valor predeterminado.
Luego establece una cookie de configuración regional y, cuando `localeRouting` está habilitado, redirige o reescribe a la ruta localizada correcta. De forma predeterminada, `defaultLocale` no lleva prefijo (`/about` sigue siendo `/about`), mientras que las demás configuraciones regionales sí (`/es/about`). Los códigos de configuración regional se estandarizan a su forma canónica cuando los servicios de General Translation están habilitados, y las configuraciones regionales configuradas no compatibles generan una advertencia en tiempo de compilación.
## Opciones [#options]
`createNextMiddleware` toma un único objeto de opciones. Todos los campos son opcionales.
| Opción | Descripción | Tipo | Opcional | Predeterminado |
| ----------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ---------------- | -------- | -------------- |
| [`localeRouting`](#locale-routing) | Habilita el enrutamiento basado en la configuración regional. | `boolean` | Sí | `true` |
| [`prefixDefaultLocale`](#prefix-default-locale) | Añade también a la URL el prefijo de la configuración regional predeterminada. | `boolean` | Sí | `false` |
| [`ignoreSourceMaps`](#ignore-source-maps) | Omite las solicitudes de mapas de origen de Next.js. | `boolean` | Sí | `true` |
| [`pathConfig`](#path-config) | Alias de rutas localizadas. | `object` | Sí | `{}` |
| [`routeOverrides`](#route-overrides) | Usa una implementación de página específica de la configuración regional sin cambiar su URL pública. | `RouteOverrides` | Sí | `{}` |
*Nota: para restringir en qué rutas se ejecuta el middleware, configura [`pathRegex`](/docs/react/nextjs/config#path-regex) en `withGTConfig`; no es una opción del middleware. El `matcher` de tu `config` exportado es lo que Next.js usa para decidir si el middleware se ejecuta en absoluto.*
### `localeRouting` [#locale-routing]
**Tipo** `boolean` · **Opcional** · **Predeterminado** `true`
Habilita el enrutamiento basado en la configuración regional y las redirecciones. Cuando es `false`, el middleware sigue detectando y almacenando la configuración regional, pero no añade prefijos de configuración regional ni reescribe las rutas.
### `prefixDefaultLocale` [#prefix-default-locale]
**Tipo** `boolean` · **Opcional** · **Predeterminado** `false`
Cuando es `false` (el valor predeterminado), la configuración regional predeterminada se sirve sin prefijo (`/about`), mientras que las demás sí llevan prefijo (`/es/about`). Cuando es `true`, todas las configuraciones regionales llevan prefijo, incluida la predeterminada (`/en/about`).
### `ignoreSourceMaps` [#ignore-source-maps]
**Tipo** `boolean` · **Opcional** · **Predeterminado** `true`
Cuando es `true`, las solicitudes de mapas de origen de Next.js se transfieren sin modificaciones.
### `pathConfig` [#path-config]
**Tipo** `object` · **Opcional** · **Predeterminado** `{}`
Asocia rutas compartidas con rutas localizadas, de modo que una ruta pueda tener una URL distinta para cada configuración regional. Cada clave es la ruta compartida; cada valor es una única ruta localizada o un mapa por configuración regional.
```ts title="proxy.ts"
export default createNextMiddleware({
pathConfig: {
// Inglés: /products, Francés: /fr/produits
'/products': {
fr: '/produits',
},
// Dinámica: /product/123, /fr/produit/123
'/product/[id]': {
fr: '/produit/[id]',
},
// Catch-all obligatorio: /blog/2026/launch, /fr/articles/2026/launch
'/blog/[...slug]': {
fr: '/articles/[...slug]',
},
// Catch-all opcional: /news o /news/latest, /fr/actualites o /fr/actualites/latest
'/news/[[...slug]]': {
fr: '/actualites/[[...slug]]',
},
},
});
```
### `routeOverrides` [#route-overrides]
**Type** `RouteOverrides` · **Optional** · **Default** `{}`
Asocia una configuración regional con patrones de ruta compartidos que cuentan con una implementación de página específica para esa configuración regional. La URL pública sigue usando la ruta compartida o su alias de [`pathConfig`](#path-config), mientras que el middleware reescribe la solicitud hacia una ruta con un segundo segmento estático de configuración regional.
Por ejemplo, esta estructura de archivos ofrece a los visitantes franceses implementaciones personalizadas de una página estática, una página de producto dinámica y un conjunto de páginas de blog:
Configura cada anulación con su patrón de ruta compartido:
```ts title="proxy.ts"
export default createNextMiddleware({
routeOverrides: {
fr: [
'/home', // Ruta estática
'/product/[id]', // Parámetro dinámico
'/blog/[[...slug]]', // Ruta y todas sus rutas hijas
],
},
});
```
* `/home` usa `app/[locale]/fr/home/page.tsx` para el francés y el archivo compartido `app/[locale]/home/page.tsx` para los demás locales.
* `/product/[id]` añade una página de producto solo para el francés, conservando el `id` dinámico.
* `/blog/[[...slug]]` añade una familia de rutas de blog solo para el francés, que incluye `/blog`, `/blog/authors`, `/blog/posts` y `/blog/posts/[...slug]`.
Las anulaciones se ignoran cuando `localeRouting` es `false`. Las claves de configuración regional se estandarizan cuando los servicios de General Translation están habilitados.
Las APIs de cache y de layout ven la ruta interna. Pasa el destino de la reescritura, por ejemplo `/fr/fr/home`, a `revalidatePath` de Next.js. Desde el layout `[locale]`, `useSelectedLayoutSegments` también incluye el segmento de configuración regional estático de la anulación.
Usa [``](/docs/react/nextjs/link) de `gt-next/link` para la navegación interna, de modo que las rutas con prefijo de configuración regional se generen antes de navegar, sin una redirección adicional del middleware.
## Ejemplo [#example]
```ts title="proxy.ts"
import { createNextMiddleware } from 'gt-next/middleware';
export default createNextMiddleware({
prefixDefaultLocale: true,
pathConfig: {
'/about': {
fr: '/a-propos',
},
},
});
export const config = {
matcher: ['/((?!api|static|.*\\..*|_next).*)'],
};
```
*Advertencia: prueba bien tu matcher. Un matcher demasiado amplio puede provocar bucles de redirección o hacer que los recursos estáticos dejen de funcionar.*
## Sitemap
See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.