Fix app metadata in edge runtime

packages/next/src/build/webpack/loaders/next-metadata-image-loader.ts

@@ -51,7 +51,7 @@ async function nextMetadataImageLoader(this: any, content: Buffer) {
   if (isDynamicResource) {
     // re-export and spread as `exportedImageData` to avoid non-exported error
     return `\
-    import path from 'path'
+    import path from 'next/dist/shared/lib/isomorphic/path'
     import * as exported from ${JSON.stringify(resourcePath)}
     import { interpolateDynamicPath } from 'next/dist/server/server-utils'
     import { getNamedRouteRegex } from 'next/dist/shared/lib/router/utils/route-regex'
@@ -105,7 +105,7 @@ async function nextMetadataImageLoader(this: any, content: Buffer) {
   }
 
   return `\
-  import path from 'path'
+  import path from 'next/dist/shared/lib/isomorphic/path'
   import { interpolateDynamicPath } from 'next/dist/server/server-utils'
   import { getNamedRouteRegex } from 'next/dist/shared/lib/router/utils/route-regex'
 

test/e2e/app-dir/metadata/app/basic-edge/client.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import ReactDOM from 'react-dom'
+
+// NOTE: atm preload/prefetch/prefetchDNS are only supported in the SSR and client, not in RSC yet
+export default function Client() {
+  // @ts-ignore
+  ReactDOM.preload('/preload-url', { as: 'script' })
+  // @ts-ignore
+  ReactDOM.preconnect('/preconnect-url', { crossOrigin: 'use-credentials' })
+  // @ts-ignore
+  ReactDOM.prefetchDNS('/dns-prefetch-url')
+  return null
+}

test/e2e/app-dir/metadata/app/basic-edge/page.tsx

@@ -0,0 +1,46 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import Client from './client'
+
+export const runtime = 'experimental-edge'
+
+export default function Page() {
+  return (
+    <div id="basic">
+      <Link id="to-index" href="/">
+        to index
+      </Link>
+      <br />
+      <Link href="/title-template/extra/inner" id="to-nested">
+        to /title-template/extra/inner
+      </Link>
+      <Client />
+    </div>
+  )
+}
+
+export const metadata: Metadata = {
+  generator: 'next.js',
+  applicationName: 'test',
+  referrer: 'origin-when-cross-origin',
+  keywords: ['next.js', 'react', 'javascript'],
+  authors: [{ name: 'huozhi' }, { name: 'tree', url: 'https://tree.com' }],
+  themeColor: { color: 'cyan', media: '(prefers-color-scheme: dark)' },
+  colorScheme: 'dark',
+  manifest: 'https://www.google.com/manifest',
+  viewport: {
+    width: 'device-width',
+    initialScale: 1,
+    maximumScale: 1,
+    interactiveWidget: 'resizes-visual',
+  },
+  creator: 'shu',
+  publisher: 'vercel',
+  robots: 'index, follow',
+  alternates: {},
+  formatDetection: {
+    email: false,
+    address: false,
+    telephone: false,
+  },
+}

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

@@ -227,6 +227,40 @@ createNextDescribe(
         })
       })
 
+      it('should support other basic tags (edge)', async () => {
+        const browser = await next.browser('/basic-edge')
+        const matchDom = createDomMatcher(browser)
+        const matchMultiDom = createMultiDomMatcher(browser)
+
+        await matchMultiDom('meta', 'name', 'content', {
+          generator: 'next.js',
+          'application-name': 'test',
+          referrer: 'origin-when-cross-origin',
+          keywords: 'next.js,react,javascript',
+          author: ['huozhi', 'tree'],
+          'color-scheme': 'dark',
+          viewport:
+            'width=device-width, initial-scale=1, maximum-scale=1, interactive-widget=resizes-visual',
+          creator: 'shu',
+          publisher: 'vercel',
+          robots: 'index, follow',
+          'format-detection': 'telephone=no, address=no, email=no',
+        })
+
+        await matchMultiDom('link', 'rel', 'href', {
+          manifest: 'https://www.google.com/manifest',
+          author: 'https://tree.com',
+          preconnect: '/preconnect-url',
+          preload: '/preload-url',
+          'dns-prefetch': '/dns-prefetch-url',
+        })
+
+        await matchDom('meta', 'name="theme-color"', {
+          media: '(prefers-color-scheme: dark)',
+          content: 'cyan',
+        })
+      })
+
       it('should support apple related tags `itunes` and `appWebApp`', async () => {
         const browser = await next.browser('/apple')
         const matchMultiDom = createMultiDomMatcher(browser)