edge-ssr: bundle next/dist as ESM for better tree-shaking

packages/next/amp.js

@@ -1 +1,4 @@
-module.exports = require('./dist/shared/lib/amp')
+module.exports =
+  process.env.NEXT_RUNTIME === 'edge'
+    ? require('./dist/esm/shared/lib/amp')
+    : require('./dist/shared/lib/amp')

packages/next/app.js

@@ -1 +1,4 @@
-module.exports = require('./dist/pages/_app')
+module.exports =
+  process.env.NEXT_RUNTIME === 'edge'
+    ? require('./dist/esm/pages/_app')
+    : require('./dist/pages/_app')

packages/next/build/entries.ts

@@ -219,6 +219,7 @@ export function getAppEntry(opts: {
   appDir: string
   appPaths: string[] | null
   pageExtensions: string[]
+  nextRuntime: string
 }) {
   return {
     import: `next-app-loader?${stringify(opts)}!`,
@@ -455,6 +456,7 @@ export async function createEntrypoints(params: CreateEntrypointsParams) {
               appDir,
               appPaths: matchedAppPaths,
               pageExtensions,
+              nextRuntime: 'nodejs',
             })
           } else if (isTargetLikeServerless(target)) {
             if (page !== '/_app' && page !== '/_document') {
@@ -479,6 +481,7 @@ export async function createEntrypoints(params: CreateEntrypointsParams) {
               appDir: appDir!,
               appPaths: matchedAppPaths,
               pageExtensions,
+              nextRuntime: 'edge',
             }).import
           }
 

packages/next/build/webpack-config.ts

@@ -139,11 +139,9 @@ export function getDefineEnv({
         }),
     // TODO: enforce `NODE_ENV` on `process.env`, and add a test:
     'process.env.NODE_ENV': JSON.stringify(dev ? 'development' : 'production'),
-    ...((isNodeServer || isEdgeServer) && {
-      'process.env.NEXT_RUNTIME': JSON.stringify(
-        isEdgeServer ? 'edge' : 'nodejs'
-      ),
-    }),
+    'process.env.NEXT_RUNTIME': JSON.stringify(
+      isEdgeServer ? 'edge' : isNodeServer ? 'nodejs' : undefined
+    ),
     'process.env.__NEXT_MIDDLEWARE_MATCHERS': JSON.stringify(
       middlewareMatchers || []
     ),
@@ -685,9 +683,9 @@ export default async function getBaseWebpackConfig(
   const pageExtensions = config.pageExtensions
 
   const babelIncludeRegexes: RegExp[] = [
-    /next[\\/]dist[\\/]shared[\\/]lib/,
-    /next[\\/]dist[\\/]client/,
-    /next[\\/]dist[\\/]pages/,
+    /next[\\/]dist[\\/](esm[\\/])?shared[\\/]lib/,
+    /next[\\/]dist[\\/](esm[\\/])?client/,
+    /next[\\/]dist[\\/](esm[\\/])?pages/,
     /[\\/](strip-ansi|ansi-regex)[\\/]/,
     /styled-jsx[\\/]/,
   ]
@@ -796,7 +794,7 @@ export default async function getBaseWebpackConfig(
             return prev
           }, [] as string[])
         : []),
-      'next/dist/pages/_app.js',
+      isEdgeServer ? 'next/dist/esm/pages/_app.js' : 'next/dist/pages/_app.js',
     ]
     customAppAliases[`${PAGES_DIR_ALIAS}/_error`] = [
       ...(pagesDir
@@ -805,7 +803,9 @@ export default async function getBaseWebpackConfig(
             return prev
           }, [] as string[])
         : []),
-      'next/dist/pages/_error.js',
+      isEdgeServer
+        ? 'next/dist/esm/pages/_error.js'
+        : 'next/dist/pages/_error.js',
     ]
     customDocumentAliases[`${PAGES_DIR_ALIAS}/_document`] = [
       ...(pagesDir
@@ -814,7 +814,9 @@ export default async function getBaseWebpackConfig(
             return prev
           }, [] as string[])
         : []),
-      `next/dist/pages/_document.js`,
+      isEdgeServer
+        ? `next/dist/esm/pages/_document.js`
+        : `next/dist/pages/_document.js`,
     ]
   }
 

packages/next/build/webpack/loaders/next-app-loader.ts

@@ -120,8 +120,9 @@ const nextAppLoader: webpack.LoaderDefinitionFunction<{
   appDir: string
   appPaths: string[] | null
   pageExtensions: string[]
+  nextRuntime: string
 }> = async function nextAppLoader() {
-  const { name, appDir, appPaths, pagePath, pageExtensions } =
+  const { name, appDir, appPaths, pagePath, pageExtensions, nextRuntime } =
     this.getOptions() || {}
 
   const buildInfo = getModuleBuildInfo((this as any)._module)
@@ -179,23 +180,24 @@ const nextAppLoader: webpack.LoaderDefinitionFunction<{
     resolveParallelSegments,
   })
 
+  const rootDistFolder = nextRuntime === 'edge' ? 'next/dist/esm' : 'next/dist'
   const result = `
     export ${treeCode}
 
-    export const AppRouter = require('next/dist/client/components/app-router.client.js').default
-    export const LayoutRouter = require('next/dist/client/components/layout-router.client.js').default
-    export const RenderFromTemplateContext = require('next/dist/client/components/render-from-template-context.client.js').default
+    export const AppRouter = require('${rootDistFolder}/client/components/app-router.client.js').default
+    export const LayoutRouter = require('${rootDistFolder}/client/components/layout-router.client.js').default
+    export const RenderFromTemplateContext = require('${rootDistFolder}/client/components/render-from-template-context.client.js').default
     export const HotReloader = ${
       // Disable HotReloader component in production
       this.mode === 'development'
-        ? `require('next/dist/client/components/hot-reloader.client.js').default`
+        ? `require('${rootDistFolder}/client/components/hot-reloader.client.js').default`
         : 'null'
     }
 
-    export const staticGenerationAsyncStorage = require('next/dist/client/components/static-generation-async-storage.js').staticGenerationAsyncStorage
-    export const requestAsyncStorage = require('next/dist/client/components/request-async-storage.js').requestAsyncStorage
+    export const staticGenerationAsyncStorage = require('${rootDistFolder}/client/components/static-generation-async-storage.js').staticGenerationAsyncStorage
+    export const requestAsyncStorage = require('${rootDistFolder}/client/components/request-async-storage.js').requestAsyncStorage
 
-    export const serverHooks = require('next/dist/client/components/hooks-server-context.js')
+    export const serverHooks = require('${rootDistFolder}/client/components/hooks-server-context.js')
 
     export const renderToReadableStream = require('next/dist/compiled/react-server-dom-webpack/writer.browser.server').renderToReadableStream
     export const __next_app_webpack_require__ = __webpack_require__

packages/next/build/webpack/loaders/next-edge-ssr-loader/index.ts

@@ -18,6 +18,18 @@ export type EdgeSSRLoaderQuery = {
   hasFontLoaders: boolean
 }
 
+/*
+For pages SSR'd at the edge, we bundle them with the ESM version of Next in order to
+benefit from the better tree-shaking and thus, smaller bundle sizes.
+
+The absolute paths for _app, _error and _document, used in this loader, link to the regular CJS modules.
+They are generated in `createPagesMapping` where we don't have access to `isEdgeRuntime`,
+so we have to do it here. It's not that bad because it keeps all references to ESM modules magic in this place.
+*/
+function swapDistFolderWithEsmDistFolder(path: string) {
+  return path.replace('next/dist/pages', 'next/dist/esm/pages')
+}
+
 export default async function edgeSSRLoader(this: any) {
   const {
     dev,
@@ -54,9 +66,18 @@ export default async function edgeSSRLoader(this: any) {
   }
 
   const stringifiedPagePath = stringifyRequest(this, absolutePagePath)
-  const stringifiedAppPath = stringifyRequest(this, absoluteAppPath)
-  const stringifiedErrorPath = stringifyRequest(this, absoluteErrorPath)
-  const stringifiedDocumentPath = stringifyRequest(this, absoluteDocumentPath)
+  const stringifiedAppPath = stringifyRequest(
+    this,
+    swapDistFolderWithEsmDistFolder(absoluteAppPath)
+  )
+  const stringifiedErrorPath = stringifyRequest(
+    this,
+    swapDistFolderWithEsmDistFolder(absoluteErrorPath)
+  )
+  const stringifiedDocumentPath = stringifyRequest(
+    this,
+    swapDistFolderWithEsmDistFolder(absoluteDocumentPath)
+  )
   const stringified500Path = absolute500Path
     ? stringifyRequest(this, absolute500Path)
     : null
@@ -67,8 +88,8 @@ export default async function edgeSSRLoader(this: any) {
   )}`
 
   const transformed = `
-    import { adapter, enhanceGlobals } from 'next/dist/server/web/adapter'
-    import { getRender } from 'next/dist/build/webpack/loaders/next-edge-ssr-loader/render'
+    import { adapter, enhanceGlobals } from 'next/dist/esm/server/web/adapter'
+    import { getRender } from 'next/dist/esm/build/webpack/loaders/next-edge-ssr-loader/render'
 
     enhanceGlobals()
 
@@ -77,7 +98,7 @@ export default async function edgeSSRLoader(this: any) {
       isAppDir
         ? `
       const Document = null
-      const appRenderToHTML = require('next/dist/server/app-render').renderToHTMLOrFlight
+      const appRenderToHTML = require('next/dist/esm/server/app-render').renderToHTMLOrFlight
       const pagesRenderToHTML = null
       const pageMod = require(${JSON.stringify(pageModPath)})
       const appMod = null
@@ -87,7 +108,7 @@ export default async function edgeSSRLoader(this: any) {
         : `
       const Document = require(${stringifiedDocumentPath}).default
       const appRenderToHTML = null
-      const pagesRenderToHTML = require('next/dist/server/render').renderToHTML
+      const pagesRenderToHTML = require('next/dist/esm/server/render').renderToHTML
       const pageMod = require(${stringifiedPagePath})
       const appMod = require(${stringifiedAppPath})
       const errorMod = require(${stringifiedErrorPath})

packages/next/build/webpack/loaders/next-edge-ssr-loader/render.ts

@@ -1,4 +1,5 @@
 import type { NextConfig } from '../../../../server/config-shared'
+
 import type { DocumentType, AppType } from '../../../../shared/lib/utils'
 import type { BuildManifest } from '../../../../server/get-page-files'
 import type { ReactLoadableManifest } from '../../../../server/load-components'

packages/next/build/webpack/plugins/flight-client-entry-plugin.ts

@@ -299,9 +299,19 @@ export class FlightClientEntryPlugin {
       modules: clientComponentImports,
       server: false,
     }
-    const clientLoader = `next-flight-client-entry-loader?${stringify(
-      loaderOptions
-    )}!`
+
+    // For the client entry, we always use the CJS build of Next.js. If the
+    // server is using the ESM build (when using the Edge runtime), we need to
+    // replace them.
+    const clientLoader = `next-flight-client-entry-loader?${stringify({
+      modules: this.isEdgeServer
+        ? clientComponentImports.map((importPath) =>
+            importPath.replace('next/dist/esm/', 'next/dist/')
+          )
+        : clientComponentImports,
+      server: false,
+    })}!`
+
     const clientSSRLoader = `next-flight-client-entry-loader?${stringify({
       ...loaderOptions,
       server: true,

packages/next/build/webpack/plugins/flight-manifest-plugin.ts

@@ -55,6 +55,9 @@ export type FlightManifest = {
   __ssr_module_mapping__: {
     [moduleId: string]: ManifestNode
   }
+  __edge_ssr_module_mapping__: {
+    [moduleId: string]: ManifestNode
+  }
 } & {
   [modulePath: string]: ManifestNode
 }
@@ -138,6 +141,7 @@ export class FlightManifestPlugin {
   ) {
     const manifest: FlightManifest = {
       __ssr_module_mapping__: {},
+      __edge_ssr_module_mapping__: {},
     }
     const dev = this.dev
 
@@ -188,6 +192,7 @@ export class FlightManifestPlugin {
 
         const moduleExports = manifest[resource] || {}
         const moduleIdMapping = manifest.__ssr_module_mapping__
+        const edgeModuleIdMapping = manifest.__edge_ssr_module_mapping__
 
         // Note that this isn't that reliable as webpack is still possible to assign
         // additional queries to make sure there's no conflict even using the `named`
@@ -296,10 +301,25 @@ export class FlightManifestPlugin {
             ...moduleExports[name],
             id: ssrNamedModuleId,
           }
+
+          edgeModuleIdMapping[id] = edgeModuleIdMapping[id] || {}
+          edgeModuleIdMapping[id][name] = {
+            ...moduleExports[name],
+            id: ssrNamedModuleId.replace(/\/next\/dist\//, '/next/dist/esm/'),
+          }
         })
 
         manifest[resource] = moduleExports
+
+        // The client compiler will always use the CJS Next.js build, so here we
+        // also add the mapping for the ESM build (Edge runtime) to consume.
+        if (/\/next\/dist\//.test(resource)) {
+          manifest[resource.replace(/\/next\/dist\//, '/next/dist/esm/')] =
+            moduleExports
+        }
+
         manifest.__ssr_module_mapping__ = moduleIdMapping
+        manifest.__edge_ssr_module_mapping__ = edgeModuleIdMapping
       }
 
       chunkGroup.chunks.forEach((chunk: webpack.Chunk) => {

packages/next/build/webpack/plugins/telemetry-plugin.ts

@@ -110,11 +110,15 @@ function findFeatureInModule(module: Module): Feature | undefined {
  * dependency.
  */
 function findUniqueOriginModulesInConnections(
-  connections: Connection[]
+  connections: Connection[],
+  originModule: Module
 ): Set<unknown> {
   const originModules = new Set()
   for (const connection of connections) {
-    if (!originModules.has(connection.originModule)) {
+    if (
+      !originModules.has(connection.originModule) &&
+      connection.originModule !== originModule
+    ) {
       originModules.add(connection.originModule)
     }
   }
@@ -161,8 +165,10 @@ export class TelemetryPlugin implements webpack.WebpackPluginInstance {
               const connections = (
                 compilation as any
               ).moduleGraph.getIncomingConnections(module)
-              const originModules =
-                findUniqueOriginModulesInConnections(connections)
+              const originModules = findUniqueOriginModulesInConnections(
+                connections,
+                module
+              )
               this.usageTracker.get(feature)!.invocationCount =
                 originModules.size
             }

packages/next/client.js

@@ -1 +1,4 @@
-module.exports = require('./dist/client/index')
+module.exports =
+  process.env.NEXT_RUNTIME === 'edge'
+    ? require('./dist/esm/client/index')
+    : require('./dist/client/index')

packages/next/config.js

@@ -1 +1,4 @@
-module.exports = require('./dist/shared/lib/runtime-config')
+module.exports =
+  process.env.NEXT_RUNTIME === 'edge'
+    ? require('./dist/esm/shared/lib/runtime-config')
+    : require('./dist/shared/lib/runtime-config')

packages/next/constants.js

@@ -1 +1,4 @@
-module.exports = require('./dist/shared/lib/constants')
+module.exports =
+  process.env.NEXT_RUNTIME === 'edge'
+    ? require('./dist/esm/shared/lib/constants')
+    : require('./dist/shared/lib/constants')

packages/next/document.js

@@ -1 +1,4 @@
-module.exports = require('./dist/pages/_document')
+module.exports =
+  process.env.NEXT_RUNTIME === 'edge'
+    ? require('./dist/esm/pages/_document')
+    : require('./dist/pages/_document')

packages/next/dynamic.js

@@ -1 +1,4 @@
-module.exports = require('./dist/shared/lib/dynamic')
+module.exports =
+  process.env.NEXT_RUNTIME === 'edge'
+    ? require('./dist/esm/shared/lib/dynamic')
+    : require('./dist/shared/lib/dynamic')

packages/next/error.js

@@ -1 +1,4 @@
-module.exports = require('./dist/pages/_error')
+module.exports =
+  process.env.NEXT_RUNTIME === 'edge'
+    ? require('./dist/esm/pages/_error')
+    : require('./dist/pages/_error')

packages/next/head.js

@@ -1 +1,4 @@
-module.exports = require('./dist/shared/lib/head')
+module.exports =
+  process.env.NEXT_RUNTIME === 'edge'
+    ? require('./dist/esm/shared/lib/head')
+    : require('./dist/shared/lib/head')

packages/next/image.js

@@ -1 +1,4 @@
-module.exports = require('./dist/client/image')
+module.exports =
+  process.env.NEXT_RUNTIME === 'edge'
+    ? require('./dist/esm/client/image')
+    : require('./dist/client/image')

packages/next/link.js

@@ -1 +1,4 @@
-module.exports = require('./dist/client/link')
+module.exports =
+  process.env.NEXT_RUNTIME === 'edge'
+    ? require('./dist/esm/client/link')
+    : require('./dist/client/link')

packages/next/pages/_app.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import {
-  loadGetInitialProps,
+
+import type {
   AppContextType,
   AppInitialProps,
   AppPropsType,
@@ -9,6 +9,8 @@ import {
 } from '../shared/lib/utils'
 import type { Router } from '../client/router'
 
+import { loadGetInitialProps } from '../shared/lib/utils'
+
 export { AppInitialProps, AppType }
 
 export { NextWebVitalsMetric }

packages/next/router.js

@@ -1 +1,4 @@
-module.exports = require('./dist/client/router')
+module.exports =
+  process.env.NEXT_RUNTIME === 'edge'
+    ? require('./dist/esm/client/router')
+    : require('./dist/client/router')