Fix: canonical should allow relative urls (#46584)

alternate urls should allow string type for relative paths

## Bug

Fixes #45824

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

---------

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

@@ -51,7 +51,9 @@ export const resolveAlternates: FieldResolverWithMetadataBase<'alternates'> = (
 ) => {
   if (!alternates) return null
   const result: ResolvedAlternateURLs = {
-    canonical: resolveUrl(alternates.canonical, metadataBase),
+    canonical: metadataBase
+      ? resolveUrl(alternates.canonical, metadataBase)
+      : alternates.canonical || null,
     languages: null,
     media: null,
     types: null,

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

@@ -33,11 +33,11 @@ function resolveUrl(
 function resolveUrlValuesOfObject(
   obj: Record<string, string | URL | null> | null | undefined,
   metadataBase: ResolvedMetadata['metadataBase']
-): null | Record<string, URL | null> {
+): null | Record<string, string | URL | null> {
   if (!obj) return null
-  const result: Record<string, URL | null> = {}
+  const result: Record<string, URL | string | null> = {}
   for (const [key, value] of Object.entries(obj)) {
-    result[key as keyof typeof obj] = resolveUrl(value, metadataBase)
+    result[key] = metadataBase ? resolveUrl(value, metadataBase) : value
   }
   return result
 }

packages/next/src/lib/metadata/types/alternative-urls-types.ts

@@ -434,12 +434,12 @@ export type AlternateURLs = {
 }
 
 export type ResolvedAlternateURLs = {
-  canonical: null | URL
-  languages: null | Languages<null | URL>
+  canonical: null | string | URL
+  languages: null | Languages<null | string | URL>
   media: null | {
-    [media: string]: null | URL
+    [media: string]: null | string | URL
   }
   types: null | {
-    [types: string]: null | URL
+    [types: string]: null | string | URL
   }
 }

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

@@ -10,7 +10,7 @@ export const metadata = {
       'de-DE': 'https://example.com/de-DE',
     },
     media: {
-      'only screen and (max-width: 600px)': 'https://example.com/mobile',
+      'only screen and (max-width: 600px)': '/mobile',
     },
     types: {
       'application/rss+xml': 'https://example.com/rss',

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

@@ -204,7 +204,7 @@ createNextDescribe(
 
       it('should support alternate tags', async () => {
         const browser = await next.browser('/alternate')
-        await checkLink(browser, 'canonical', 'https://example.com/')
+        await checkLink(browser, 'canonical', 'https://example.com')
         await checkMeta(
           browser,
           'en-US',
@@ -224,7 +224,7 @@ createNextDescribe(
         await checkMeta(
           browser,
           'only screen and (max-width: 600px)',
-          'https://example.com/mobile',
+          '/mobile',
           'media',
           'link',
           'href'