How to debug Next.js in VSCode? How to prevent weird cache issue in VSCode which will retain older source code files even after we modify them in the editor. Use the following configuration to achieve this.

launch.json

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

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "clear-editor-history",
      "command": "${command:workbench.action.clearEditorHistory}"
    }
  ]
}