Add warning for missing metadataBase in social images (#49180)

We picked `VERCEL_URL` env for `metadataBase` in preview mode, but also picking that on production, this could potentially use the unique build url for social images if you didn't set `metadataBase` We recommend to set the major/preferred domain to `metadataBase` if you're using social images, this PR help warn you in every env if you're missing that [slack thread](https://vercel.slack.com/archives/C03KAR5DCKC/p1683150633962539?thread_ts=1683144147.664059&cid=C03KAR5DCKC)
vercel · May 4, 2023 · 7fd97b8 · 7fd97b8
1 parent 11f2fd4
commit 7fd97b8
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 10 deletions.
diff --git a/packages/next/src/lib/metadata/resolvers/resolve-opengraph.ts b/packages/next/src/lib/metadata/resolvers/resolve-opengraph.ts
@@ -8,7 +8,7 @@ import type { FieldResolverWithMetadataBase } from '../types/resolvers'
 import type { ResolvedTwitterMetadata, Twitter } from '../types/twitter-types'
 import { resolveAsArrayOrUndefined } from '../generate/utils'
 import {
-  getFallbackMetadataBaseIfPresent,
+  getSocialImageFallbackMetadataBase,
   isStringOrURL,
   resolveUrl,
 } from './resolve-url'
@@ -101,7 +101,7 @@ export const resolveOpenGraph: FieldResolverWithMetadataBase<'openGraph'> = (
       }
     }
 
-    const imageMetadataBase = getFallbackMetadataBaseIfPresent(metadataBase)
+    const imageMetadataBase = getSocialImageFallbackMetadataBase(metadataBase)
     resolved.images = resolveImages(og.images, imageMetadataBase)
   }
 
@@ -132,7 +132,7 @@ export const resolveTwitter: FieldResolverWithMetadataBase<'twitter'> = (
   for (const infoKey of TwitterBasicInfoKeys) {
     resolved[infoKey] = twitter[infoKey] || null
   }
-  const imageMetadataBase = getFallbackMetadataBaseIfPresent(metadataBase)
+  const imageMetadataBase = getSocialImageFallbackMetadataBase(metadataBase)
   resolved.images = resolveImages(twitter.images, imageMetadataBase)
 
   if ('card' in resolved) {

diff --git a/packages/next/src/lib/metadata/resolvers/resolve-url.ts b/packages/next/src/lib/metadata/resolvers/resolve-url.ts
@@ -1,4 +1,5 @@
 import path from '../../../shared/lib/isomorphic/path'
+import * as Log from '../../../build/output/log'
 
 function isStringOrURL(icon: any): icon is string | URL {
   return typeof icon === 'string' || icon instanceof URL
@@ -10,20 +11,35 @@ function createLocalMetadataBase() {
 
 // For deployment url for metadata routes, prefer to use the deployment url if possible
 // as these routes are unique to the deployments url.
-export function getFallbackMetadataBaseIfPresent(
+export function getSocialImageFallbackMetadataBase(
   metadataBase: URL | null
 ): URL | null {
+  const isMetadataBaseMissing = !metadataBase
   const defaultMetadataBase = createLocalMetadataBase()
   const deploymentUrl =
     process.env.VERCEL_URL && new URL(`https://${process.env.VERCEL_URL}`)
+
+  let fallbackMetadata
   if (process.env.NODE_ENV === 'development') {
-    return defaultMetadataBase
+    fallbackMetadata = defaultMetadataBase
+  } else {
+    fallbackMetadata =
+      process.env.NODE_ENV === 'production' &&
+      deploymentUrl &&
+      process.env.VERCEL_ENV === 'preview'
+        ? deploymentUrl
+        : metadataBase || deploymentUrl || defaultMetadataBase
+  }
+
+  if (isMetadataBaseMissing) {
+    // Add new line to warning for worker output
+    console.log()
+    Log.warnOnce(
+      `metadata.metadataBase is not set for resolving social open graph or twitter images, fallbacks to "${fallbackMetadata.origin}". See https://beta.nextjs.org/docs/api-reference/metadata#metadatabase`
+    )
   }
-  return process.env.NODE_ENV === 'production' &&
-    deploymentUrl &&
-    process.env.VERCEL_ENV === 'preview'
-    ? deploymentUrl
-    : metadataBase || deploymentUrl || defaultMetadataBase
+
+  return fallbackMetadata
 }
 
 function resolveUrl(url: null | undefined, metadataBase: URL | null): null

diff --git a/test/e2e/app-dir/metadata-missing-metadata-base/app/layout.js b/test/e2e/app-dir/metadata-missing-metadata-base/app/layout.js
@@ -0,0 +1,8 @@
+export default function Layout({ children }) {
+  return (
+    <html>
+      <head></head>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/metadata-missing-metadata-base/app/opengraph-image.png b/test/e2e/app-dir/metadata-missing-metadata-base/app/opengraph-image.png
diff --git a/test/e2e/app-dir/metadata-missing-metadata-base/app/page.js b/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',
+}
diff --git a/test/e2e/app-dir/metadata-missing-metadata-base/index.test.ts b/test/e2e/app-dir/metadata-missing-metadata-base/index.test.ts
@@ -0,0 +1,31 @@
+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
+
+  if ((global as any).isNextDeploy) {
+    return it('should skip for deploy', () => {})
+  }
+
+  beforeAll(async () => {
+    next = await createNext({
+      skipStart: true,
+      files: new FileRef(__dirname),
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should fallback to localhost if metadataBase is missing for absolute urls resolving', async () => {
+    await next.start()
+    await fetchViaHTTP(next.url, '/')
+    expect(next.cliOutput).toInclude(
+      'metadata.metadataBase is not set for resolving social open graph or twitter images, fallbacks to'
+    )
+    expect(next.cliOutput).toInclude('"http://localhost:')
+    expect(next.cliOutput).toInclude(
+      '. See https://beta.nextjs.org/docs/api-reference/metadata#metadatabase'
+    )
+  })
+})
diff --git a/test/e2e/app-dir/metadata-missing-metadata-base/next.config.js b/test/e2e/app-dir/metadata-missing-metadata-base/next.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  experimental: { appDir: true },
+}