Support alt.txt for static metadata og image (#48290)

### What

Support `opengraph-image.alt.txt` and `twitter-image.alt.txt` for static
og/tw metadata image when they need to specify alt txt.

Closes NEXT-990

### Why

for og/tw images, you could have multiple images, so it's tricky to set
alt in metadata exports with alt text. For static case we want it can
work with static files, `.alt.txt` files will be the type to provide alt
text content

packages/next/src/build/webpack/loaders/metadata/types.ts

@@ -24,6 +24,7 @@ export type CollectedMetadata = {
 export type MetadataImageModule = {
   url: string
   type?: string
+  alt?: string
 } & (
   | { sizes?: string }
   | {

packages/next/src/build/webpack/loaders/next-metadata-image-loader.ts

@@ -6,10 +6,12 @@ import type {
   MetadataImageModule,
   PossibleImageFileNameConvention,
 } from './metadata/types'
+import fs from 'fs/promises'
 import path from 'path'
 import loaderUtils from 'next/dist/compiled/loader-utils3'
 import { getImageSize } from '../../../server/image-optimizer'
 import { imageExtMimeTypeMap } from '../../../lib/mime-type'
+import { fileExists } from '../../../lib/file-exists'
 
 interface Options {
   route: string
@@ -109,6 +111,16 @@ async function nextMetadataImageLoader(this: any, content: Buffer) {
               : `${imageSize.width}x${imageSize.height}`,
         }),
   }
+  if (type === 'openGraph' || type === 'twitter') {
+    const altPath = path.join(
+      path.dirname(resourcePath),
+      fileNameBase + '.alt.txt'
+    )
+
+    if (await fileExists(altPath)) {
+      imageData.alt = await fs.readFile(altPath, 'utf8')
+    }
+  }
 
   return `\
   import path from 'next/dist/shared/lib/isomorphic/path'

test/e2e/app-dir/metadata/app/opengraph/static/opengraph-image.alt.txt

@@ -0,0 +1 @@
+A alt txt for og

test/e2e/app-dir/metadata/app/opengraph/static/twitter-image.alt.txt

@@ -0,0 +1 @@
+A alt txt for twitter

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

@@ -478,21 +478,23 @@ createNextDescribe(
 
       it('should pick up opengraph-image and twitter-image as static metadata files', async () => {
         const $ = await next.render$('/opengraph/static')
-        expect($('[property="og:image"]').attr('content')).toBe(
-          'https://example.com/opengraph/static/opengraph-image.png?b76e8f0282c93c8e'
-        )
-        expect($('[property="og:image:type"]').attr('content')).toBe(
-          'image/png'
-        )
-        expect($('[property="og:image:width"]').attr('content')).toBe('114')
-        expect($('[property="og:image:height"]').attr('content')).toBe('114')
 
-        expect($('[name="twitter:image"]').attr('content')).toBe(
-          'https://example.com/opengraph/static/twitter-image.png?b76e8f0282c93c8e'
-        )
-        expect($('[name="twitter:card"]').attr('content')).toBe(
-          'summary_large_image'
-        )
+        const match = createMultiHtmlMatcher($)
+        await match('meta', 'property', 'content', {
+          'og:image:width': '114',
+          'og:image:height': '114',
+          'og:image:type': 'image/png',
+          'og:image:alt': 'A alt txt for og',
+          'og:image':
+            'https://example.com/opengraph/static/opengraph-image.png?b76e8f0282c93c8e',
+        })
+
+        await match('meta', 'name', 'content', {
+          'twitter:image':
+            'https://example.com/opengraph/static/twitter-image.png?b76e8f0282c93c8e',
+          'twitter:image:alt': 'A alt txt for twitter',
+          'twitter:card': 'summary_large_image',
+        })
 
         // favicon shouldn't be overridden
         const $icon = $('link[rel="icon"]')