Repository: vercel/next.js
Pull request: Avoid bundling dev overlay in page template

As noticed in https://github.com/vercel/next.js/pull/79632 we increased compile times for pages routes in development which is due to us including the dev-overlay component in the page bundle itself instead of just in the server runtime. 

x-ref: https://github.com/vercel/next.js/pull/79632/files

<details>

<summary>Before</summary>

```sh
✓ Compiled /_error in 1238ms (1385 modules)
✓ Compiled /_error in 1245ms (1386 modules)
✓ Compiled /_error in 1225ms (1394 modules)
✓ Compiled /_error in 944ms (1385 modules)
✓ Compiled /_error in 1232ms (1385 modules)
```

</details>

<details>

<summary>After</summary>

```sh
 ✓ Compiled /_error in 927ms (1009 modules)
 ✓ Compiled /_error in 922ms (1010 modules)
 ✓ Compiled /_error in 935ms (1018 modules)
 ✓ Compiled /_error in 626ms (1009 modules)
 ✓ Compiled /_error in 916ms (1009 modules)
```

</details>

Changed files:
filename: packages/next/src/build/templates/pages.ts
patch: @@ -161,16 +161,6 @@ export async function handler(
     const publicRuntimeConfig: Record<string, string> =
       routerServerContext?.publicRuntimeConfig || nextConfig.publicRuntimeConfig
 
-    let ErrorDebug: any
-
-    if (process.env.NODE_ENV === 'development') {
-      ErrorDebug = (props: any) => {
-        const ReactDevOverlayImpl =
-          require('next/dist/client/components/react-dev-overlay/pages/pages-dev-overlay').PagesDevOverlay
-        return ReactDevOverlayImpl(props)
-      }
-    }
-
     const invokeRouteModule = async (span?: Span) =>
       routeModule
         .render(req, res, {
@@ -277,7 +267,7 @@ export async function handler(
 
             isOnDemandRevalidate,
 
-            ErrorDebug,
+            ErrorDebug: getRequestMeta(req, 'PagesErrorDebug'),
             err: getRequestMeta(req, 'invokeError'),
             dev: routeModule.isDev,
 

filename: packages/next/src/server/dev/next-dev-server.ts
patch: @@ -9,6 +9,7 @@ import type { MiddlewareRoutingItem } from '../base-server'
 import type { RouteDefinition } from '../route-definitions/route-definition'
 import type { RouteMatcherManager } from '../route-matcher-managers/route-matcher-manager'
 import {
+  addRequestMeta,
   getRequestMeta,
   type NextParsedUrlQuery,
   type NextUrlWithParsedQuery,
@@ -542,6 +543,7 @@ export default class DevServer extends Server {
     const span = trace('handle-request', undefined, { url: req.url })
     const result = await span.traceAsyncFn(async () => {
       await this.ready?.promise
+      addRequestMeta(req, 'PagesErrorDebug', this.renderOpts.ErrorDebug)
       return await super.handleRequest(req, res, parsedUrl)
     })
     const memoryUsage = process.memoryUsage()

filename: packages/next/src/server/request-meta.ts
patch: @@ -7,6 +7,7 @@ import type { CloneableBody } from './body-streams'
 import type { RouteMatch } from './route-matches/route-match'
 import type { NEXT_RSC_UNION_QUERY } from '../client/components/app-router-headers'
 import type { ServerComponentsHmrCache } from './response-cache'
+import type { PagesDevOverlayType } from '../client/components/react-dev-overlay/pages/pages-dev-overlay'
 
 // FIXME: (wyattjoh) this is a temporary solution to allow us to pass data between bundled modules
 export const NEXT_REQUEST_META = Symbol.for('NextInternalRequestMeta')
@@ -208,6 +209,11 @@ export interface RequestMeta {
    * The AMP validator to use in development
    */
   ampValidator?: (html: string, pathname: string) => Promise<void>
+
+  /**
+   * ErrorOverlay component to use in development for pages router
+   */
+  PagesErrorDebug?: PagesDevOverlayType
 }
 
 /**