devIndicators
Move or hide the on-screen development route indicator.
devIndicators?: false | { position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' }- Added in Next.js v15.0.0
Parameters
| Parameter | Type | Description |
|---|---|---|
$positionoptional | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'= 'bottom-left' | Screen corner where the development indicator renders. |
$devIndicatorsoptional | false= undefined | Passing 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 ascookies()orheaders(), or an uncached data request like an ORM call. appIsrStatus,buildActivityandbuildActivityPositionwere removed in Next.js 16 — a config carried over from 15 that still sets them needs cleaning up.
Example
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
devIndicators: {
position: 'bottom-right', // 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'
},
}
export default nextConfigWhen 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.
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
devIndicators: false,
}
export default nextConfigReading 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.
next build --debug
# Route (app)
# ┌ ○ /_not-found
# └ ƒ /products/[id]
#
# ○ (Static) prerendered as static content
# ƒ (Dynamic) server-rendered on demandCleaning 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.
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