NextJS 13页面无响应求助：删除相关文件后频繁卡顿

1. 恢复路由边界文件 #

删除error.tsx和loading.tsx可能破坏了NextJS App Router的路由边界处理逻辑，导致热更新时出现异常。需要在对应的路由目录下重新创建这两个基础文件：

• error.tsx（需添加'use client'指令）：

'use client';

export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  return (
    <div>
      <h2>出现错误！</h2>
      <button onClick={() => reset()}>重试</button>
    </div>
  );
}

• loading.tsx：

export default function Loading() {
  return <div>加载中...</div>;
}

2. 彻底清理缓存与重建依赖 #

仅删除缓存文件夹可能残留异常状态，需执行完整的清理流程：

• 停止当前运行的npm run dev服务
• 删除项目根目录下的.next、node_modules文件夹，以及package-lock.json（或yarn.lock）文件
• 执行npm install重新安装所有依赖
• 重新启动开发服务：npm run dev

3. 排查页面异常逻辑 #

打开Chrome开发者工具（F12），检查以下内容：

• Console标签：查看是否存在无限循环、未捕获错误或重复触发的日志
• Network标签：确认热更新请求是否陷入循环，或存在资源加载失败的情况
• 检查组件代码：确认是否有在useEffect或状态更新逻辑中导致无限渲染的代码

4. 排除浏览器扩展干扰 #

部分Chrome扩展可能与NextJS热更新机制冲突：

• 使用无痕模式打开页面，观察问题是否消失
• 暂时禁用所有浏览器扩展，逐步排查出冲突的扩展

5. 更新NextJS版本 #

若当前使用的NextJS版本存在已知热更新bug，升级到最新稳定版：

npm install next@latest

升级完成后重启开发服务。

6. 验证路由结构正确性 #

确认删除文件后，项目的路由目录结构符合NextJS App Router的规范，没有出现嵌套错误或缺失必要的路由组件。

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