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

There are two reasons a route might opt out of prerendering:

• The presence of Request-time APIs which rely on request information.
• An uncached data request, like a call to an ORM or database driver.

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.

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

Version History