devIndicadores
devIndicators
permite configurar el indicador en pantalla que proporciona contexto sobre la ruta actual que estás visualizando durante el desarrollo.
devIndicators: false | {
position?: 'bottom-right'
| 'bottom-left'
| 'top-right'
| 'top-left', // por defecto 'bottom-left',
},
Establecer devIndicators
como false
ocultará el indicador, sin embargo Next.js continuará mostrando cualquier error de compilación o tiempo de ejecución que se encuentre.
Solución de problemas
El indicador no marca una ruta como estática
Si esperas que una ruta sea estática y el indicador la ha marcado como dinámica, es probable que la ruta haya optado por no usar el renderizado estático.
Puedes confirmar si una ruta es estática o dinámica construyendo tu aplicación con next build --debug
y revisando la salida en tu terminal. Las rutas estáticas (o prerenderizadas) mostrarán un símbolo ○
, mientras que las rutas dinámicas mostrarán un símbolo ƒ
. Por ejemplo:
Ruta (app) Tamaño JS de primera carga
┌ ○ /_not-found 0 B 0 kB
└ ƒ /products/[id] 0 B 0 kB
○ (Estática) contenido prerenderizado como estático
ƒ (Dinámica) renderizado en el servidor bajo demanda
Hay dos razones por las que una ruta podría optar por no usar el renderizado estático:
- La presencia de APIs dinámicas que dependen de información en tiempo de ejecución.
- Una solicitud de datos no almacenada en caché, como una llamada a un ORM o controlador de base de datos.
Revisa tu ruta en busca de estas condiciones, y si no puedes renderizar la ruta de forma estática, considera usar loading.js
o <Suspense />
para aprovechar el streaming.
Historial de versiones
Versión | Cambios |
---|---|
v15.2.0 | Mejora del indicador en pantalla con nueva opción position . Las opciones appIsrStatus , buildActivity y buildActivityPosition han quedado obsoletas. |
v15.0.0 | Se añadió el indicador estático en pantalla con la opción appIsrStatus . |