Next.js(Node 20.14.0)在VS Code启动调试时出错求助

检查VS Code调试配置文件 #

• 确认.vscode/launch.json配置是否正确，Next.js官方推荐的调试配置如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

• 若之前配置有缺失或错误，替换为上述配置后重启VS Code重试。

验证Node.js版本兼容性 #

• 查看项目package.json的engines字段，确认当前Node.js版本符合项目要求，建议使用LTS版本。
• 执行node -v查看当前版本，若版本不匹配，用nvm等工具切换对应版本后重新执行npm install再调试。

清理缓存并重建项目 #

• 执行npm cache clean --force清理npm缓存
• 删除项目根目录下的.next构建缓存文件夹
• 重新执行npm run dev后，再次尝试点击调试图标

排查VS Code插件冲突 #

• 暂时禁用所有非必要插件，尤其是调试、Node.js相关插件，重启VS Code后尝试调试
• 若恢复正常，逐个启用插件，排查出冲突插件后更新或移除

检查package.json的dev脚本 #

• 确认package.json中scripts的dev命令格式正确，标准Next.js dev脚本应为：

"scripts": {
  "dev": "next dev"
}

• 若有自定义参数，确保参数无语法错误

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