devIndicators

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

 devIndicators: false | {  position?: 'bottom-right'  | 'bottom-left'  | 'top-right'  | 'top-left', // defaults to 'bottom-left',  },

Setting devIndicators to false will hide the indicator, however Next.js will continue to surface any build or runtime errors that were encountered.

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 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

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

Version History