devIndicators

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

Open next.config.ts and set position to choose where the indicator renders. The default is bottom-left.

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  devIndicators: {
    position: 'bottom-right', // 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'
  },
}
 
export default nextConfig

To hide the indicator entirely, set devIndicators to false. Next.js will still surface any compile or runtime errors that were encountered.

const nextConfig: NextConfig = {
  devIndicators: false,
}
 
export default nextConfig

Troubleshooting

Indicator not marking a route as static

If you expect a route to be static and the indicator has marked it as dynamic, it's likely the route has opted out of prerendering.

You can confirm if a route is prerendered or dynamically rendered 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)
┌ ○ /_not-found
└ ƒ /products/[id]
 
○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

When exporting getServerSideProps or getInitialProps from a page, it will be marked as dynamic.

Version History