En este capítulo, nos enfocaremos en cómo crear y manejar las rutas y páginas dentro del App Router de Next.js 13. Uno de los puntos más importantes de cualquier aplicación web es su sistema de navegación, y el App Router proporciona una manera intuitiva de organizar y definir rutas.

Rutas Estáticas

Las rutas estáticas son aquellas que no cambian y son fijas en la aplicación. En Next.js, crear una ruta estática es tan sencillo como definir un archivo page.js dentro de una carpeta correspondiente a la ruta. Por ejemplo, para crear una ruta estática para una página de "contacto", podemos hacerlo de la siguiente manera:

javascript

En este caso, la ruta estática /contact corresponde a la carpeta contact/ dentro de app/, y la página se define en el archivo page.js.

Rutas Dinámicas

En aplicaciones más complejas, es común necesitar rutas dinámicas, donde parte de la URL cambia dependiendo de los datos que se muestren. El App Router de Next.js permite manejar rutas dinámicas mediante el uso de corchetes en los nombres de las carpetas.

Por ejemplo, si queremos crear una página de perfil donde la URL incluya el nombre de usuario, podríamos hacer lo siguiente:

javascript

En este ejemplo, la carpeta [username] indica que la ruta es dinámica y el nombre de usuario es capturado desde la URL. El valor se pasa a la página a través del objeto params.

Rutas Anidadas

Otro concepto importante en el sistema de rutas del App Router es la capacidad de crear rutas anidadas. Las rutas anidadas permiten que una ruta principal contenga subrutas dentro de sí misma. Esto es útil para crear secciones de una página que contengan subsecciones.

Supongamos que tenemos una página de "blog" que contiene varias entradas individuales:

javascript

En este caso, /blog es la página principal del blog, mientras que /blog/[postId] maneja las páginas individuales para cada entrada del blog.

Manejo de Rutas 404

Next.js también permite crear una página personalizada para manejar las rutas que no existen, es decir, una página de error 404. Para ello, basta con crear un archivo not-found.js dentro de la carpeta app/.

javascript

Esta página se mostrará automáticamente cuando un usuario intente acceder a una ruta que no está definida.

Conclusión

En este capítulo, hemos visto cómo crear y manejar rutas estáticas, dinámicas, anidadas y cómo manejar rutas no existentes mediante una página de error 404. El sistema de enrutamiento en el App Router de Next.js 13 es potente y flexible, lo que facilita el manejo de URLs complejas en nuestras aplicaciones.