Capítulo 397 de 456

devIndicators

Core Idea

Configura o indicador on-screen que mostra contexto (rota estática vs. dinâmica) durante desenvolvimento.

Key Concepts

  • devIndicators: objeto { position } ou false para desativar; position default 'bottom-left'
  • position: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'
  • devIndicators: false: esconde o indicador, mas erros de compile/runtime continuam aparecendo

Code Examples

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  devIndicators: {
    position: 'bottom-right',
  },
}

export default nextConfig
  • O que demonstra: mudar a posição do indicador.
Route (app)
┌ ○ /_not-found
└ ƒ /products/[id]

○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand
  • O que demonstra: confirmar via next build --debug se uma rota é estática (○) ou dinâmica (ƒ), usado para diagnosticar quando o indicador marca uma rota como dinâmica inesperadamente.

Reference Tables

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

Anti-patterns

  • Assumir que devIndicators: false esconde erros: erros de compile/runtime continuam sendo exibidos mesmo desativado

Key Takeaways

  1. Exportar getServerSideProps ou getInitialProps marca a rota como dinâmica no indicador
  2. next build --debug é a forma de confirmar estático (○) vs. dinâmico (ƒ) fora do indicador visual
  3. Opções antigas (appIsrStatus, buildActivity, buildActivityPosition) foram removidas na v16.0.0

Connects To

  • next build --debug: ferramenta de diagnóstico complementar ao indicador visual
AnteriordeploymentIdPróximodistDir