Replace metadata clone with custom handler in dev (#49343)

packages/next/src/lib/metadata/clone-metadata.ts

@@ -0,0 +1,23 @@
+import type { ResolvedMetadata } from './types/metadata-interface'
+
+const TYPE_URL = '__METADATA_URL'
+
+function replacer(_key: string, val: any) {
+  // clone URL as string but recover it as URL
+  if (val instanceof URL) {
+    return { _type: TYPE_URL, value: val.href }
+  }
+  return val
+}
+
+function reviver(_key: string, val: any) {
+  if (typeof val === 'object' && val !== null && val._type === TYPE_URL) {
+    return new URL(val.value)
+  }
+  return val
+}
+
+export function cloneMetadata(metadata: ResolvedMetadata): ResolvedMetadata {
+  const jsonString = JSON.stringify(metadata, replacer)
+  return JSON.parse(jsonString, reviver)
+}

packages/next/src/lib/metadata/resolve-metadata.ts

@@ -408,9 +408,7 @@ export async function accumulateMetadata(
       const currentResolvedMetadata: ResolvedMetadata =
         process.env.NODE_ENV === 'development'
           ? Object.freeze(
-              require('next/dist/compiled/@edge-runtime/primitives/structured-clone').structuredClone(
-                resolvedMetadata
-              )
+              require('./clone-metadata').cloneMetadata(resolvedMetadata)
             )
           : resolvedMetadata
 

test/e2e/app-dir/metadata/app/opengraph/article/layout.tsx

@@ -0,0 +1,14 @@
+export default function Layout({ children }) {
+  return children
+}
+
+export const metadata = {
+  openGraph: {
+    title: 'Layout open graph title',
+    description: 'My custom description',
+    type: 'article',
+    publishedTime: '2023-01-01T00:00:00.000Z',
+    authors: ['author1', 'author2', 'author3'],
+    images: new URL('https://example.com/og-image.jpg'),
+  },
+}

test/e2e/app-dir/metadata/app/opengraph/article/page.tsx

@@ -2,12 +2,14 @@ export default function Page() {
   return 'opengraph-article'
 }
 
-export const metadata = {
-  openGraph: {
-    title: 'My custom title',
-    description: 'My custom description',
-    type: 'article',
-    publishedTime: '2023-01-01T00:00:00.000Z',
-    authors: ['author1', 'author2', 'author3'],
-  },
+export async function generateMetadata(_props, parentResolvingMetadata) {
+  const parentMetadata = await parentResolvingMetadata
+  return {
+    openGraph: {
+      ...parentMetadata.openGraph,
+      title: `My custom title | ${parentMetadata.openGraph.title.absolute}`,
+      // merging parent images URL instance should work
+      images: [...parentMetadata.openGraph.images],
+    },
+  }
 }

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

@@ -469,9 +469,10 @@ createNextDescribe(
         const browser = await next.browser('/opengraph/article')
         const matchMultiDom = createMultiDomMatcher(browser)
         await matchMultiDom('meta', 'property', 'content', {
-          'og:title': 'My custom title',
+          'og:title': 'My custom title | Layout open graph title',
           'og:description': 'My custom description',
           'og:type': 'article',
+          'og:image': 'https://example.com/og-image.jpg',
           'article:published_time': '2023-01-01T00:00:00.000Z',
           'article:author': ['author1', 'author2', 'author3'],
         })