如何设置VSCode以构建Next.js开发环境？

本文共计882个文字，预计阅读时间需要4分钟。

VSCode 调试 Next.js 应用，无需图形界面，直接输出结果。

为什么直接 F5 启动 next dev 断点不命中

Next.js 的 next dev 是一个封装脚本，启动后会 fork 出多个 worker 进程（比如 RSC server、API handler、server actions runner），而 VSCode 默认的 launch 配置只能 attach 到主进程。主进程根本不执行你的业务函数，所以 getServerSideProps 里的断点 hover 显示 “Breakpoint ignored because generated code not found”。

• 现象：断点显示为空心圆，控制台无报错，但就是不暂停
• 本质：VSCode 找不到源码映射上下文，因为 source map 是子进程生成的，路径没对上
• 验证方法：终端运行 ps aux | grep next，能看到多个 Node 进程，PID 不同

必须用 node --inspect 启动 + attach 配置

不能靠 runtimeExecutable: "npm" 或 "next dev" 直接 launch，必须让 Next.js 自己暴露 inspector 端口，再由 VSCode 主动 attach。这是唯一稳定兼容 App Router 和 Pages Router 的方式。