refactor metadata loaders

Author: huozhi

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

@@ -83,41 +83,40 @@ async function nextMetadataImageLoader(
         .join(',')}
     }
 
-    export default async function (props) {
-      const { __metadata_id__: _, ...params } = await props.params
+     async function getImageMetadata(imageMetadata, idParam, resolvedParams) {
       const imageUrl = fillMetadataSegment(${JSON.stringify(
         pathnamePrefix
-      )}, params, ${JSON.stringify(pageSegment)})
-
-      const { generateImageMetadata } = imageModule
-
-      function getImageMetadata(imageMetadata, idParam) {
-        const data = {
-          alt: imageMetadata.alt,
-          type: imageMetadata.contentType || 'image/png',
-          url: imageUrl + (idParam ? ('/' + idParam) : '') + ${JSON.stringify(
-            hashQuery
-          )},
-        }
-        const { size } = imageMetadata
-        if (size) {
-          ${
-            type === 'twitter' || type === 'openGraph'
-              ? 'data.width = size.width; data.height = size.height;'
-              : 'data.sizes = size.width + "x" + size.height;'
-          }
+      )}, resolvedParams, ${JSON.stringify(pageSegment)})
+      const data = {
+        alt: imageMetadata.alt,
+        type: imageMetadata.contentType || 'image/png',
+        url: imageUrl + (idParam ? ('/' + idParam) : '') + ${JSON.stringify(
+          hashQuery
+        )},
+      }
+      const { size } = imageMetadata
+      if (size) {
+        ${
+          type === 'twitter' || type === 'openGraph'
+            ? 'data.width = size.width; data.height = size.height;'
+            : 'data.sizes = size.width + "x" + size.height;'
         }
-        return data
       }
+      return data
+    }
+
+    export default async function (props) {
+      const { generateImageMetadata } = imageModule
+      const resolvedParams = await props.params
 
       if (generateImageMetadata) {
-        const imageMetadataArray = await generateImageMetadata({ params })
-        return imageMetadataArray.map((imageMetadata, index) => {
-          const idParam = (imageMetadata.id || index) + ''
-          return getImageMetadata(imageMetadata, idParam)
-        })
+        const imageMetadataArray = await generateImageMetadata({ params: resolvedParams })
+        return Promise.all(imageMetadataArray.map(async (imageMetadata, index) => {
+          const idParam = imageMetadata.id || index.toString()
+          return await getImageMetadata(imageMetadata, idParam, resolvedParams)
+        }))
       } else {
-        return [getImageMetadata(imageModule, '')]
+        return [await getImageMetadata(imageModule, '', resolvedParams)]
       }
     }`
   }

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

@@ -153,13 +153,12 @@ export async function GET() {
 `
 }
 
-// <metadata-image>/[id]/route.js
 async function getDynamicImageRouteCode(
   resourcePath: string,
   loaderContext: webpack.LoaderContext<any>
 ) {
   return `\
-/* dynamic image route */
+/* dynamic image route with generateImageMetadata */
 import { NextResponse } from 'next/server'
 import * as userland from ${JSON.stringify(resourcePath)}
 
@@ -175,31 +174,63 @@ export async function GET(_, ctx) {
   const params = await ctx.params
   const { __metadata_id__, ...rest } = params || {}
   const restParams = params ? rest : undefined
-  const targetId = __metadata_id__
-  let id = undefined
-  
-  if (generateImageMetadata) {
-    const imageMetadata = await generateImageMetadata({ params: restParams })
-    id = imageMetadata.find((item) => {
-      if (process.env.NODE_ENV !== 'production') {
-        if (item?.id == null) {
-          throw new Error('id property is required for every item returned from generateImageMetadata')
-        }
+  const imageMetadata = await generateImageMetadata({ params: restParams })
+  const id = imageMetadata.find((item) => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (item?.id == null) {
+        throw new Error('id property is required for every item returned from generateImageMetadata')
       }
-      return item.id.toString() === targetId
-    })?.id
-    if (id == null) {
-      return new NextResponse('Not Found', {
-        status: 404,
-      })
     }
+    return item.id.toString() === __metadata_id__
+  })?.id
+  if (id == null) {
+    return new NextResponse('Not Found', {
+      status: 404,
+    })
   }
 
-  return handler({ params: restParams, id })
+  return handler({ params: ctx.params })
 }
 `
 }
 
+async function getSingleImageRouteCode(
+  resourcePath: string,
+  loaderContext: webpack.LoaderContext<any>
+) {
+  return `\
+/* dynamic image route without generateImageMetadata */
+import { NextResponse } from 'next/server'
+import { default as handler } from ${JSON.stringify(resourcePath)}
+
+${errorOnBadHandler(resourcePath)}
+${await createReExportsCode(resourcePath, loaderContext)}
+
+export async function GET(_, ctx) {
+  return handler({ params: await ctx.params })
+}
+`
+}
+
+// <metadata-image>/[id]/route.js
+async function getImageRouteCode(
+  resourcePath: string,
+  loaderContext: webpack.LoaderContext<any>
+) {
+  const exportNames = await getLoaderModuleNamedExports(
+    resourcePath,
+    loaderContext
+  )
+
+  const hasGenerateImageMetadata = exportNames.includes('generateImageMetadata')
+
+  if (hasGenerateImageMetadata) {
+    return getDynamicImageRouteCode(resourcePath, loaderContext)
+  } else {
+    return getSingleImageRouteCode(resourcePath, loaderContext)
+  }
+}
+
 async function getDynamicSitemapRouteCode(
   resourcePath: string,
   loaderContext: webpack.LoaderContext<any>
@@ -242,16 +273,16 @@ ${errorOnBadHandler(resourcePath)}
 ${await createReExportsCode(resourcePath, loaderContext)}
 
 export async function GET(_, ctx) {
-  const { __metadata_id__: id, ...params } = await ctx.params || {}
-  const hasXmlExtension = id ? id.endsWith('.xml') : false
-
-  if (id && !hasXmlExtension) {
-    return new NextResponse('Not Found', {
-      status: 404,
-    })
-  }
-
+  let targetId
   if (process.env.NODE_ENV !== 'production' && sitemapModule.generateSitemaps) {
+   const { __metadata_id__: id, ...params } = await ctx.params || {}
+    const hasXmlExtension = id ? id.endsWith('.xml') : false
+    if (id && !hasXmlExtension) {
+      return new NextResponse('Not Found', {
+        status: 404,
+      })
+    }
+    targetId = id && hasXmlExtension ? id.slice(0, -4) : undefined
     const sitemaps = await sitemapModule.generateSitemaps()
     for (const item of sitemaps) {
       if (item?.id == null) {
@@ -260,8 +291,6 @@ export async function GET(_, ctx) {
     }
   }
 
-  const targetId = id && hasXmlExtension ? id.slice(0, -4) : undefined
-
   const data = await handler({ id: targetId })
   const content = resolveRouteData(data, fileType)
 
@@ -293,7 +322,7 @@ const nextMetadataRouterLoader: webpack.LoaderDefinitionFunction<MetadataRouteLo
       } else if (fileBaseName === 'sitemap') {
         code = await getDynamicSitemapRouteCode(filePath, this)
       } else {
-        code = await getDynamicImageRouteCode(filePath, this)
+        code = await getImageRouteCode(filePath, this)
       }
     } else {
       code = await getStaticAssetRouteCode(filePath, fileBaseName)