Estructura de proyecto en Next.js
Esta página proporciona una visión general de la estructura de proyecto de una aplicación Next.js. Cubre archivos y carpetas de nivel superior, archivos de configuración y convenciones de enrutamiento dentro de los directorios app y pages.
Haga clic en los nombres de archivos y carpetas para aprender más sobre cada convención.
Carpetas de nivel superior
Las carpetas de nivel superior se utilizan para organizar el código y los recursos estáticos de su 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 su 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 para 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 a ignorar en 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 enrutamiento en app
Las siguientes convenciones de archivos se utilizan para definir rutas y manejar metadatos en el enrutador app.
Archivos de enrutamiento
layout | .js .jsx .tsx | Diseño (Layout) |
page | .js .jsx .tsx | Página |
loading | .js .jsx .tsx | UI de carga |
not-found | .js .jsx .tsx | UI de no encontrado |
error | .js .jsx .tsx | UI de error |
global-error | .js .jsx .tsx | UI de error global |
route | .js .ts | Endpoint API |
template | .js .jsx .tsx | Diseño re-renderizado |
default | .js .jsx .tsx | Página de respaldo para rutas paralelas |
Rutas anidadas
folder | Segmento de ruta |
folder/folder | Segmento de ruta anidado |
Rutas dinámicas
[folder] | Segmento de ruta dinámica |
[...folder] | Segmento de ruta catch-all |
[[...folder]] | Segmento de ruta catch-all opcional |
Grupos de rutas y carpetas privadas
(folder) | Agrupar rutas sin afectar el enrutamiento |
_folder | Excluir carpeta y segmentos hijos del enrutamiento |
Rutas paralelas e interceptadas
@folder | Ranura nombrada |
(.)folder | Interceptar mismo nivel |
(..)folder | Interceptar un nivel arriba |
(..)(..)folder | Interceptar dos niveles arriba |
(...)folder | Interceptar desde raíz |
Convenciones de archivos de metadatos
Iconos de la aplicación
favicon | .ico | Archivo favicon |
icon | .ico .jpg .jpeg .png .svg | Archivo de icono de app |
icon | .js .ts .tsx | Icono de app generado |
apple-icon | .jpg .jpeg, .png | Archivo de icono de Apple |
apple-icon | .js .ts .tsx | Icono de Apple generado |
Imágenes para Open Graph y Twitter
opengraph-image | .jpg .jpeg .png .gif | Archivo de imagen Open Graph |
opengraph-image | .js .ts .tsx | Imagen Open Graph generada |
twitter-image | .jpg .jpeg .png .gif | Archivo de imagen Twitter |
twitter-image | .js .ts .tsx | Imagen Twitter generada |
SEO
sitemap | .xml | Archivo sitemap |
sitemap | .js .ts | Sitemap generado |
robots | .txt | Archivo robots |
robots | .js .ts | Archivo robots generado |
Convenciones de enrutamiento en pages
Las siguientes convenciones de archivos se utilizan para definir rutas en el enrutador pages.
Archivos especiales
_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 carpeta | ||
index | .js .jsx .tsx | Página principal |
folder/index | .js .jsx .tsx | Página anidada |
| Convención de archivo | ||
index | .js .jsx .tsx | Página principal |
file | .js .jsx .tsx | Página anidada |
Rutas dinámicas
| Convención de carpeta | ||
[folder]/index | .js .jsx .tsx | Segmento de ruta dinámica |
[...folder]/index | .js .jsx .tsx | Segmento de ruta catch-all |
[[...folder]]/index | .js .jsx .tsx | Segmento de ruta catch-all opcional |
| Convención de archivo | ||
[file] | .js .jsx .tsx | Segmento de ruta dinámica |
[...file] | .js .jsx .tsx | Segmento de ruta catch-all |
[[...file]] | .js .jsx .tsx | Segmento de ruta catch-all opcional |