El equipo de Vercel ha optado por un enfoque sencillo para el enrutamiento. Han decidido utilizar carpetas como rutas. Esto significa que, cuantas más carpetas agregues a tu carpeta app, más rutas obtendrás. Además, si creas una nueva carpeta dentro de otra carpeta (ruta), obtendrás rutas anidadas. Para comprender mejor estos conceptos, te sugerimos observar la imagen a continuación.

Ya hemos organizado la estructura de carpetas, pero ahora, profundicemos en los archivos que residen dentro de esas carpetas. Next.js admite dos tipos de archivos distintos: page.tsx y layout.tsx. La diferencia radica en sus funciones:

• layout.tsx es el archivo responsable de encapsular elementos de interfaz de usuario especiales compartidos entre varias páginas;
• Por otro lado, page.tsx se encarga de la interfaz de usuario específica de la ruta actual, adaptándose dinámicamente a los cambios en la URL. Representa la visualización asociada con el contenido y las características únicas pertinentes a la ruta en cuestión.

Volver al proyecto

Creación de una ruta anidada llamada /dashboard para la aplicación. Seguir los pasos a continuación para lograrlo:

1. Crear una nueva carpeta dashboard dentro de la carpeta app;
2. Dentro de la nueva carpeta dashboard, crear un archivo llamado page.tsx;
3. Copiar y pegar el siguiente contenido en el archivo page.tsx.

Después de completar todos los pasos necesarios, abre la siguiente URL http://localhost:3000/dashboard. Deberías ver la página creada (texto Dashboard Page).

En el siguiente capítulo, continuaremos trabajando en las páginas. Pero no te preocupes, aún seguimos avanzando.