FullStack debugging on your Next.js project. Make the breakpoints appropriately.

To simultaneously make your breakpoint work on the front-end and back-end side, follow these steps.

Check your package.json and launch.json

Your package.json would be like this.

{
  "repository": "",
  ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@vercel/examples-ui": "^1.0.4",
    "next": "latest",
    ...
  },
  "devDependencies": {
    ...
  }
}

You need a launch.json file. It locates as “/.vscode/launch.json”

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "yarn 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": "yarn dev",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

I’d used yarn as a package manager. You need to replace it with“npm run dev” or “pnpm dev”

Execute debugger and server.