Handle source map requests for Turbopack client chunks (#71168)

Since Turbopack is generating actual source map files, and not inlined
source maps as Webpack does, React might request a source map for a
client chunk using the chunk's URL pathname, e.g.
`/_next/static/chunks/[project]__edc466._.js`.

In the source map dev middleware, we need to convert those URL pathnames
to filenames before requesting the source map for the file from
Turbopack.

## Test Plan

- start `pnpm next dev --turbo test/development/app-dir/source-mapping`
- go to `http://localhost:3000/client`
- open React DevTools

packages/next/src/client/components/react-dev-overlay/server/middleware-turbopack.ts

@@ -151,7 +151,7 @@ export function getOverlayMiddleware(project: Project) {
   }
 }
 
-export function getSourceMapMiddleware(project: Project) {
+export function getSourceMapMiddleware(project: Project, distDir: string) {
   return async function (
     req: IncomingMessage,
     res: ServerResponse,
@@ -163,13 +163,17 @@ export function getSourceMapMiddleware(project: Project) {
       return next()
     }
 
-    const filename = searchParams.get('filename')
+    let filename = searchParams.get('filename')
 
     if (!filename) {
       return badRequest(res)
     }
 
     try {
+      if (filename.startsWith('/_next/static')) {
+        filename = path.join(distDir, filename.replace(/^\/_next\//, ''))
+      }
+
       const sourceMapString = await project.getSourceMap(filename)
 
       if (sourceMapString) {

packages/next/src/server/dev/hot-reloader-turbopack.ts

@@ -568,7 +568,7 @@ export async function createHotReloaderTurbopack(
 
   const middlewares = [
     getOverlayMiddleware(project),
-    getSourceMapMiddleware(project),
+    getSourceMapMiddleware(project, distDir),
   ]
 
   const versionInfoPromise = getVersionInfo(