Polish metadata warnings (#47853)

- Add links to the error warning
- Log with warning prefix for every url that missing `metadataBase`, so users can easily locate where it's from

Closes NEXT-931

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

@@ -1,5 +1,5 @@
 import path from '../../../shared/lib/isomorphic/path'
-import { warnOnce } from '../../../shared/lib/utils/warn-once'
+import * as Log from '../../../build/output/log'
 
 function isStringOrURL(icon: any): icon is string | URL {
   return typeof icon === 'string' || icon instanceof URL
@@ -28,18 +28,18 @@ function resolveUrl(
     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.`
+      Log.warn(
+        `metadata.metadataBase is not set for resolving url "${url}", fallbacks to "${metadataBase.origin}". See https://beta.nextjs.org/docs/api-reference/metadata#metadatabase`
       )
     } else {
       throw new Error(
-        `metadata.metadataBase needs to be provided for resolving absolute URL: ${url}`
+        `metadata.metadataBase needs to be set for resolving url "${url}". See https://beta.nextjs.org/docs/api-reference/metadata#metadatabase\n`
       )
     }
   }
 
   // Handle relative or absolute paths
-  const basePath = metadataBase.pathname || '/'
+  const basePath = metadataBase.pathname || ''
   const joinedPath = path.join(basePath, url)
 
   return new URL(joinedPath, metadataBase)

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

@@ -25,17 +25,21 @@ describe('app dir - metadata missing metadataBase', () => {
       await next.start()
       await fetchViaHTTP(next.url, '/blog')
       expect(next.cliOutput).toInclude(
-        'metadata.metadataBase is not set and fallbacks to "http://localhost:'
+        'metadata.metadataBase is not set for resolving url "/blog/opengraph-image?'
       )
+      expect(next.cliOutput).toInclude(', fallbacks to "http://localhost:')
       expect(next.cliOutput).toInclude(
-        'please specify it in root layout to resolve absolute urls.'
+        '. See https://beta.nextjs.org/docs/api-reference/metadata#metadatabase'
       )
     })
   } 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: /blog/opengraph-image?'
+        'metadata.metadataBase needs to be set for resolving url "/blog/opengraph-image?'
+      )
+      expect(next.cliOutput).toInclude(
+        '. See https://beta.nextjs.org/docs/api-reference/metadata#metadatabase'
       )
     })
   }