Como crear rutas en Next.js 13

¿Te vuelves loc@ con Next.js 13 y sus rutas?. En un momento vemos cuales son las diferencias.

En Next.js 12 o anterior usábamos la carpeta pages. Cada archivo en el directorio /src/pages se convierte automáticamente en una ruta accesible en tu aplicación.

Por ejemplo, si tienes un archivo pages/about.js, se creará una ruta /about en tu aplicación Next.js. Si tienes un archivo pages/blog/post.js, se creará una ruta /blog/post en tu aplicación.

Además de la estructura de archivos y carpetas, Next.js también proporciona una funcionalidad adicional para la creación de rutas utilizando parámetros dinámicos. Puedes crear rutas dinámicas mediante la inclusión de corchetes [] en el nombre de un archivo dentro del directorio pages. Por ejemplo, un archivo llamado pages/blog/[slug].js creará una ruta dinámica donde slug puede ser cualquier valor en la URL.

Lo primero decirte que puedes seguir utilizando la carpeta pages como hacías en las anteriores versiones. Simplemente cuando hagas las instalación de Next indica que quieres seguir utilizando la carpeta /src

Pero si no es así, utilizarás directamente la carpeta app en vez de src. La carpeta app tiene ventajas contra la carpeta /src.

La nueva estructura nos permite incluir archivos adicionales que podemos utilizar

Si has llegado hasta aquí y no sabes aún de que va Next.js puedes leer mi post Crea tu primera aplicación en Next.js 13