Create unique source URLs between Client and Server in Pages dir

packages/next/src/build/entries.ts

@@ -869,7 +869,9 @@ export function finalizeEntrypoint({
           ? WEBPACK_LAYERS.instrument
           : isServerComponent
             ? WEBPACK_LAYERS.reactServerComponents
-            : undefined
+            : name.startsWith('pages/')
+              ? WEBPACK_LAYERS.pagesDirNode
+              : undefined
 
       return {
         publicPath: isApi ? '' : undefined,
@@ -884,7 +886,9 @@ export function finalizeEntrypoint({
           ? WEBPACK_LAYERS.api
           : isMiddlewareFilename(name) || isInstrumentation
             ? WEBPACK_LAYERS.middleware
-            : undefined,
+            : name.startsWith('pages/')
+              ? WEBPACK_LAYERS.pagesDirEdge
+              : undefined,
         library: { name: ['_ENTRIES', `middleware_[name]`], type: 'assign' },
         runtime: EDGE_RUNTIME_WEBPACK,
         asyncChunks: false,
@@ -919,6 +923,7 @@ export function finalizeEntrypoint({
             name.startsWith('pages/') && name !== 'pages/_app'
               ? 'pages/_app'
               : CLIENT_STATIC_FILES_RUNTIME_MAIN,
+          layer: WEBPACK_LAYERS.pagesDirBrowser,
           ...entry,
         }
       }
@@ -930,7 +935,10 @@ export function finalizeEntrypoint({
         }
       }
 
-      return entry
+      return {
+        layer: WEBPACK_LAYERS.pagesDirBrowser,
+        ...entry,
+      }
     }
     default: {
       // Should never happen.

packages/next/src/build/utils.ts

@@ -1782,7 +1782,13 @@ export function isWebpackClientOnlyLayer(
 export function isWebpackDefaultLayer(
   layer: WebpackLayerName | null | undefined
 ): boolean {
-  return layer === null || layer === undefined
+  return (
+    layer === null ||
+    layer === undefined ||
+    layer === WEBPACK_LAYERS.pagesDirBrowser ||
+    layer === WEBPACK_LAYERS.pagesDirEdge ||
+    layer === WEBPACK_LAYERS.pagesDirNode
+  )
 }
 
 export function isWebpackBundledLayer(

packages/next/src/lib/constants.ts

@@ -137,6 +137,18 @@ const WEBPACK_LAYERS_NAMES = {
    * The browser client bundle layer for App directory.
    */
   appPagesBrowser: 'app-pages-browser',
+  /**
+   * The browser client bundle layer for Pages directory.
+   */
+  pagesDirBrowser: 'pages-dir-browser',
+  /**
+   * The Edge Lite bundle layer for Pages directory.
+   */
+  pagesDirEdge: 'pages-dir-edge',
+  /**
+   * The Node.js bundle layer for Pages directory.
+   */
+  pagesDirNode: 'pages-dir-node',
 } as const
 
 export type WebpackLayerName =

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

@@ -522,8 +522,8 @@ export default class HotReloaderWebpack implements NextJsHotReloaderInterface {
                   stackTrace
                 )?.[1]
                 if (file) {
-                  // `file` is filepath in `pages/` but it can be weird long webpack url in `app/`.
-                  // If it's a webpack loader URL, it will start with '(app-pages)/./'
+                  // `file` is filepath in `pages/` but it can be a webpack url.
+                  // If it's a webpack loader URL, it will include the app-pages layer
                   if (
                     file.startsWith(`(${WEBPACK_LAYERS.appPagesBrowser})/./`)
                   ) {
@@ -539,6 +539,15 @@ export default class HotReloaderWebpack implements NextJsHotReloaderInterface {
                     if (modules.length > 0) {
                       fileMessage = ` when ${modules.join(', ')} changed`
                     }
+                  } else if (
+                    // Handle known webpack layers
+                    file.startsWith(`(${WEBPACK_LAYERS.pagesDirBrowser})/./`)
+                  ) {
+                    const cleanedFilePath = file.slice(
+                      `(${WEBPACK_LAYERS.pagesDirBrowser})/`.length
+                    )
+
+                    fileMessage = ` when ${cleanedFilePath} changed`
                   } else {
                     fileMessage = ` when ${file} changed`
                   }