Directorio src

Como alternativa a tener los directorios especiales app o pages de Next.js en la raíz de tu proyecto, Next.js también admite el patrón común de colocar el código de la aplicación bajo la carpeta src.

Esto separa el código de la aplicación de los archivos de configuración del proyecto que generalmente se encuentran en la raíz, lo cual es preferido por algunos individuos y equipos.

Para usar la carpeta src, mueve la carpeta del Enrutador app o del Enrutador pages a src/app o src/pages respectivamente.

Ejemplo de estructura de carpetas con la carpeta `src`

Es bueno saber:

  • El directorio /public debe permanecer en la raíz de tu proyecto.
  • Los archivos de configuración como package.json, next.config.js y tsconfig.json deben permanecer en la raíz del proyecto.
  • Los archivos .env.* deben permanecer en la raíz del proyecto.
  • src/app o src/pages serán ignorados si app o pages están presentes en el directorio raíz.
  • Si estás usando src, probablemente también moverás otras carpetas de la aplicación como /components o /lib.
  • Si estás usando Middleware, asegúrate de colocarlo dentro de la carpeta src.
  • Si estás usando Tailwind CSS, necesitarás agregar el prefijo /src en la sección de contenido del archivo tailwind.config.js (ver documentación de configuración de contenido).
  • Si estás usando rutas TypeScript para importaciones como @/*, debes actualizar el objeto paths en tsconfig.json para incluir src/.