unable to hide next.js built-in toast error message

Question

Next.js toast error not getting hide.

i am working on next.js first time.i am facing an issue due to which i am getting error message in a toast at bottom left corner. i want to hide that toast. i inspect the element and found the following code:

<div data-nextjs-toast="true" class="nextjs-toast-errors-parent">
   <div data-nextjs-toast-wrapper="true">
      <div class="nextjs-toast-errors">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="12" y1="8" x2="12" y2="12"></line>
            <line x1="12" y1="16" x2="12.01" y2="16"></line>
         </svg>
         <span>5 errors</span>
         <button data-nextjs-toast-errors-hide-button="true" class="nextjs-toast-errors-hide-button" type="button" aria-label="Hide Errors">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
               <path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
         </button>
      </div>
   </div>
</div>

here is the css details corresponding to the above code's

.nextjs-toast-errors-parent {
    cursor: pointer;
    transition: transform 0.2s ease;
}

if i try to add

display:none;

in the above css , then it disappears.

so i come to my vs code and add the following code in my globals.css file

.nextjs-toast-errors-parent {
    cursor: pointer;
    transition: transform 0.2s ease;
    diplay:none;
}

but it does not work. i try to put the !important with display:none but that is also not working. i found a something on the internet that is nextjs-portal


so i implement the following

nextjs-portal {
  display: none;
}

it hides all the errors , not even toast error but also the overlay errors.

how i can resolve this issue , i am unable to figure out why my css code is not working. is there any other way to implement this.

why do you want to hide it? in dev mode this toast helps you to debug errors — Vlad Vladov
– Vlad Vladov, Commented May 7, 2024 at 9:29
@VladVladov actually this issue is related to hydration errors. which i am unable to solve. so for now i want to hide this. can you tell me how i can do that — Umar Raza
– Umar Raza, Commented May 7, 2024 at 9:35
Better to concentrate on solving errors than hiding error info - the error will eventually go to production builds — Vlad Vladov
– Vlad Vladov, Commented May 7, 2024 at 9:40
@VladVladov that's the issue , the code is deployed to the server with build , but i still the error is visible — Umar Raza
– Umar Raza, Commented May 7, 2024 at 13:06

Emmanuel Nwafuru · Accepted Answer · 2025-01-05 21:43:59Z

2

Add this to your next.config.ts file:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  devIndicators: {
    appIsrStatus: false,
  },
};

export default nextConfig;

answered Jan 5 at 21:43

Emmanuel Nwafuru

212 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yohan W. Dunon Jun 1 at 0:06

In 2025 a warning appears: devIndicators.appIsrStatus is deprecated and no longer configurable. Please remove it from next.config.ts.

halfer · Accepted Answer · 2025-07-16 21:53:49Z

2

In 2025 the right method to hide/remove the Nextjs at the bottom left of your page is :

In next.config.ts:

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  /* config options here */
  devIndicators: false, // This is the options that hide/remove the icon
};

export default nextConfig;

I found the solution directly in the settings when clicking on the icon:

edited Jul 16 at 21:53

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Jun 1 at 0:31

Yohan W. Dunon

5483 gold badges12 silver badges20 bronze badges

Collectives™ on Stack Overflow

unable to hide next.js built-in toast error message

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related