从0死磕全栈之使用 VS Code 调试 Next.js 应用完整指南

Next.js 作为现代 React 全栈框架，其 App Router 架构引入了 Server Components、Route Handlers、Server Actions 等服务端能力，使得调试方式与传统前端项目有所不同。本文将手把手教你如何在 VS Code 中高效调试 Next.js（v13+ App Router）应用，覆盖客户端、服务端、API 路由等关键场景。

---

一、准备工作

1. 确保开发环境

• Node.js ≥ 18.17
• Next.js ≥ 13（使用 App Router）
• VS Code 最新版

---

二、调试客户端代码（React 组件、Hooks）

步骤 1：启动 Next.js 开发服务器

npm run dev
# 默认端口 3000

步骤 2：配置 .vscode/launch.json

launch.json是vscode用来调试的配置文件，可以手动创建这个文件

在项目根目录创建 .vscode/launch.json：

{"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 client-side (Firefox)"