Next.js 13在Chrome中陷入Fast Refresh循环问题求助

问题详情 #

• 操作场景：跟随Papa React的Next.js 13教程，执行视频第6分02秒处的操作——删除默认的index.js页面
• 异常现象：
  • VS Code终端出现Fast Refresh无限循环，反复输出刷新日志
  • Chrome控制台报错（截图显示终端反复触发Fast Refresh，控制台存在路由或 hydration 相关错误）
• 代码仓库：ieUlysses/automatic-fiesta

可能的解决方案 #

• 修复根路由缺失问题：
  Next.js 13无论使用Pages Router还是App Router，都需要根路由入口文件。如果用Pages Router，需重新创建pages/index.js；如果用App Router，需在app/目录下创建page.js作为根页面。
• 清理编译缓存：
  删除项目根目录下的.next/文件夹，执行npm install重新安装依赖，再重启开发服务器npm run dev，避免残留缓存导致的异常刷新。
• 锁定教程匹配的Next.js版本：
  检查教程使用的Next.js版本，执行npm install next@x.x.x（替换为教程对应版本），避免版本差异引发的路由逻辑冲突。
• 添加全局错误边界：
  在App Router中创建app/error.js组件，捕获路由缺失等全局错误，防止错误触发Fast Refresh循环：

  'use client';
  
  export default function Error({ error, reset }) {
    return (
      <div>
        <h2>发生错误：{error.message}</h2>
        <button onClick={() => reset()}>重试</button>
      </div>
    );
  }
  

内容的提问来源于stack exchange，提问作者ire.Ulysses