Like creating sockets in Unix 'C', creating Visual Studio Code Start Debugging configurations are much the same; you have to do loads of reading to pick the options you want then you spend your entire career cutting and pasting it into every project you do! Visual Studio Code has a plethora of options but every NextJs project runs locally in exactly the same way.

When you do a Run -> Start Debugging it moves you to the Select debugger part and asks you to choose. Select Web App (Chrome). It won't quite work and it'll give you the option to open and edit launch.js, so do that.

This is where you would normally have to do all the reading, but now you don't.

When launch.js opens, delete the contents and put the following in there instead. Save it and then you can now Run -> Start Debugging. It will launch the backend server in debug mode allowing you to set breakpoints inside Visual Studio Code. It also starts the hot deploy front end server where you can set breakpoints in the browser.

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