When I'm doing lots of testing, it just pollutes the browser's console for me with every file save. Is it possible to turn off?

Eg.

[Fast Refresh] done in 93ms
hot-dev-client.js?1600:159 [Fast Refresh] rebuilding
hot-dev-client.js?1600:135 [Fast Refresh] done in 37ms
hot-dev-client.js?1600:159 [Fast Refresh] rebuilding
HELLO WORLD
hot-dev-client.js?1600:135 [Fast Refresh] done in 48ms
hot-dev-client.js?1600:159 [Fast Refresh] rebuilding
hot-dev-client.js?1600:135 [Fast Refresh] done in 76ms

When I'm doing lots of testing, it just pollutes the browser's console for me with every file save. Is it possible to turn off?

Eg.

[Fast Refresh] done in 93ms
hot-dev-client.js?1600:159 [Fast Refresh] rebuilding
hot-dev-client.js?1600:135 [Fast Refresh] done in 37ms
hot-dev-client.js?1600:159 [Fast Refresh] rebuilding
HELLO WORLD
hot-dev-client.js?1600:135 [Fast Refresh] done in 48ms
hot-dev-client.js?1600:159 [Fast Refresh] rebuilding
hot-dev-client.js?1600:135 [Fast Refresh] done in 76ms

• javascript
• reactjs
• next.js
• fast-refresh

2 Answers 2

Starting from Nextjs 12.1.0 you can simply use following in next.config.js

// next.config.js
module.exports = {
  compiler: {
    removeConsole: true,
  },
}

Reference: https://nextjs.org/docs/advanced-features/compiler#remove-console

There's not a way to disable the console logs from appearing. You can filter them from your console, but no way to make them go away.

The specific line that prints it to the console is here, and there's no toggle/options that can be controlled/hacked/modified:

https://github.com/vercel/next.js/blob/7cb92a6e95e3536791def6fc3a89a4688a734539/packages/next/client/dev/error-overlay/hot-dev-client.js#L194

You can choose to hide emitted console logs from hot-dev-client by right clicking on hot-dev-client and clicking "Hide messages from hot-dev-client.js"

This is a browser-specific setting, not something that can be done at the project level.