Alias nextjs api entry to esm version for app router

packages/next/src/api/app-dynamic.ts

@@ -0,0 +1,2 @@
+export * from '../shared/lib/app-dynamic'
+export { default } from '../shared/lib/app-dynamic'

packages/next/src/api/app.tsx

@@ -0,0 +1,2 @@
+export * from '../pages/_app'
+export { default } from '../pages/_app'

packages/next/src/api/constants.ts

@@ -0,0 +1 @@
+export * from '../shared/lib/constants'

packages/next/src/api/document.tsx

@@ -0,0 +1,2 @@
+export * from '../pages/_document'
+export { default } from '../pages/_document'

packages/next/src/api/dynamic.ts

@@ -0,0 +1,2 @@
+export { default } from '../shared/lib/dynamic'
+export * from '../shared/lib/dynamic'

packages/next/src/api/head.ts

@@ -0,0 +1,2 @@
+export { default } from '../shared/lib/head'
+export * from '../shared/lib/head'

packages/next/src/api/headers.ts

@@ -0,0 +1 @@
+export * from '../client/components/headers'

packages/next/src/api/image.ts

@@ -0,0 +1,2 @@
+export { default } from '../shared/lib/image-external'
+export * from '../shared/lib/image-external'

packages/next/src/api/link.ts

@@ -0,0 +1,2 @@
+export { default } from '../client/link'
+export * from '../client/link'

packages/next/src/api/navigation.ts

@@ -0,0 +1 @@
+export * from '../client/components/navigation'

packages/next/src/api/og.ts

@@ -0,0 +1 @@
+export * from '../server/og/image-response'

packages/next/src/api/router.ts

@@ -0,0 +1,2 @@
+export { default } from '../client/router'
+export * from '../client/router'

packages/next/src/api/script.ts

@@ -0,0 +1,2 @@
+export { default } from '../client/script'
+export * from '../client/script'

packages/next/src/api/server.ts

@@ -0,0 +1 @@
+export * from '../server/web/exports/index'

packages/next/src/build/create-compiler-aliases.ts

@@ -12,11 +12,7 @@ import {
 } from '../lib/constants'
 import type { NextConfigComplete } from '../server/config-shared'
 import { defaultOverrides } from '../server/require-hook'
-import {
-  NEXT_PROJECT_ROOT,
-  NEXT_PROJECT_ROOT_DIST,
-  hasExternalOtelApiPackage,
-} from './webpack-config'
+import { NEXT_PROJECT_ROOT, hasExternalOtelApiPackage } from './webpack-config'
 import { WEBPACK_LAYERS } from '../lib/constants'
 
 interface CompilerAliases {
@@ -96,51 +92,15 @@ export function createWebpackAliases({
     // let this alias hit before `next` alias.
     ...(isEdgeServer
       ? {
+          'next/dist/api': 'next/dist/esm/api',
           'next/dist/build': 'next/dist/esm/build',
           'next/dist/client': 'next/dist/esm/client',
           'next/dist/shared': 'next/dist/esm/shared',
           'next/dist/pages': 'next/dist/esm/pages',
           'next/dist/lib': 'next/dist/esm/lib',
           'next/dist/server': 'next/dist/esm/server',
 
-          // Alias the usage of next public APIs
-          [path.join(NEXT_PROJECT_ROOT, 'server')]:
-            'next/dist/esm/server/web/exports/index',
-          [path.join(NEXT_PROJECT_ROOT, 'og')]:
-            'next/dist/esm/server/og/image-response',
-          [path.join(NEXT_PROJECT_ROOT_DIST, 'client', 'link')]:
-            'next/dist/esm/client/link',
-          [path.join(
-            NEXT_PROJECT_ROOT,
-            'dist',
-            'shared',
-            'lib',
-            'image-external'
-          )]: 'next/dist/esm/shared/lib/image-external',
-          [path.join(NEXT_PROJECT_ROOT_DIST, 'client', 'script')]:
-            'next/dist/esm/client/script',
-          [path.join(NEXT_PROJECT_ROOT_DIST, 'client', 'router')]:
-            'next/dist/esm/client/router',
-          [path.join(NEXT_PROJECT_ROOT_DIST, 'shared', 'lib', 'head')]:
-            'next/dist/esm/shared/lib/head',
-          [path.join(NEXT_PROJECT_ROOT_DIST, 'shared', 'lib', 'dynamic')]:
-            'next/dist/esm/shared/lib/dynamic',
-          [path.join(NEXT_PROJECT_ROOT_DIST, 'pages', '_document')]:
-            'next/dist/esm/pages/_document',
-          [path.join(NEXT_PROJECT_ROOT_DIST, 'pages', '_app')]:
-            'next/dist/esm/pages/_app',
-          [path.join(
-            NEXT_PROJECT_ROOT_DIST,
-            'client',
-            'components',
-            'navigation'
-          )]: 'next/dist/esm/client/components/navigation',
-          [path.join(
-            NEXT_PROJECT_ROOT_DIST,
-            'client',
-            'components',
-            'headers'
-          )]: 'next/dist/esm/client/components/headers',
+          ...createNextApiEsmAliases(),
         }
       : undefined),
 
@@ -233,6 +193,46 @@ export function createServerOnlyClientOnlyAliases(
       }
 }
 
+export function createNextApiEsmAliases() {
+  const mapping = {
+    head: 'next/dist/api/head',
+    image: 'next/dist/api/image',
+    constants: 'next/dist/api/constants',
+    router: 'next/dist/api/router',
+    dynamic: 'next/dist/api/dynamic',
+    script: 'next/dist/api/script',
+    link: 'next/dist/api/link',
+    navigation: 'next/dist/api/navigation',
+    headers: 'next/dist/api/headers',
+    og: 'next/dist/api/og',
+    // pages api
+    document: 'next/dist/api/document',
+    app: 'next/dist/api/app',
+  }
+  const aliasMap: Record<string, string> = {}
+  // Handle fully specified imports like `next/image.js`
+  for (const [key, value] of Object.entries(mapping)) {
+    const nextApiFilePath = path.join(NEXT_PROJECT_ROOT, key)
+    aliasMap[nextApiFilePath + '.js'] = value
+  }
+
+  return aliasMap
+}
+
+export function createAppRouterApiAliases() {
+  const mapping = {
+    head: 'next/dist/client/components/noop-head',
+    dynamic: 'next/dist/api/app-dynamic',
+  }
+
+  const aliasMap: Record<string, string> = {}
+  for (const [key, value] of Object.entries(mapping)) {
+    const nextApiFilePath = path.join(NEXT_PROJECT_ROOT, key)
+    aliasMap[nextApiFilePath + '.js'] = value
+  }
+  return aliasMap
+}
+
 export function createRSCAliases(
   bundledReactChannel: string,
   {
@@ -371,14 +371,3 @@ function getReactProfilingInProduction(): CompilerAliases {
     'react-dom$': 'react-dom/profiling',
   }
 }
-export function createServerComponentsNoopAliases(): CompilerAliases {
-  return {
-    [require.resolve('next/head')]: require.resolve(
-      'next/dist/client/components/noop-head'
-    ),
-    // Alias next/dynamic
-    [require.resolve('next/dynamic')]: require.resolve(
-      'next/dist/shared/lib/app-dynamic'
-    ),
-  }
-}

packages/next/src/build/webpack-config.ts

@@ -9,7 +9,11 @@ import semver from 'next/dist/compiled/semver'
 import { escapeStringRegexp } from '../shared/lib/escape-regexp'
 import { WEBPACK_LAYERS, WEBPACK_RESOURCE_QUERIES } from '../lib/constants'
 import type { WebpackLayerName } from '../lib/constants'
-import { isWebpackDefaultLayer, isWebpackServerLayer } from './utils'
+import {
+  isWebpackAppLayer,
+  isWebpackDefaultLayer,
+  isWebpackServerLayer,
+} from './utils'
 import type { CustomRoutes } from '../lib/load-custom-routes.js'
 import {
   CLIENT_STATIC_FILES_RUNTIME_AMP,
@@ -71,10 +75,13 @@ import {
   edgeConditionNames,
 } from './webpack-config-rules/resolve'
 import { OptionalPeerDependencyResolverPlugin } from './webpack/plugins/optional-peer-dependency-resolve-plugin'
-import { createWebpackAliases } from './create-compiler-aliases'
-import { createServerOnlyClientOnlyAliases } from './create-compiler-aliases'
-import { createRSCAliases } from './create-compiler-aliases'
-import { createServerComponentsNoopAliases } from './create-compiler-aliases'
+import {
+  createWebpackAliases,
+  createServerOnlyClientOnlyAliases,
+  createRSCAliases,
+  createNextApiEsmAliases,
+  createAppRouterApiAliases,
+} from './create-compiler-aliases'
 import { hasCustomExportOutput } from '../export/utils'
 
 type ExcludesFalse = <T>(x: T | false) => x is T
@@ -1263,18 +1270,12 @@ export default async function getBaseWebpackConfig(
                 test: /next[\\/]dist[\\/](esm[\\/])?server[\\/]future[\\/]route-modules[\\/]app-page[\\/]module/,
               },
               {
-                // All app dir layers need to use this configured resolution logic
-                issuerLayer: {
-                  or: [
-                    WEBPACK_LAYERS.reactServerComponents,
-                    WEBPACK_LAYERS.serverSideRendering,
-                    WEBPACK_LAYERS.appPagesBrowser,
-                    WEBPACK_LAYERS.actionBrowser,
-                    WEBPACK_LAYERS.shared,
-                  ],
-                },
+                issuerLayer: isWebpackAppLayer,
                 resolve: {
-                  alias: createServerComponentsNoopAliases(),
+                  alias: {
+                    ...createNextApiEsmAliases(),
+                    ...createAppRouterApiAliases(),
+                  },
                 },
               },
             ]

packages/next/src/lib/constants.ts

@@ -171,6 +171,7 @@ const WEBPACK_LAYERS = {
       WEBPACK_LAYERS_NAMES.appRouteHandler,
       WEBPACK_LAYERS_NAMES.serverSideRendering,
       WEBPACK_LAYERS_NAMES.appPagesBrowser,
+      WEBPACK_LAYERS_NAMES.shared,
     ],
   },
 }

packages/next/taskfile.js

@@ -2367,6 +2367,7 @@ export async function next_compile(task, opts) {
       'bin',
       'server',
       'server_esm',
+      'api_esm',
       'nextbuild',
       'nextbuildjest',
       'nextbuildstatic',
@@ -2452,6 +2453,16 @@ export async function server_esm(task, opts) {
     .target('dist/esm/server')
 }
 
+// Provide ESM entry files for Next.js apis,
+// Remain in ESM both for dist/ and dist/esm
+export async function api_esm(task, opts) {
+  await task
+    .source('src/api/**/*.+(js|mts|ts|tsx)')
+    .swc('server', { dev: opts.dev, esm: true })
+    .target('dist/api')
+    .target('dist/esm/api')
+}
+
 export async function nextbuild(task, opts) {
   await task
     .source('src/build/**/*.+(js|ts|tsx)', {
@@ -2639,6 +2650,7 @@ export default async function (task) {
   await task.watch('src/bin', 'bin', opts)
   await task.watch('src/pages', 'pages', opts)
   await task.watch('src/server', ['server', 'server_esm', 'server_wasm'], opts)
+  await task.watch('src/api', 'api_esm', opts)
   await task.watch(
     'src/build',
     ['nextbuild', 'nextbuild_esm', 'nextbuildjest'],

test/e2e/app-dir/app-alias/app-alias.test.ts

@@ -4,9 +4,6 @@ createNextDescribe(
   'app-dir alias',
   {
     files: __dirname,
-    packageJson: {
-      type: 'module',
-    },
     skipDeployment: true,
   },
   ({ next, isNextStart }) => {

test/e2e/app-dir/app-esm-js/app/app/client-hooks-ext.js

@@ -0,0 +1,8 @@
+'use client'
+
+import { useRouter } from 'next/navigation.js'
+
+export function ClientHooks() {
+  useRouter()
+  return null
+}

test/e2e/app-dir/app-esm-js/app/app/client-hooks.js

@@ -0,0 +1,8 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+export function ClientHooks() {
+  useRouter()
+  return null
+}

test/e2e/app-dir/app-esm-js/app/app/components-ext.js

@@ -0,0 +1,18 @@
+import NextImage, { unstable_getImgProps } from 'next/image.js'
+import Link from 'next/link.js'
+import Script from 'next/script.js'
+
+import src from '../../public/test.jpg'
+
+export function Components() {
+  return (
+    <>
+      <NextImage className="img" src={src} />
+      <p className="unstable_getImgProps">{typeof unstable_getImgProps}</p>
+      <Link className="link" href="/client">
+        link
+      </Link>
+      <Script className="script" src="/test-ext.js" />
+    </>
+  )
+}

test/e2e/app-dir/app-esm-js/app/app/components.js

@@ -0,0 +1,18 @@
+import NextImage, { unstable_getImgProps } from 'next/image'
+import Link from 'next/link'
+import Script from 'next/script'
+
+import src from '../../public/test.jpg'
+
+export function Components() {
+  return (
+    <>
+      <NextImage className="img" src={src} />
+      <p className="unstable_getImgProps">{typeof unstable_getImgProps}</p>
+      <Link className="link" href="/client">
+        link
+      </Link>
+      <Script className="script" src="/test.js" />
+    </>
+  )
+}

test/e2e/app-dir/app-esm-js/app/app/hooks-ext.js

@@ -0,0 +1,8 @@
+import { ClientHooks } from './client-hooks-ext'
+import { headers, cookies } from 'next/headers.js'
+
+export function useHooks() {
+  headers()
+  cookies()
+  return <ClientHooks />
+}

test/e2e/app-dir/app-esm-js/app/app/hooks.js

@@ -0,0 +1,8 @@
+import { ClientHooks } from './client-hooks'
+import { headers, cookies } from 'next/headers'
+
+export function useHooks() {
+  headers()
+  cookies()
+  return <ClientHooks />
+}

test/e2e/app-dir/app-esm-js/app/app/page.js

@@ -0,0 +1,20 @@
+import { useHooks } from './hooks'
+import { useHooks as useHooks2 } from './hooks-ext'
+import { Components } from './components'
+import { Components as Components2 } from './components-ext'
+
+export default function Page() {
+  useHooks()
+  useHooks2()
+
+  return (
+    <>
+      <div id="without-ext">
+        <Components />
+      </div>
+      <div id="with-ext">
+        <Components2 />
+      </div>
+    </>
+  )
+}

test/e2e/app-dir/app-esm-js/app/layout.js

@@ -0,0 +1,12 @@
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}