Next.js开发服务器页面无法加载，JS资源持续处于Pending状态

问题描述 #

Next.js 13.0.2项目开发服务器突然无法加载页面，所有JavaScript资源在Chrome开发者工具网络面板中持续处于pending或stalled状态，服务器及前端控制台无任何输出，所有路由（包括根路径http://localhost:3000/和子路径http://localhost:3000/specific/paths）均受影响。

package.json核心依赖

"dependencies": {
    ...
    "next": "13.0.2",
    "react": "18.2.0",
    "react-aria": "^3.19.0",
    "react-dom": "18.2.0",
    "react-stately": "^3.17.0",
    ...
},

已尝试操作 #

• 删除.next/目录后重新构建
• 删除node_modules/，重新执行npm install并构建
• 指定其他端口启动开发服务器：next dev -p 1234
• 在多个组件中添加console.log，服务器端输出符合预期

调试排查步骤 #

1. 本地环境与网络排查 #

• 检查端口占用：Mac/Linux执行lsof -i :<端口号>，Windows执行netstat -ano | findstr :<端口号>，确认目标端口未被其他进程占用
• 关闭代理工具：暂停VPN、Charles、Fiddler等代理软件，避免请求被拦截
• 跨浏览器测试：用Firefox、Edge等其他浏览器访问，排除Chrome缓存或插件干扰

2. Next.js配置与依赖排查 #

• 临时简化配置：注释next.config.js中的rewrites、headers、middleware等自定义配置，重启服务器测试
• 调整Next.js版本：13.0.2属于13.x早期版本，存在已知稳定性问题，尝试升级到13.4+稳定版或降级到12.x LTS版本
• 排查第三方依赖：逐个移除react-aria、react-stately等非核心依赖，重启服务器验证是否恢复，定位是否为依赖冲突

3. 底层日志与性能分析 #

• 启用Next.js调试日志：启动服务器时执行DEBUG=next:* next dev，查看完整的服务器编译、请求处理日志
• 分析Chrome性能面板：录制页面加载过程，定位请求阻塞阶段（DNS解析、TCP连接、请求排队等）
• 查看Chrome verbose日志：切换Console面板到Verbose级别，查看被隐藏的资源加载警告

4. 文件系统与权限排查 #

• 检查目录权限：确保项目目录及.next/目录有读写权限，避免服务器无法写入编译产物
• 确认磁盘空间：检查本地磁盘剩余空间，避免因空间不足导致编译失败
• 迁移项目目录：将项目复制到非系统盘或其他目录，排除原目录的文件系统异常

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