Is it possible to turn off console logs from "Fast Refresh" in NextJS?

Question

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

Maya

Answer 1

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.

Spancake

Oh wow, I'd never noticed that menu item before. That does the trick, thank you! – Maya

Answer 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

Pharyngo

This really helped me a lot after trying various wrong solutions. – Soubrette