---
createdAt: 2024-08-13
updatedAt: 2026-01-26
title: Reescrituras de URL personalizadas
description: Aprende cómo configurar y usar reescrituras de URL personalizadas en Intlayer para definir rutas específicas por locale.
keywords:
- Reescrituras de URL personalizadas
- Enrutamiento
- Internacionalización
- i18n
slugs:
- doc
- concept
- custom_url_rewrites
history:
- version: 8.0.0
date: 2026-01-25
changes: Implementar reescrituras de URL centralizadas con formateadores específicos por framework y el hook useRewriteURL.
---
# Implementación de reescrituras de URL personalizadas
Intlayer admite reescrituras de URL personalizadas, lo que te permite definir rutas específicas por locale que difieren de la estructura estándar `/locale/path`. Esto habilita URLs como `/about` para inglés y `/a-propos` para francés mientras mantiene la lógica interna de la aplicación canónica.
## Configuración
Las reescrituras personalizadas se configuran en la sección `routing` de tu archivo `intlayer.config.ts` usando formateadores específicos del framework. Estos formateadores proporcionan la sintaxis correcta para el router que prefieras.
<Tabs group='routers'>
<Tab label="Next.js" value="nextjs">
```typescript fileName="intlayer.config.ts"
import { Locales, type IntlayerConfig } from "intlayer";
import { nextjsRewrite } from "intlayer/routing";
const config: IntlayerConfig = {
// ...
routing: {
mode: "prefix-no-default",
rewrite: nextjsRewrite({
"/[locale]/about": {
fr: "/[locale]/a-propos",
es: "/[locale]/acerca-de",
},
"/[locale]/products/[id]": {
fr: "/[locale]/produits/[id]",
es: "/[locale]/productos/[id]",
},
}),
},
};
export default config;
```
</Tab>
<Tab label="React Router" value="reactrouter">
```typescript fileName="intlayer.config.ts"
import { Locales, type IntlayerConfig } from "intlayer";
import { reactRouterRewrite } from "intlayer/routing";
const config: IntlayerConfig = {
// ...
routing: {
mode: "prefix-all",
rewrite: reactRouterRewrite({
"/:locale/about": {
fr: "/:locale/a-propos",
es: "/:locale/acerca-de",
},
"/:locale/products/:id": {
fr: "/:locale/produits/:id",
es: "/:locale/productos/:id",
},
}),
},
};
export default config;
```
</Tab>
<Tab label="TanStack Router" value="tanstackrouter">
```typescript fileName="intlayer.config.ts"
import { Locales, type IntlayerConfig } from "intlayer";
import { tanstackRouterRewrite } from "intlayer/routing";
const config: IntlayerConfig = {
// ...
routing: {
mode: "prefix-all",
rewrite: tanstackRouterRewrite({
"/$locale/about": {
fr: "/$locale/a-propos",
es: "/$locale/acerca-de",
},
"/$locale/products/$id": {
fr: "/$locale/produits/$id",
es: "/$locale/productos/$id",
},
}),
},
};
export default config;
```
</Tab>
<Tab label="Vue Router" value="vuerouter">
```typescript fileName="intlayer.config.ts"
import { Locales, type IntlayerConfig } from "intlayer";
import { vueRouterRewrite } from "intlayer/routing";
const config: IntlayerConfig = {
// ... // configuración adicional
routing: {
mode: "prefix-all",
rewrite: vueRouterRewrite({
"/:locale/about": {
fr: "/:locale/a-propos",
es: "/:locale/acerca-de",
},
"/:locale/products/:id": {
fr: "/:locale/produits/:id",
es: "/:locale/productos/:id",
},
}),
},
};
export default config;
```
</Tab>
<Tab label="SvelteKit" value="sveltekit">
```typescript fileName="intlayer.config.ts"
import { Locales, type IntlayerConfig } from "intlayer";
import { svelteKitRewrite } from "intlayer/routing";
const config: IntlayerConfig = {
// ...
routing: {
mode: "prefix-all",
rewrite: svelteKitRewrite({
"/[locale]/about": {
fr: "/[locale]/a-propos",
es: "/[locale]/acerca-de",
},
"/[locale]/products/[id]": {
fr: "/[locale]/produits/[id]",
es: "/[locale]/productos/[id]",
},
}),
},
};
export default config;
```
</Tab>
<Tab label="Solid Router" value="solidrouter">
```typescript fileName="intlayer.config.ts"
import { Locales, type IntlayerConfig } from "intlayer";
import { solidRouterRewrite } from "intlayer/routing";
const config: IntlayerConfig = {
// ...
routing: {
mode: "prefix-all",
rewrite: solidRouterRewrite({
"/:locale/about": {
fr: "/:locale/a-propos",
es: "/:locale/acerca-de",
},
"/:locale/products/:id": {
fr: "/:locale/produits/:id",
es: "/:locale/productos/:id",
},
}),
},
};
export default config;
```
</Tab>
<Tab label="Nuxt" value="nuxt">
```typescript fileName="intlayer.config.ts"
import { Locales, type IntlayerConfig } from "intlayer";
import { nuxtRewrite } from "intlayer/routing";
const config: IntlayerConfig = {
// ...
routing: {
mode: "prefix-all",
rewrite: nuxtRewrite({
"/[locale]/about": {
fr: "/[locale]/a-propos",
es: "/[locale]/acerca-de",
},
"/[locale]/products/[id]": {
fr: "/[locale]/produits/[id]",
es: "/[locale]/productos/[id]",
},
}),
},
};
export default config;
```
</Tab>
</Tabs>
### Formatters disponibles
Intlayer proporciona formatters para todos los frameworks populares:
- `nextjsRewrite`: Para Next.js App Router. Soporta `[slug]`, `[...slug]` (1+), y `[[...slug]]` (0+).
- `svelteKitRewrite`: Para SvelteKit. Soporta `[slug]`, `[...path]` (0+), y `[[optional]]` (0-1).
- `reactRouterRewrite`: Para React Router. Soporta `:slug` y `*` (0+).
- `vueRouterRewrite`: Para Vue Router 4. Soporta `:slug`, `:slug?` (0-1), `:slug*` (0+), y `:slug+` (1+).
- `solidRouterRewrite`: Para Solid Router. Soporta `:slug` y `*slug` (0+).
- `tanstackRouterRewrite`: Para TanStack Router. Soporta `$slug` y `*` (0+).
- `nuxtRewrite`: Para Nuxt 3. Soporta `[slug]` y `[...slug]` (0+).
- `viteRewrite`: Formateador genérico para cualquier proyecto basado en Vite. Normaliza la sintaxis para el proxy de Vite.
### Patrones avanzados
Intlayer normaliza internamente estos patrones a una sintaxis unificada, permitiendo coincidencias y generación de rutas sofisticadas:
- **Segmentos opcionales**: `[[optional]]` (SvelteKit) o `:slug?` (Vue/React) se admiten.
- **Catch-all (cero o más)**: `[[...slug]]` (Next.js), `[...path]` (SvelteKit/Nuxt) o `*` (React/TanStack) permiten coincidir con múltiples segmentos.
- **Catch-all obligatorio (uno o más)**: `[...slug]` (Next.js) o `:slug+` (Vue) aseguran que al menos un segmento esté presente.
## Corrección de URL en el cliente: `useRewriteURL`
Para asegurarse de que la barra de direcciones del navegador siempre refleje la URL localizada "bonita", Intlayer proporciona el hook `useRewriteURL`. Este hook actualiza silenciosamente la URL usando `window.history.replaceState` cuando un usuario llega a una ruta canónica.
### Uso en Frameworks
<Tabs group='framework'>
<Tab label="Next.js" value="nextjs">
```tsx
'use client';
import { useRewriteURL } from "next-intlayer";
const MyLayout = ({ children }) => {
useRewriteURL(); // Corrige automáticamente /fr/about a /fr/a-propos
return <>{children}</>;
};
```
</Tab>
<Tab label="React Router" value="reactrouter">
```tsx
'use client';
import { useRewriteURL } from "react-intlayer";
const MyLayout = ({ children }) => {
useRewriteURL(); // Corrige automáticamente /fr/about a /fr/a-propos
return <>{children}</>;
};
```
</Tab>
<Tab label="Vue" value="vue">
```vue
<script setup>
import { useRewriteURL } from "vue-intlayer";
useRewriteURL();
</script>
```
</Tab>
<Tab label="Solid" value="solid">
```tsx
import { useRewriteURL } from "solid-intlayer";
const Layout = (props) => {
useRewriteURL();
return <>{props.children}</>;
};
```
</Tab>
<Tab label="Svelte" value="svelte">
```svelte
<script>
import { useRewriteURL } from "svelte-intlayer";
useRewriteURL();
</script>
```
</Tab>
</Tabs>
## Integración con routers y proxies
Los proxies del lado del servidor de Intlayer (Vite y Next.js) gestionan automáticamente las reescrituras personalizadas para garantizar la coherencia SEO.
1. **Reescrituras internas**: Cuando un usuario visita `/fr/a-propos`, el proxy lo mapea internamente a `/fr/about` para que tu framework haga coincidir la ruta correcta.
2. **Redirecciones autoritativas**: Si un usuario escribe manualmente `/fr/about`, el proxy emite una redirección 301/302 a `/fr/a-propos`, asegurando que los motores de búsqueda indexen solo una versión de la página.
### Integración con Next.js
La integración con Next.js se gestiona completamente mediante el middleware `intlayerProxy`.
```typescript fileName="middleware.ts"
import { intlayerProxy } from "next-intlayer/middleware";
import { NextRequest } from "next/server";
export function middleware(request: NextRequest) {
return intlayerProxy(request);
}
```
### Integración con Vite
Para SolidJS, Vue y Svelte, el plugin de Vite `intlayerProxy` gestiona las reescrituras durante el desarrollo.
```typescript fileName="vite.config.ts"
import { defineConfig } from "vite";
import { intlayerProxy } from "vite-intlayer";
export default defineConfig({
plugins: [intlayerProxy()],
});
```
## Características clave
### 1. Reescrituras multi-contexto
Cada formateador genera un `RewriteObject` que contiene reglas especializadas para distintos consumidores:
- `url`: Optimizado para la generación de URL en el cliente (elimina segmentos de locale).
- `nextjs`: Conserva `[locale]` para el middleware de Next.js.
- `vite`: Conserva `:locale` para los proxies de Vite.
### 2. Normalización automática de patrones
Intlayer normaliza internamente todas las sintaxis de patrones (p. ej., convirtiendo `[param]` en `:param`) para que el emparejamiento sea consistente independientemente del framework de origen.
### 3. URLs canónicas para SEO
Al aplicar redirecciones desde rutas canónicas hacia alias más claros, Intlayer evita problemas de contenido duplicado y mejora la capacidad de descubrimiento del sitio.
## Utilidades principales
- `getLocalizedUrl(url, locale)`: Genera una URL localizada respetando las reglas de reescritura.
- `getCanonicalPath(path, locale)`: Resuelve una URL localizada de vuelta a su ruta canónica interna.
- `getRewritePath(pathname, locale)`: Detecta si un pathname necesita ser corregido a su alias localizado más legible.
