En este capítulo, exploraremos cómo implementar redirecciones y reescrituras en una aplicación Next.js 13 utilizando el Page Router. Estas técnicas son útiles para controlar cómo los usuarios y los motores de búsqueda acceden a nuestras rutas, permitiendo redirigir tráfico de una URL a otra o reescribir rutas de manera transparente.

Redirecciones en Next.js

Las redirecciones permiten enviar a los usuarios de una URL a otra. Esto es útil cuando cambias la estructura de las rutas de tu aplicación o cuando deseas redirigir tráfico de una URL antigua a una nueva.

Implementación de Redirecciones en next.config.js

En Next.js, puedes configurar redirecciones directamente en el archivo next.config.js. Veamos cómo implementar una redirección simple.

javascript

Con esta configuración, cualquier solicitud a /old-page se redirigirá automáticamente a /new-page.

Tipos de Redirecciones

• Redirección Permanente (301): Se utiliza cuando la URL original ha sido movida de manera permanente a una nueva URL. Los motores de búsqueda actualizarán sus índices para reflejar la nueva URL.
• Redirección Temporal (302): Se utiliza cuando el cambio es temporal. Los motores de búsqueda no actualizarán sus índices.

Ejemplo de Redirección Temporal

javascript

Reescrituras en Next.js

Las reescrituras permiten modificar las rutas visibles para el usuario sin cambiar la URL en el navegador. Mientras que las redirecciones redirigen al usuario a una nueva URL, las reescrituras permiten mantener la URL original mientras se sirve contenido diferente.

Implementación de Reescrituras en next.config.js

Al igual que las redirecciones, las reescrituras se configuran en el archivo next.config.js. Aquí tienes un ejemplo de cómo reescribir una ruta:

javascript

En este caso, los usuarios pueden ver y navegar por la URL /blog/:slug, pero el contenido se obtiene desde /posts/:slug. Esto es útil para mantener URLs limpias o amigables mientras sirves el contenido desde una estructura interna diferente.

Ejemplo Completo: Redirecciones y Reescrituras

Podemos combinar redirecciones y reescrituras en el mismo archivo next.config.js para tener un control total sobre las rutas de nuestra aplicación.

javascript

Uso de Parámetros en Reescrituras

Las reescrituras también permiten el uso de parámetros dinámicos, lo que es útil cuando se manejan rutas dinámicas. Veamos un ejemplo:

javascript

Buenas Prácticas para Redirecciones y Reescrituras

1. Usar redirecciones permanentes cuando sea necesario: Utiliza redirecciones permanentes (301) para mover contenido de manera definitiva. Esto es beneficioso para el SEO.

2. Mantener URLs limpias con reescrituras: Utiliza reescrituras para mantener las URLs visibles lo más limpias y descriptivas posible, mientras organizas las rutas internas según lo necesites.

3. Evitar demasiadas redirecciones: Tener muchas redirecciones en cadena puede afectar el rendimiento de la aplicación y la experiencia del usuario. Trata de minimizar las redirecciones innecesarias.

Conclusión

El uso de redirecciones y reescrituras en Next.js 13 con el Page Router te permite controlar completamente la estructura de las URLs de tu aplicación, mejorando tanto la experiencia del usuario como el SEO. Las redirecciones son útiles para mover tráfico de una URL a otra, mientras que las reescrituras permiten cambiar la forma en que se manejan las rutas sin cambiar la URL visible.