Skip to main content

devIndicators

devIndicators allows you to configure the on-screen indicators that give context about the current route you're viewing during development.

  devIndicators: {
    appIsrStatus?: boolean, // defaults to true
    buildActivity?: boolean, // defaults to true
    buildActivityPosition?: 'bottom-right'
    | 'bottom-left'
    | 'top-right'
    | 'top-left', // defaults to 'bottom-right'
  },

appIsrStatus (Static Indicator)​

This option is available in Next.js canary.

Next.js displays a static indicator in the bottom corner of the screen that signals if a route will be prerendered at build time. This makes it easier to understand whether a route is static or dynamic, and for you to identify if a route opts out of static rendering.

You can disable the indicator by closing it, or using the config option next.config.js:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  devIndicators: {
    appIsrStatus: false,
  },
}

export default nextConfig
/** @type {import('next').NextConfig} */
const nextConfig = {
  devIndicators: {
    appIsrStatus: false,
  },
}

module.exports = nextConfig

buildActivity (Compilation Indicator)​

When you edit your code, and Next.js is compiling the application, a compilation indicator appears in the bottom right corner of the page.

Good to know: This indicator is only present in development mode and will not appear when building and running the app in production mode.

In some cases this indicator can be misplaced on your page, for example, when conflicting with a chat launcher. To change its position, open next.config.js and set the buildActivityPosition in the devIndicators object to bottom-right (default), bottom-left, top-right or top-left:

module.exports = {
  devIndicators: {
    buildActivityPosition: 'bottom-right',
  },
}

In some cases, this indicator might not be useful for you. To remove it, open next.config.js and disable the buildActivity config in devIndicators object:

module.exports = {
  devIndicators: {
    buildActivity: false,
  },
}

Troubleshooting​

Static route not showing the indicator​

If you expect a route to be static and the indicator is enabled but not showing, it's likely the route has opted out of static rendering.

You can confirm if a route is static or dynamic by building your application using next build --debug, and checking the output in your terminal. Static (or prerendered) routes will display a β—‹ symbol, whereas dynamic routes will display a Ζ’ symbol. For example:

Route (app)                              Size     First Load JS
β”Œ β—‹ /_not-found                          0 B               0 kB
β”” Ζ’ /products/[id]                       0 B               0 kB

β—‹  (Static)   prerendered as static content
Ζ’  (Dynamic)  server-rendered on demand

There are two reasons a route might opt out of static rendering:

Check your route for any of these conditions, and if you are not able to statically render the route, then consider using loading.js or <Suspense /> to leverage streaming.

Good to know: This indicator was removed in Next.js version 10.0.1. We recommend upgrading to the latest version of Next.js.

When a page qualifies for Automatic Static Optimization we show an indicator to let you know.

This is helpful since automatic static optimization can be very beneficial and knowing immediately in development if the page qualifies can be useful.

In some cases this indicator might not be useful, like when working on electron applications. To remove it open next.config.js and disable the autoPrerender config in devIndicators:

module.exports = {
  devIndicators: {
    autoPrerender: false,
  },
}