Provide default metadataBase for local and vercel deployment

packages/next/src/lib/metadata/default-metadata.tsx

@@ -1,12 +1,17 @@
 import React from 'react'
 import type { ResolvedMetadata } from './types/metadata-interface'
 
-export const createDefaultMetadata = (): ResolvedMetadata => {
+export function createDefaultMetadata(): ResolvedMetadata {
+  const defaultMetadataBase =
+    process.env.NODE_ENV === 'production' && process.env.VERCEL_URL
+      ? new URL(`https://${process.env.VERCEL_URL}`)
+      : null
+
   return {
     viewport: 'width=device-width, initial-scale=1',
+    metadataBase: defaultMetadataBase,
 
     // Other values are all null
-    metadataBase: null,
     title: null,
     description: null,
     applicationName: null,

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

@@ -82,7 +82,11 @@ function merge(
     openGraph: string | null
   }
 ) {
-  const metadataBase = source?.metadataBase || target.metadataBase
+  // If there's override metadata, prefer it otherwise fallback to the default metadata.
+  const metadataBase =
+    typeof source?.metadataBase !== 'undefined'
+      ? source.metadataBase
+      : source?.metadataBase || target.metadataBase
   for (const key_ in source) {
     const key = key_ as keyof Metadata
 

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

@@ -43,11 +43,11 @@ function resolveImages(
   resolvedImages?.forEach((item, index, array) => {
     if (isStringOrURL(item)) {
       array[index] = {
-        url: metadataBase ? resolveUrl(item, metadataBase)! : item,
+        url: resolveUrl(item, metadataBase)!,
       }
     } else {
       // Update image descriptor url
-      item.url = metadataBase ? resolveUrl(item.url, metadataBase)! : item.url
+      item.url = resolveUrl(item.url, metadataBase)!
     }
   })
   return resolvedImages

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

@@ -1,4 +1,5 @@
 import path from '../../../shared/lib/isomorphic/path'
+import { warnOnce } from '../../../shared/lib/utils/warn-once'
 
 function isStringOrURL(icon: any): icon is string | URL {
   return typeof icon === 'string' || icon instanceof URL
@@ -17,10 +18,19 @@ function resolveUrl(
     return parsedUrl
   } catch (_) {}
 
-  if (!metadataBase)
-    throw new Error(
-      `metadata.metadataBase needs to be provided for resolving absolute URLs: ${url}`
-    )
+  if (!metadataBase) {
+    if (process.env.NODE_ENV !== 'production') {
+      metadataBase = new URL(`http://localhost:${process.env.PORT || 3000}`)
+      // Development mode warning
+      warnOnce(
+        `metadata.metadataBase is not set and fallbacks to "${metadataBase.origin}", please specify it in root layout to resolve absolute urls.`
+      )
+    } else {
+      throw new Error(
+        `metadata.metadataBase needs to be provided for resolving absolute URL: ${url}`
+      )
+    }
+  }
 
   // Handle relative or absolute paths
   const basePath = metadataBase.pathname || '/'

test/e2e/app-dir/metadata-dynamic-routes/app/layout.tsx

@@ -8,6 +8,9 @@ export default function Layout({ children }) {
 }
 
 export const metadata = {
+  metadataBase: process.env.VERCEL_URL
+    ? new URL(`https://${process.env.VERCEL_URL}`)
+    : new URL(`http://localhost:${process.env.PORT || 3000}`),
   title: 'Next.js App',
   description: 'This is a Next.js App',
   twitter: {

test/e2e/app-dir/metadata-dynamic-routes/app/page.tsx

@@ -5,6 +5,5 @@ export default function Page() {
 }
 
 export const metadata = {
-  metadataBase: new URL('https://deploy-preview-abc.vercel.app'),
   title: 'index page',
 }

test/e2e/app-dir/metadata-dynamic-routes/index.test.ts

@@ -13,12 +13,11 @@ createNextDescribe(
   'app dir - metadata dynamic routes',
   {
     files: __dirname,
-    skipDeployment: true,
     dependencies: {
       '@vercel/og': '0.4.1',
     },
   },
-  ({ next, isNextDev }) => {
+  ({ next, isNextDev, isNextDeploy }) => {
     describe('text routes', () => {
       it('should handle robots.[ext] dynamic routes', async () => {
         const res = await next.fetch('/robots.txt')
@@ -172,14 +171,18 @@ createNextDescribe(
       expect(twitterTitle).toBe('Twitter - Next.js App')
       expect(twitterDescription).toBe('Twitter - This is a Next.js App')
 
-      // absolute urls
-      expect(ogImageUrl).toContain(
-        `https://deploy-preview-abc.vercel.app/opengraph-image`
-      )
+      if (isNextDeploy) {
+        // absolute urls
+        expect(ogImageUrl).toMatch(/https:\/\/\w+.vercel.app\/opengraph-image/)
+        expect(twitterImageUrl).toMatch(
+          /https:\/\/\w+.vercel.app\/twitter-image/
+        )
+      } else {
+        // absolute urls
+        expect(ogImageUrl).toMatch(/http:\/\/localhost:\d+\/opengraph-image/)
+        expect(twitterImageUrl).toMatch(/http:\/\/localhost:\d+\/twitter-image/)
+      }
       expect(ogImageUrl).toMatch(hashRegex)
-      expect(twitterImageUrl).toContain(
-        `https://deploy-preview-abc.vercel.app/twitter-image`
-      )
       expect(twitterImageUrl).toMatch(hashRegex)
 
       // alt text

test/e2e/app-dir/metadata-missing-metadata-base/app/layout.js

@@ -0,0 +1,12 @@
+export default function Layout({ children }) {
+  return (
+    <html>
+      <head></head>
+      <body>{children}</body>
+    </html>
+  )
+}
+
+export const metadata = {
+  title: 'Next.js App',
+}

test/e2e/app-dir/metadata-missing-metadata-base/app/opengraph-image.js

@@ -0,0 +1,23 @@
+import { ImageResponse } from '@vercel/og'
+
+export const alt = 'Open Graph'
+
+export default function og() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: 128,
+          background: 'lavender',
+        }}
+      >
+        Open Graph
+      </div>
+    )
+  )
+}

test/e2e/app-dir/metadata-missing-metadata-base/app/page.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Page() {
+  return <>hello index</>
+}
+
+export const metadata = {
+  title: 'index page',
+}

test/e2e/app-dir/metadata-missing-metadata-base/index.test.ts

@@ -0,0 +1,67 @@
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { fetchViaHTTP } from 'next-test-utils'
+
+describe('app dir - metadata missing metadataBase', () => {
+  let next: NextInstance
+  // const logs = []
+
+  beforeAll(async () => {
+    next = await createNext({
+      skipStart: true,
+      dependencies: {
+        '@vercel/og': 'latest',
+      },
+      files: new FileRef(__dirname),
+    })
+    // next.on('stderr', (log) => {
+    //   logs.push(log)
+    // })
+  })
+  afterAll(() => next.destroy())
+
+  if (globalThis.isNextDev) {
+    it('should warning in development', async () => {
+      await next.start()
+      await fetchViaHTTP(next.url, '/')
+      expect(next.cliOutput).toInclude(
+        'metadata.metadataBase is not set and fallbacks to "http://localhost:'
+      )
+      expect(next.cliOutput).toInclude(
+        'please specify it in root layout to resolve absolute urls.'
+      )
+    })
+  } else {
+    it('should error in production', async () => {
+      await expect(next.start()).rejects.toThrow('next build failed')
+      expect(next.cliOutput).toInclude(
+        'metadata.metadataBase needs to be provided for resolving absolute URL: /opengraph-image?'
+      )
+    })
+  }
+})
+
+// createNextDescribe(
+//   'app dir - metadata missing metadataBase',
+//   {
+//     files: __dirname,
+//     dependencies: {
+//       '@vercel/og': '0.4.1',
+//     },
+//   },
+//   ({ next, isNextDev, isNextStart }) => {
+
+//     if (isNextDev) {
+//       console.log('logs', logs)
+//       expect(
+//         logs.some((log) =>
+//           /metadata\.metadataBase is not set and fallbacks to "http:\/\/localhost:\d+", please specify it in root layout to resolve absolute urls/.test(
+//             log
+//           )
+//         )
+//       ).toBe(true)
+//     } else if (isNextStart) {
+
+//     }
+//   }
+// )

test/e2e/app-dir/metadata-missing-metadata-base/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  experimental: { appDir: true },
+}

test/e2e/app-dir/metadata/app/alternate/page.tsx

@@ -3,6 +3,7 @@ export default function Page() {
 }
 
 export const metadata = {
+  metadataBase: null,
   alternates: {
     canonical: 'https://example.com',
     languages: {
@@ -14,8 +15,8 @@ export const metadata = {
     },
     types: {
       'application/rss+xml': [
-        { url: 'blog.rss', title: 'rss' },
-        { url: 'blog/js.rss', title: 'js title' },
+        { url: '/blog.rss', title: 'rss' },
+        { url: '/blog/js.rss', title: 'js title' },
       ],
     },
   },

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

@@ -16,18 +16,22 @@ createNextDescribe(
     async function checkMeta(
       browser: BrowserInterface,
       queryValue: string,
-      expected: string | string[] | undefined | null,
+      expected: RegExp | string | string[] | undefined | null,
       queryKey: string = 'property',
       tag: string = 'meta',
       domAttributeField: string = 'content'
     ) {
       const values = await browser.eval(
         `[...document.querySelectorAll('${tag}[${queryKey}="${queryValue}"]')].map((el) => el.getAttribute("${domAttributeField}"))`
       )
-      if (Array.isArray(expected)) {
-        expect(values).toEqual(expected)
+      if (expected instanceof RegExp) {
+        expect(values[0]).toMatch(expected)
       } else {
-        expect(values[0]).toBe(expected)
+        if (Array.isArray(expected)) {
+          expect(values).toEqual(expected)
+        } else {
+          expect(values[0]).toBe(expected)
+        }
       }
     }
 
@@ -286,11 +290,11 @@ createNextDescribe(
 
         await matchDom('link', 'title="js title"', {
           type: 'application/rss+xml',
-          href: 'blog/js.rss',
+          href: '/blog/js.rss',
         })
         await matchDom('link', 'title="rss"', {
           type: 'application/rss+xml',
-          href: 'blog.rss',
+          href: '/blog.rss',
         })
       })