En este capítulo exploraremos cómo se organiza un proyecto en Next.js utilizando el App Router. La correcta estructura de carpetas y archivos es fundamental para mantener el código ordenado y facilitar su escalabilidad a medida que el proyecto crece. Next.js 13 introduce una nueva estructura que permite gestionar rutas, layouts y componentes de manera más eficiente.

Estructura básica de un proyecto en Next.js

La estructura de un proyecto con el App Router sigue un patrón claro. A continuación, se muestra un ejemplo de la organización típica de carpetas:

bash

Desglose de las carpetas principales

• app/: Aquí es donde vive la lógica del enrutamiento. Dentro de esta carpeta, puedes crear carpetas que correspondan a las rutas de tu aplicación, y en cada una de ellas, un archivo page.js que define la página correspondiente.

• public/: Esta carpeta contiene los archivos estáticos accesibles públicamente, como imágenes, fuentes y otros recursos que no pasan por el proceso de compilación de Next.js.

• styles/: Carpeta donde se alojan los estilos globales o específicos para distintas partes de la aplicación.

• package.json: Archivo de configuración que gestiona las dependencias y scripts del proyecto.

• next.config.js: Archivo de configuración para personalizar el comportamiento de Next.js.

Rutas en Next.js 13

El sistema de rutas en el App Router de Next.js es muy intuitivo. Cada carpeta dentro de app/ representa una ruta. Por ejemplo, la carpeta about/ dentro de app/ corresponde a la ruta /about. A continuación se muestra cómo definir una ruta básica:

javascript

Como se observa, Next.js automáticamente asocia la ruta con la carpeta correspondiente, lo que simplifica la gestión de las rutas.

Layouts en Next.js 13

Uno de los grandes beneficios del App Router es la capacidad de definir layouts de manera sencilla. Los layouts se definen en archivos layout.js y se pueden reutilizar en varias páginas. Un layout puede contener elementos comunes como encabezados o pies de página.

javascript

Este layout se aplicará a todas las rutas dentro de la carpeta app/, lo que facilita la consistencia en la presentación de la aplicación.

Configuración adicional en Next.js

Next.js permite realizar configuraciones adicionales a través del archivo next.config.js. Por ejemplo, es posible personalizar el comportamiento de las rutas, agregar optimizaciones de rendimiento y más. Aquí tienes un ejemplo básico:

javascript

Este archivo de configuración es clave para ajustar el comportamiento de la aplicación según las necesidades del proyecto.

Conclusión

La estructura de un proyecto en Next.js 13 con el App Router permite una organización clara y escalable, ideal para el desarrollo de aplicaciones modernas. En los próximos capítulos, profundizaremos en temas como el manejo de datos, la creación de rutas dinámicas y cómo optimizar nuestra aplicación.