NextJS Dev Tools Icon - New to Next

[thebruhcard]

Summary

Why does the Next.js Dev Tools icon keep showing in the bottom-left corner of my local project, and how can I disable or hide it?

Additional information

No response

Example

No response

[icyJoseph]

Hi,

• https://nextjs.org/docs/app/api-reference/config/next-config-js/devIndicators

  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.

So in your Next.js config file, often next.config.ts, you can do:

const nextConfig = { 
  devIndicators: false,
  // other configs
}

export default nextConfig;

[thebruhcard]

This worked, thank you so much

[Aashir1]

Hi @icyJoseph, I used devIndicator: false in my next.config.ts, but it becomes appare if any error occures, I want to hide it completely is there any hack?

[icyJoseph]

screenshot? do you mean the error overlay comes up?

[Aashir1]

Thanks @icyJoseph, I appreciate your prompt response!

//when we land, everything seems fine

//see when any error occur, it become active again.

const nextConfig: NextConfig = {
  ...
  devIndicators: false,
};

export default nextConfig;

I want to hide it completely.

[icyJoseph]

Mmm I see, that's the error overly not the devIndicator. It is there cuz you have an error that'll cause trouble in prod. In this case, your UI is able to continue render, in some cases the error is so bad, the entire page crashes. In any case the overlay has to inform you that something is wrong. I don't think this is controllable.