VSC How to setup a debug configuration for a docker-contained React/Next.js App

Package.json:

{
  "name": "nextjs-with-typescript",
  "version": "5.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    ...
  },
  "dependencies":{
    "next": "12.1.5",
    "react": "latest"
  },
  "@types/react": "latest"
}

This is how I start the app:

1. docker-compose up to set up and run a docker-based database
2. npm run dev to start a next server
3. then start a new Chrome to localhost:3000 to access app
4. launch.json, add Attach by Process ID to debug the api backend

Breakpoint set inside index.tsx not hit, adding Attach to Chrome won't help. Chrome F12, Sources tab not showing any front-end code.

I'd like to add one configuration into Launch.json be able to one-click start debugging both front-end Chrome react/tsx and back-end .ts inside VSC.

My VSC:

Version: 1.63.1 (system setup)
Commit: fe719cd3e5825bf14e14182fddeb88ee8daf044f
Date: 2021-12-14T02:13:54.292Z
Electron: 13.5.2
Chromium: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Windows_NT x64 10.0.19044