¿Cómo esta constituida la estructura de archivos y directorios de un proyecto en Next.js?
La estructura de un proyecto en Next consta de:
Carpetas de nivel superior
| Directorio | Descripción |
|---|---|
| app | App Router |
| pages | Pages Router |
| public | Archivos estáticos. |
| src | Directorio con el código de la aplicación. |
Archivos de nivel superior
Los archivos son utilizados para: configurar la aplicación, manejar las dependencias, ejecutar el middleware, integrar y monitorear herramientas y definir variables de entorno.
| Archivo | Descripción |
|---|---|
| next.config.js | Configuración de Next.js |
| package.json | Dependencias y scripts del proyecto |
| instrumentation.ts | Archivos de OpenTelemetry e Instrumentation |
| middleware.ts | Middleware de 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 | Configuración de ESLint |
| .gitignore | Archivos de git a ignorar |
| next-env.d.ts | Configuración de TypeScript para el proyecto |
| tsconfig.json | Configuración general de TypeScript |
| jsconfig.json | Configuración general de JavaScript |
Convenciones utilizadas en “app”
Las siguientes convenciones han sido definidas para manejar los metadatos en el app router.
Archivos de enrutamiento
| Archivo | Descripción |
|---|---|
| layout.tsx | Layout |
| page.tsx | Page (Página) |
| loading.tsx | Interfaz de la precarga |
| not-found.tsx | Interfaz de “no encontrado” |
| error.tsx | Interfaz de mensaje de error |
| global-error.tsx | Interfaz de error global |
| route.ts | Enpoint de la API |
| template.tsx | Plantilla |
| default.tsx | Página default |
Rutas anidadas
| Ruta | Descripción |
|---|---|
| directorio-a | Segmento de una ruta |
| directorio-a/directorio-b | Segmentos de rutas anidados |
Rutas dinámicas
| Ruta | Descripción |
|---|---|
| [directorio] | /directorio |
| […directorio] | Captura de todos los segmentos de la ruta |
| [[…directorio]] | Captura opcional de todos los segmentos de la ruta |
Grupos de rutas y directorios privados
| Estructura | Descripción |
|---|---|
| (folder) | Grupos de rutas que no afectan el enrutamiento |
| _folder | Excluye la carpeta y las carpetas que contiene del enrutamiento |
Rutas paralelas e interceptadas
| Ruta | Descripción |
|---|---|
| @folder | Slot |
| (.)folder | Intercepción al mismo nivel |
| (..)folder | Intercepción un nivel arriba |
| (..)(..)folder | Intercepción tres niveles arriba |
| (…)folder | Intercepción en el directorio raiz (root) |
Convenciiones de archivos Metadata
Iconos de la aplicación
El archivo favicon.ico es un pequeño icono asociado a un sitio web que aparece en la pestaña del navegador, marcadores y otros lugares. Mejora la identificación visual del sitio y la experiencia del usuario al facilitar el reconocimiento rápido del sitio web.
El archivo apple-icon.png es utilizado para definir el icono de la aplicación en dispositivos Apple. Este icono aparece en la pantalla de inicio cuando los usuarios añaden la web como acceso directo, mejorando la identificación visual y la experiencia del usuario.
| Icono | Extensión | Descripción |
|---|---|---|
| favicon | .ico | Archivo favicon |
| icon | .ico .jpg .jpeg .png .svg | App Icon File |
| icon | .js .ts .tsx | Generated App Icon |
| apple-icon | .jpg .jpeg .png | Apple App Icon file |
| apple-icon | .js .ts .tsx | Generated Apple App Icon |
Open Graph e imágenes de Twitter
Open Graph es un protocolo que permite a las páginas web controlar cómo se presentan sus enlaces cuando se comparten en redes sociales. Define metadatos como el título, la descripción y la imagen, mejorando la apariencia y la información mostrada en las publicaciones.
Twitter-image es una convención utilizada para definir las imágenes que se mostrarán cuando un enlace de la página web se comparta en Twitter. Estas imágenes pueden ser archivos estáticos con extensiones como .jpg, .jpeg, .png, y .gif, o pueden ser generadas dinámicamente utilizando archivos .js, .ts, o .tsx. Al especificar una imagen de Twitter, se mejora la presentación visual del enlace compartido, atrayendo más atención y clics en la publicación.
| Convención | Extensión | Descripción |
|---|---|---|
| opengraph-image | .jpg .jpeg .png .gif | Open Graph image file |
| opengraph-image | .js .ts .tsx | Generated Open Graph image |
| twitter-image | .jpg .jpeg .png .gif | Twitter image file |
| twitter-image | .js .ts .tsx | Generated Twitter image |
SEO
SEO (Search Engine Optimization) es el proceso de optimizar un sitio web para mejorar su visibilidad en los motores de búsqueda. Esto incluye el uso de palabras clave, metadatos y contenido de calidad para aumentar el tráfico orgánico y mejorar el ranking en los resultados de búsqueda.
El archivo sitemap.xml es un mapa del sitio web que ayuda a los motores de búsqueda a indexar sus páginas de manera más eficiente. Contiene una lista de URLs del sitio, facilitando la detección y rastreo de contenido relevante para mejorar el SEO.
El archivo robots.txt se utiliza para indicar a los motores de búsqueda qué páginas o secciones de un sitio web deben o no deben rastrear. Esto ayuda a controlar la indexación y a proteger áreas sensibles del sitio, mejorando la eficiencia del rastreo.
| Archivo | Extensión | Descripción |
|---|---|---|
| sitemap | .xml | Sitemap file |
| sitemap | .js .ts | Generated Sitemap |
| robots | .txt | Robots file |
| robots | .js .ts | Generated Robots file |
Conclusiones
La estructura de archivos y directorios en Next.js es fundamental para organizar y configurar adecuadamente un proyecto. Conocer las convenciones y configuraciones esenciales permite desarrollar aplicaciones más eficientes y mantenibles, facilitando la colaboración y el escalado del proyecto.