驴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.