Support og image with edge

packages/next/src/server/next-server.ts

@@ -24,6 +24,7 @@ import {
   Params,
 } from '../shared/lib/router/utils/route-matcher'
 import type { MiddlewareRouteMatch } from '../shared/lib/router/utils/middleware-route-matcher'
+import type { RouteMatch } from './future/route-matches/route-match'
 
 import fs from 'fs'
 import { join, relative, resolve, sep } from 'path'
@@ -1520,6 +1521,7 @@ export default class NextNodeServer extends BaseServer {
                 query,
                 params: match.params,
                 page: match.definition.page,
+                match,
                 appPaths: null,
               })
 
@@ -2563,13 +2565,15 @@ export default class NextNodeServer extends BaseServer {
     params: Params | undefined
     page: string
     appPaths: string[] | null
+    match?: RouteMatch
     onWarning?: (warning: Error) => void
   }): Promise<FetchEventResult | null> {
     let edgeInfo: ReturnType<typeof this.getEdgeFunctionInfo> | undefined
 
-    const { query, page } = params
+    const { query, page, match } = params
 
-    await this.ensureEdgeFunction({ page, appPaths: params.appPaths })
+    if (!match)
+      await this.ensureEdgeFunction({ page, appPaths: params.appPaths })
     edgeInfo = this.getEdgeFunctionInfo({
       page,
       middleware: false,

test/e2e/app-dir/metadata-dynamic-routes/app/(group)/twitter-image.tsx

@@ -0,0 +1,27 @@
+import { ImageResponse } from 'next/server'
+
+export const alt = 'Twitter'
+export const size = { width: 1200, height: 675 }
+
+export default function twitter() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: 128,
+          background: 'lavender',
+        }}
+      >
+        group route twitter
+      </div>
+    ),
+    size
+  )
+}
+
+export const runtime = 'edge'

test/e2e/app-dir/metadata-dynamic-routes/index.test.ts

@@ -15,7 +15,7 @@ createNextDescribe(
     files: __dirname,
     skipDeployment: true,
   },
-  ({ next, isNextDev, isNextDeploy }) => {
+  ({ next, isNextDev, isNextStart, isNextDeploy }) => {
     describe('text routes', () => {
       it('should handle robots.[ext] dynamic routes', async () => {
         const res = await next.fetch('/robots.txt')
@@ -162,13 +162,21 @@ createNextDescribe(
     it('should generate unique path for image routes under group routes', async () => {
       const $ = await next.render$('/blog')
       const ogImageUrl = $('meta[property="og:image"]').attr('content')
+      const twitterImageUrl = $('meta[name="twitter:image"]').attr('content')
       const ogImageUrlInstance = new URL(ogImageUrl)
-      const res = await next.fetch(ogImageUrlInstance.pathname)
+      const twitterImageUrlInstance = new URL(twitterImageUrl)
+
+      const resOg = await next.fetch(ogImageUrlInstance.pathname)
+      const resTwitter = await next.fetch(twitterImageUrlInstance.pathname)
 
       // generate unique path with suffix for image routes under group routes
       expect(ogImageUrl).toMatch(/opengraph-image-\w{6}\?/)
       expect(ogImageUrl).toMatch(hashRegex)
-      expect(res.status).toBe(200)
+      expect(twitterImageUrl).toMatch(/twitter-image-\w{6}\?/)
+      expect(twitterImageUrl).toMatch(hashRegex)
+
+      expect(resOg.status).toBe(200)
+      expect(resTwitter.status).toBe(200)
     })
 
     it('should inject dynamic metadata properly to head', async () => {
@@ -224,5 +232,18 @@ createNextDescribe(
         'Twitter'
       )
     })
+
+    if (isNextStart) {
+      it('should support edge runtime of image routes', async () => {
+        const middlewareManifest = JSON.parse(
+          await next.readFile('.next/server/middleware-manifest.json')
+        )
+        const functionRoutes = Object.keys(middlewareManifest.functions)
+        const edgeRoute = functionRoutes.find((route) =>
+          route.startsWith('/(group)/twitter-image-')
+        )
+        expect(edgeRoute).toMatch(/\/\(group\)\/twitter-image-\w{6}\/route/)
+      })
+    }
   }
 )