Capítulo 209 de 456

devIndicators

Core Idea

devIndicators configures the on-screen dev-only indicator that shows context about the current route (e.g. static vs dynamic) while developing — reposition it or turn it off entirely.

Key Concepts

  • devIndicators.position: 'bottom-left' (default) | 'bottom-right' | 'top-left' | 'top-right'.
  • devIndicators: false: hides the indicator entirely; compile/runtime errors still surface.
  • Static/dynamic markers: next build --debug output shows ○ for prerendered (static) routes and ƒ for dynamic (server-rendered on demand) routes.

Code Examples

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  devIndicators: {
    position: 'bottom-right', // 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'
  },
}

export default nextConfig
  • O que demonstra: reposicionar o indicador de dev.
Route (app)
┌ ○ /_not-found
└ ƒ /products/[id]

○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand
  • O que demonstra: como ler o output de next build --debug pra saber se uma rota é estática ou dinâmica.

Reference Tables

VersionChanges
v16.0.0appIsrStatus, buildActivity, buildActivityPosition removidos.
v15.2.0Indicador melhorado com nova opção position; opções antigas deprecadas.
v15.0.0Indicador estático adicionado com opção appIsrStatus.

Anti-patterns

  • Assumir que a rota é dinâmica por bug: se o indicador marca dinâmico inesperadamente, geralmente é Request-time API (cookies/headers/params) ou uncached data request (ORM/DB sem cache), não um bug do indicador.

Key Takeaways

  1. Use next build --debug pra confirmar estaticamente se uma rota é ○ ou ƒ, em vez de confiar só no indicador visual.
  2. Se uma rota deveria ser estática mas está dinâmica, use loading.js ou <Suspense /> pra aproveitar streaming em vez de forçar tudo síncrono.
  3. Desabilitar o indicador (devIndicators: false) não esconde erros de compilação/runtime.

Connects To

  • loading.js / Suspense: soluções recomendadas quando uma rota não pode ser totalmente prerenderizada.
  • Request-time APIs: causa comum de uma rota ser marcada como dinâmica.
AnteriordeploymentIdPróximodistDir