Estructura y Organización del Proyecto

Esta página proporciona una visión general de todas las convenciones de carpetas y archivos en Next.js, así como recomendaciones para organizar tu proyecto.

Convenciones de carpetas y archivos

Carpetas de nivel superior

Las carpetas de nivel superior se utilizan para organizar el código y los recursos estáticos de tu aplicación.


`app`	Enrutador de la aplicación (App Router)
`pages`	Enrutador de páginas (Pages Router)
`public`	Recursos estáticos para servir
`src`	Carpeta opcional de código fuente

Archivos de nivel superior

Los archivos de nivel superior se utilizan para configurar tu aplicación, gestionar dependencias, ejecutar middleware, integrar herramientas de monitoreo y definir variables de entorno.


Next.js
`next.config.js`	Archivo de configuración para Next.js
`package.json`	Dependencias y scripts del proyecto
`instrumentation.ts`	Archivo de OpenTelemetry e Instrumentación
`middleware.ts`	Middleware de solicitudes en Next.js
`.env`	Variables de entorno
`.env.local`	Variables de entorno locales
`.env.production`	Variables de entorno de producción
`.env.development`	Variables de entorno de desarrollo
`.eslintrc.json`	Archivo de configuración para ESLint
`.gitignore`	Archivos y carpetas ignorados por Git
`next-env.d.ts`	Archivo de declaración TypeScript para Next.js
`tsconfig.json`	Archivo de configuración para TypeScript
`jsconfig.json`	Archivo de configuración para JavaScript

Convenciones de archivos


`_app`	`.js` `.jsx` `.tsx`	App personalizada
`_document`	`.js` `.jsx` `.tsx`	Documento personalizado
`_error`	`.js` `.jsx` `.tsx`	Página de error personalizada
`404`	`.js` `.jsx` `.tsx`	Página de error 404
`500`	`.js` `.jsx` `.tsx`	Página de error 500

Rutas


Convención de carpetas
`index`	`.js` `.jsx` `.tsx`	Página principal
`carpeta/index`	`.js` `.jsx` `.tsx`	Página anidada
Convención de archivos
`index`	`.js` `.jsx` `.tsx`	Página principal
`archivo`	`.js` `.jsx` `.tsx`	Página anidada

Rutas dinámicas


Convención de carpetas
`[carpeta]/index`	`.js` `.jsx` `.tsx`	Segmento de ruta dinámica
`[...carpeta]/index`	`.js` `.jsx` `.tsx`	Segmento de ruta catch-all
`[[...carpeta]]/index`	`.js` `.jsx` `.tsx`	Segmento de ruta catch-all opcional
Convención de archivos
`[archivo]`	`.js` `.jsx` `.tsx`	Segmento de ruta dinámica
`[...archivo]`	`.js` `.jsx` `.tsx`	Segmento de ruta catch-all
`[[...archivo]]`	`.js` `.jsx` `.tsx`	Segmento de ruta catch-all opcional