En este capítulo, profundizaremos en cómo manejar las rutas y la navegación utilizando el Page Router en Next.js 13. Veremos cómo trabajar con rutas estáticas, dinámicas y anidadas, así como cómo implementar la navegación dentro de una aplicación utilizando las herramientas que Next.js proporciona.

Rutas Estáticas

Las rutas estáticas en Next.js son simples y directas. Como mencionamos en el capítulo anterior, cada archivo dentro de la carpeta pages/ representa una ruta en la aplicación. Aquí tienes un ejemplo básico de una página estática que maneja la ruta /about:

javascript

Este archivo about.js crea una página estática accesible desde la URL /about sin ninguna configuración adicional.

Rutas Dinámicas

En el Page Router de Next.js, las rutas dinámicas se manejan mediante la creación de archivos cuyos nombres están entre corchetes []. Estos archivos permiten que parte de la URL sea dinámica y se capture como un parámetro.

Por ejemplo, si queremos crear una página de perfil para diferentes usuarios, podemos crear un archivo llamado [username].js en la carpeta pages/profile/:

javascript

Aquí, params.username se captura directamente desde la URL. Si el usuario visita /profile/john, john se pasará como valor de params.username.

Rutas Anidadas

El Page Router también permite manejar rutas anidadas. Las rutas anidadas se utilizan cuando una sección de una aplicación tiene subrutas propias.

Supongamos que queremos crear una página de "blog" que contenga una lista de publicaciones y, dentro de cada publicación, una ruta dinámica para mostrar el contenido de esa publicación. Podemos organizar las rutas de la siguiente manera:

javascript

La ruta /blog muestra una lista de publicaciones, y las subrutas /blog/1, /blog/2, etc., manejarán el contenido específico de cada publicación.

Navegación en el Page Router

Para manejar la navegación entre rutas, Next.js utiliza el componente Link, que permite a los usuarios moverse de una página a otra sin recargar toda la aplicación.

Ejemplo de Navegación

Vamos a agregar un componente de navegación en nuestra aplicación:

javascript

El componente Link reemplaza las etiquetas <a> tradicionales para habilitar la navegación sin recarga, lo que mejora la experiencia del usuario al hacer que la navegación sea más fluida.

Manejo de Rutas 404

Next.js permite manejar rutas que no existen creando una página personalizada de error 404. Para ello, simplemente creamos un archivo llamado 404.js en la carpeta pages/.

javascript

La página 404 se mostrará automáticamente cuando un usuario acceda a una URL que no esté definida en las rutas de la aplicación.

Redirecciones en el Page Router

En Next.js, podemos manejar redirecciones utilizando la función getServerSideProps o configurando redirecciones directamente en el archivo next.config.js.

Redirección con getServerSideProps

Aquí tienes un ejemplo de cómo redirigir al usuario a otra página utilizando getServerSideProps:

javascript

Esta redirección es útil cuando deseas mover páginas o cambiar URLs sin romper la experiencia del usuario.

Conclusión

El Page Router en Next.js 13 ofrece una manera clara y sencilla de manejar rutas estáticas, dinámicas y anidadas. Con el uso del componente Link para la navegación, y características como redirecciones y manejo de rutas 404, podemos construir aplicaciones completas de manera eficiente.