devIndicators

Move or hide the on-screen development route indicator.

Signature
devIndicators?: false | { position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' }
  • Added in Next.js v15.0.0

Parameters

ParameterTypeDescription
$positionoptional'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'= 'bottom-left'Screen corner where the development indicator renders.
$devIndicatorsoptionalfalse= undefinedPassing false instead of an object hides the indicator entirely. Compile and runtime errors are still surfaced.

Changelog

  • PHP v16.0.0The appIsrStatus, buildActivity and buildActivityPosition options were removed.
  • PHP v15.2.0Improved on-screen indicator with the new position option; appIsrStatus, buildActivity and buildActivityPosition deprecated.
  • PHP v15.0.0Static on-screen indicator added with the appIsrStatus option.

During next dev, Next.js renders a small indicator giving context about the route you are looking at — including whether it is being prerendered or rendered on demand. This option moves it or removes it. It has no effect on a production build.

When to reach for it

Almost always because the indicator sits on top of something: a fixed support widget, a toolbar, a floating action button in the same corner. Move it to the opposite corner rather than hiding it — the render-mode signal is genuinely useful while you work. Set devIndicators: false when you are recording a demo or screenshotting the app.

What trips people up

  • Hiding the indicator does not hide anything that matters: compile errors and runtime errors are still surfaced.
  • If a route you expected to be static is marked dynamic, the indicator is reporting, not misbehaving. Confirm with next build --debug, where ○ means prerendered and ƒ means server-rendered on demand. The usual causes are a request-time API such as cookies() or headers(), or an uncached data request like an ORM call.
  • appIsrStatus, buildActivity and buildActivityPosition were removed in Next.js 16 — a config carried over from 15 that still sets them needs cleaning up.

Example

Example · typescript
import type { NextConfig } from 'next'

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

export default nextConfig

When to use it

  • Move the indicator out from under a fixed chat or support widget in the same corner.
  • Hide it while recording a demo or capturing screenshots of the running app.
  • Diagnose why a route you expected to prerender is being marked dynamic.

Frequently asked questions

How do I hide the Next.js dev indicator?

Set devIndicators: false in next.config. The indicator disappears while compile and runtime errors are still reported through the dev overlay.

Can I move the dev indicator to another corner?

Yes, set devIndicators.position to 'bottom-left' (the default), 'bottom-right', 'top-left' or 'top-right'. The position option was introduced in v15.2.0.

Why is the indicator marking my route as dynamic?

The route opted out of prerendering, usually because it uses a request-time API such as cookies() or headers(), or makes an uncached data request such as a database query. Run next build --debug to confirm: prerendered routes show ○ and on-demand routes show ƒ.

More examples

Hiding it for a screen recording

false replaces the whole object and removes the indicator from the page. Errors are unaffected — the dev overlay still appears when something fails to compile or throws at runtime.

Example · typescript
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  devIndicators: false,
}

export default nextConfig

Reading the build output the indicator summarizes

When the indicator marks a route dynamic and you expected static, this is how to confirm it. A ƒ means the route opted out of prerendering — typically a request-time API such as cookies() or headers(), or an uncached data request. Wrapping the offending part in Suspense, or adding loading.js, lets the rest of the route prerender and stream.

Example · bash
next build --debug

# Route (app)
# ┌ ○ /_not-found
# └ ƒ /products/[id]
#
# ○  (Static)   prerendered as static content
# ƒ  (Dynamic)  server-rendered on demand

Cleaning up a Next.js 15 config

All three legacy keys were deprecated in 15.2 and removed in 16. position is the only option the object accepts now, and the indicator itself remains available.

Example · typescript
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  devIndicators: {
    // appIsrStatus: true,          // removed in v16.0.0
    // buildActivity: true,         // removed in v16.0.0
    // buildActivityPosition: 'br', // removed in v16.0.0
    position: 'top-right',
  },
}

export default nextConfig

Discussion

  • Be the first to comment on this lesson.