Alias nextjs api entry to esm version for app router

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

@@ -200,6 +200,7 @@ export function createNextApiEsmAliases() {
  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',

packages/next/taskfile.js

@@ -7,30 +7,6 @@ const fs = require('fs/promises')
 const resolveFrom = require('resolve-from')
 const execa = require('execa')
 
-export async function next_esm_api_entries(task, opts) {
- const mapping = {
- head: 'next/dist/shared/lib/head.esm',
- image: 'next/dist/shared/lib/image-external.esm',
- constants: 'next/dist/shared/lib/constants.esm',
- router: 'next/dist/client/router.esm',
- dynamic: 'next/dist/client/dynamic.esm',
- link: 'next/dist/client/link.esm',
- navigation: 'next/dist/client/components/navigation.esm',
- headers: 'next/dist/client/components/headers.esm',
- og: 'next/dist/server/og/image-response.esm',
- }
-
- for (const file of Object.keys(mapping)) {
- const filePath = join(__dirname, `${file.slice('next/'.length)}.js`)
- console.error('filePath', filePath)
- // await fs.writeFile(
- // filePath,
- // 'e' + `xport * from '${mapping[file]}'\n` +
- // 'e' + `xport { default } from '${mapping[file]}'`
- // )
- }
-}
-
 export async function next__polyfill_nomodule(task, opts) {
  await task
  .source(relative(__dirname, require.resolve('@next/polyfill-nomodule')))
@@ -2477,6 +2453,8 @@ 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)')

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>
+ )
+}

test/e2e/app-dir/app-esm-js/index.test.ts

@@ -0,0 +1,39 @@
+import { createNextDescribe } from 'e2e-utils'
+
+createNextDescribe(
+ 'app-dir - esm js extension',
+ {
+ files: __dirname,
+ },
+ ({ next }) => {
+ it('should be able to render nextjs api in app router', async () => {
+ const $ = await next.render$('/app')
+
+ async function validateDomNodes(selector: string) {
+ expect(await $(`${selector} .img`).prop('tagName')).toBe('IMG')
+ expect(await $(`${selector} .link`).prop('tagName')).toBe('A')
+ expect(await $(`${selector} .unstable_getImgProps`).text()).toContain(
+ 'function'
+ )
+ }
+
+ await validateDomNodes('#with-ext')
+ await validateDomNodes('#without-ext')
+
+ expect($('head link[href="/test-ext.js"]').length).toBe(1)
+ expect($('head link[href="/test.js"]').length).toBe(1)
+ })
+
+ it('should be able to use nextjs api in pages router', async () => {
+ const $ = await next.render$('/pages')
+
+ expect(await $('meta[name="head-value-1"]').attr('content')).toBe(
+ 'with-ext'
+ )
+ expect(await $('meta[name="head-value-2"]').attr('content')).toBe(
+ 'without-ext'
+ )
+ expect(await $('.root').text()).toContain('pages')
+ })
+ }
+)

test/e2e/app-dir/app-esm-js/pages/_app.js

@@ -0,0 +1 @@
+export { default } from 'next/app.js'

test/e2e/app-dir/app-esm-js/pages/_document.js

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document.js'
+
+export default function MyDocument() {
+ return (
+ <Html>
+ <Head />
+ <body>
+ <Main />
+ <NextScript />
+ </body>
+ </Html>
+ )
+}

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

@@ -0,0 +1,20 @@
+import Head from 'next/head'
+import AnotherHead from 'next/head.js'
+import { useRouter } from 'next/router'
+import { useRouter as useRouter2 } from 'next/router.js'
+
+export default function Page() {
+ useRouter()
+ useRouter2()
+ return (
+ <>
+ <Head>
+ <meta name="head-value-1" content="with-ext" />
+ </Head>
+ <AnotherHead>
+ <meta name="head-value-2" content="without-ext" />
+ </AnotherHead>
+ <div className="root">pages</div>
+ </>
+ )
+}