diff --git a/packages/next/src/build/webpack/loaders/metadata/resolve-route-data.test.ts b/packages/next/src/build/webpack/loaders/metadata/resolve-route-data.test.ts
index dd163ecd3c846..bc25d6f673daf 100644
--- a/packages/next/src/build/webpack/loaders/metadata/resolve-route-data.test.ts
+++ b/packages/next/src/build/webpack/loaders/metadata/resolve-route-data.test.ts
@@ -110,6 +110,10 @@ describe('resolveRouteData', () => {
                 es: 'https://example.com/es',
                 de: 'https://example.com/de',
               },
+              media: {
+                '(max-width: 600px)': 'https://example.com/mobile',
+                '(min-width: 601px)': 'https://example.com/desktop',
+              },
             },
           },
         ])
@@ -120,6 +124,8 @@ describe('resolveRouteData', () => {
         <loc>https://example.com</loc>
         <xhtml:link rel="alternate" hreflang="es" href="https://example.com/es" />
         <xhtml:link rel="alternate" hreflang="de" href="https://example.com/de" />
+        <xhtml:link rel="alternate" media="(max-width: 600px)" href="https://example.com/mobile" />
+        <xhtml:link rel="alternate" media="(min-width: 601px)" href="https://example.com/desktop" />
         <lastmod>2021-01-01</lastmod>
         </url>
         </urlset>
diff --git a/packages/next/src/build/webpack/loaders/metadata/resolve-route-data.ts b/packages/next/src/build/webpack/loaders/metadata/resolve-route-data.ts
index ca8a28720f82c..b0ee2be1070bb 100644
--- a/packages/next/src/build/webpack/loaders/metadata/resolve-route-data.ts
+++ b/packages/next/src/build/webpack/loaders/metadata/resolve-route-data.ts
@@ -73,11 +73,22 @@ export function resolveSitemap(data: MetadataRoute.Sitemap): string {
       // Since sitemap is separated from the page rendering, there's not metadataBase accessible yet.
       // we give the default setting that won't effect the languages resolving.
       for (const language in languages) {
+        const url = languages[language as keyof typeof languages]
+        if (!url) continue
         content += `<xhtml:link rel="alternate" hreflang="${language}" href="${
-          languages[language as keyof typeof languages]
+          url
         }" />\n`
       }
     }
+
+    const medias = item.alternates?.media
+    if (medias && Object.keys(medias).length) {
+      for (const media in medias) {
+        const url = medias[media as keyof typeof medias]
+        if (!url) continue
+        content += `<xhtml:link rel="alternate" media="${media}" href="${url}" />\n`
+      }
+    }
     if (item.images?.length) {
       for (const image of item.images) {
         content += `<image:image>\n<image:loc>${image}</image:loc>\n</image:image>\n`
diff --git a/packages/next/src/lib/metadata/types/metadata-interface.ts b/packages/next/src/lib/metadata/types/metadata-interface.ts
index 0342119681848..992319cbb061b 100644
--- a/packages/next/src/lib/metadata/types/metadata-interface.ts
+++ b/packages/next/src/lib/metadata/types/metadata-interface.ts
@@ -712,6 +712,9 @@ type SitemapFile = Array<{
   alternates?:
     | {
         languages?: Languages<string> | undefined
+        media?: {
+          [media: string]: string | undefined
+        }
       }
     | undefined
   images?: string[] | undefined