produce source maps for middlewares

packages/next/build/webpack-config.ts

@@ -51,6 +51,7 @@ import { getRawPageExtensions } from './utils'
 import browserslist from 'next/dist/compiled/browserslist'
 import loadJsConfig from './load-jsconfig'
 import { shouldUseReactRoot } from '../server/config'
+import { getMiddlewareSourceMapPlugins } from './webpack/plugins/middleware-source-maps-plugin'
 
 const watchOptions = Object.freeze({
   aggregateTimeout: 5,
@@ -1272,6 +1273,10 @@ export default async function getBaseWebpackConfig(
       ].filter(Boolean),
     },
     plugins: [
+      ...getMiddlewareSourceMapPlugins({
+        isConfigured: !!config.experimental.middlewareSourceMaps,
+        isProductionBrowserSourceMapsOn: config.productionBrowserSourceMaps,
+      }),
       hasReactRefresh && new ReactRefreshWebpackPlugin(webpack),
       // Makes sure `Buffer` and `process` are polyfilled in client and flight bundles (same behavior as webpack 4)
       targetWeb &&

packages/next/build/webpack/plugins/middleware-source-maps-plugin.ts

@@ -0,0 +1,47 @@
+import { webpack } from 'next/dist/compiled/webpack/webpack'
+import type { webpack5 } from 'next/dist/compiled/webpack/webpack'
+
+/**
+ * Produce source maps for middlewares.
+ * Currently we use the same compiler for browser and middlewares,
+ * so we can avoid having the custom plugins if the browser source maps
+ * are emitted.
+ */
+export const getMiddlewareSourceMapPlugins = (params: {
+  isConfigured: boolean
+  isProductionBrowserSourceMapsOn: boolean
+}) => {
+  if (!params.isConfigured || params.isProductionBrowserSourceMapsOn) {
+    return []
+  }
+
+  return [
+    new webpack.SourceMapDevToolPlugin({
+      filename: '[file].map',
+      include: [
+        // Middlewares are the only ones who have `server/pages/[name]` as their filename
+        /^server\/pages\//,
+        // All middleware chunks
+        /^server\/middleware-chunks\//,
+      ],
+    }),
+    new MiddlewareSourceMapsPlugin(),
+  ]
+}
+
+/**
+ * Produce source maps for middlewares.
+ * Currently we use the same compiler for browser and middlewares,
+ * so we can avoid having the custom plugins if the browser source maps
+ * are emitted.
+ */
+class MiddlewareSourceMapsPlugin {
+  apply(compiler: webpack5.Compiler): void {
+    const PLUGIN_NAME = 'NextJsMiddlewareSourceMapsPlugin'
+    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+      compilation.hooks.buildModule.tap(PLUGIN_NAME, (module) => {
+        module.useSourceMap = module.layer === 'middleware'
+      })
+    })
+  }
+}

packages/next/server/config-shared.ts

@@ -106,6 +106,7 @@ export interface ExperimentalConfig {
   urlImports?: NonNullable<webpack5.Configuration['experiments']>['buildHttp']
   outputFileTracingRoot?: string
   outputStandalone?: boolean
+  middlewareSourceMaps?: boolean
 }
 
 /**