Resolve next api for layouts to esm for edge runtime (#43302)

The edge runtime should all use esm assets to keep the hooks and the react context are matched

Fixes: #43080

The issue is caused by the app router context and server inserted html context are not aligned. One side is using esm and other side is using the cjs asset.

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

packages/next/build/webpack-config.ts

@@ -884,16 +884,6 @@ export default async function getBaseWebpackConfig(
       // let this alias hit before `next` alias.
       ...(isEdgeServer
         ? {
-            // app-router-context can not be ESM and CJS so force CJS
-            'next/dist/shared/lib/app-router-context': path.join(
-              __dirname,
-              '../dist/shared/lib/app-router-context.js'
-            ),
-            'next/dist/client/components': path.join(
-              __dirname,
-              '../client/components'
-            ),
-
             'next/dist/client': 'next/dist/esm/client',
             'next/dist/shared': 'next/dist/esm/shared',
             'next/dist/pages': 'next/dist/esm/pages',
@@ -916,6 +906,10 @@ export default async function getBaseWebpackConfig(
               'next/dist/esm/pages/_document',
             [require.resolve('next/dist/pages/_app')]:
               'next/dist/esm/pages/_app',
+            [require.resolve('next/dist/client/components/navigation')]:
+              'next/dist/client/components/navigation',
+            [require.resolve('next/dist/client/components/headers')]:
+              'next/dist/client/components/headers',
           }
         : undefined),
 

test/e2e/app-dir/rsc-basic.test.ts

@@ -273,7 +273,7 @@ describe('app dir - rsc basics', () => {
     expect(content).toContain('bar.server.js:')
   })
 
-  it('should render initial styles of css-in-js in SSR correctly', async () => {
+  it('should render initial styles of css-in-js in nodejs SSR correctly', async () => {
     const html = await renderViaHTTP(next.url, '/css-in-js')
     const head = getNodeBySelector(html, 'head').html()
 
@@ -285,6 +285,18 @@ describe('app dir - rsc basics', () => {
     expect(head).toMatch(/{color:(\s*)blue;?}/)
   })
 
+  it('should render initial styles of css-in-js in edge SSR correctly', async () => {
+    const html = await renderViaHTTP(next.url, '/css-in-js/edge')
+    const head = getNodeBySelector(html, 'head').html()
+
+    // from styled-jsx
+    expect(head).toMatch(/{color:(\s*)purple;?}/) // styled-jsx/style
+    expect(head).toMatch(/{color:(\s*)hotpink;?}/) // styled-jsx/css
+
+    // from styled-components
+    expect(head).toMatch(/{color:(\s*)blue;?}/)
+  })
+
   it('should render css-in-js suspense boundary correctly', async () => {
     await fetchViaHTTP(next.url, '/css-in-js/suspense', null, {}).then(
       async (response) => {

test/e2e/app-dir/rsc-basic/app/css-in-js/edge/page.js

@@ -0,0 +1,11 @@
+import Comp from '../styled-jsx'
+import StyledComp from '../styled-components'
+
+export default function Page() {
+  return (
+    <div>
+      <Comp />
+      <StyledComp />
+    </div>
+  )
+}