如何关闭NextJS中Fast Refresh的控制台日志？

下面分场景给出解决方案，也提供无需修改代码的临时过滤方式：

临时快速解决（无需改代码） #

在浏览器控制台的搜索框中输入 -["Fast Refresh"]，即可自动过滤掉所有包含[Fast Refresh]的日志，不影响功能。

针对不同框架的永久配置 #

Create React App（CRA） #

1. 在项目根目录创建/编辑 .env.development 文件，添加：

   SUPPRESS_FAST_REFRESH_LOGS=true
   

2. 重启开发服务即可生效。
   或者启动时临时设置环境变量：

SUPPRESS_FAST_REFRESH_LOGS=true npm start

Vite #

在 vite.config.js/vite.config.ts 中修改HMR日志级别：

export default {
  server: {
    hmr: {
      logLevel: 'silent' // 可选值：'silent'（关闭所有HMR日志）、'warn'（仅显示警告）、'error'（仅显示错误）
    }
  }
}

Next.js #

启动开发服务时添加环境变量：

SUPPRESS_FAST_REFRESH_LOGS=true npm run dev

或者在 next.config.js 中配置webpack禁用日志：

module.exports = {
  webpack: (config, { dev, isServer }) => {
    if (dev && !isServer) {
      // 修改hot-dev-client参数以关闭日志
      config.entry.main = config.entry.main.map(entry =>
        entry.includes('next/dist/client/dev/hot-dev-client.js')
          ? `${entry}?suppressLogs=true`
          : entry
      );
    }
    return config;
  }
}

内容的提问来源于stack exchange，提问作者JCraine