如何消除Next.js中404.js与_error.js引发的Fast Refresh全量重载警告？

下面是针对该警告的有效解决步骤：

1. 升级Next.js到稳定版本 #

旧版本的Pages Router在处理错误页面的Fast Refresh时存在已知bug，直接升级到最新稳定版大概率能解决问题：

npm install next@latest
# 或 yarn 用户
yarn add next@latest

2. 规范错误页面的文件结构与代码 #

• 确保404.js和_error.js直接放在项目根目录的pages文件夹下，不要嵌套在子目录中
• 不要在文件顶层导出除默认组件外的其他内容（比如全局常量、工具函数），所有辅助逻辑都放在组件内部
• 避免在错误页面中引入会修改全局状态的模块，比如直接操作window对象或全局变量的代码

3. 彻底清除缓存并重启服务 #

# 删除Next.js构建缓存
rm -rf .next

# （可选）清除依赖缓存后重装
rm -rf node_modules package-lock.json
npm install

完全关闭开发服务器后重新启动，不要使用热重载重启。

4. 排查自定义App/Document组件 #

如果项目中有自定义的_app.js或_document.js，检查：

• 它们是否在渲染流程中引入了与错误页面相关的动态逻辑
• 是否存在全局样式的动态注入逻辑干扰了Fast Refresh的正常工作

5. 临时忽略错误页面的Fast Refresh检测（不推荐长期使用） #

如果以上方法都无效，可以在next.config.js中配置忽略错误页面的Fast Refresh检测：

module.exports = {
  experimental: {
    fastRefresh: {
      ignorePaths: ['/pages/404.js', '/pages/_error.js']
    }
  }
}

这个方案只是避免触发警告，无法解决根本问题，优先使用前面的步骤。

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