Add test case for image generation

package.json

@@ -90,6 +90,7 @@
     "@typescript-eslint/eslint-plugin": "4.29.1",
     "@typescript-eslint/parser": "4.29.1",
     "@vercel/fetch": "6.1.1",
+    "@vercel/og": "0.0.20",
     "@webassemblyjs/ast": "1.11.1",
     "@webassemblyjs/floating-point-hex-parser": "1.11.1",
     "@webassemblyjs/helper-api-error": "1.11.1",

packages/next/build/webpack/plugins/middleware-plugin.ts

@@ -686,6 +686,24 @@ function getExtractMetadata(params: {
       for (const module of modules) {
         const buildInfo = getModuleBuildInfo(module)
 
+        /**
+         * Check if it uses the image generation feature.
+         */
+        if (!dev) {
+          const resource = module.resource
+          if (
+            resource &&
+            /[\\/]node_modules[\\/]@vercel[\\/]og[\\/]dist[\\/]index.js$/.test(
+              resource
+            )
+          ) {
+            telemetry.record({
+              eventName: 'NEXT_EDGE_IMAGE_GENERATION_USED',
+              payload: {},
+            })
+          }
+        }
+
         /**
          * When building for production checks if the module is using `eval`
          * and in such case produces a compilation error. The module has to

test/integration/image-generation/app/pages/api/image.jsx

@@ -0,0 +1,9 @@
+import { ImageResponse } from '@vercel/og'
+
+export default async () => {
+  return new ImageResponse(<div tw="w-full h-full text-5xl">hello</div>)
+}
+
+export const config = {
+  runtime: 'experimental-edge',
+}

test/integration/image-generation/test/index.test.ts

@@ -0,0 +1,42 @@
+/* eslint-env jest */
+import {
+  fetchViaHTTP,
+  findPort,
+  killApp,
+  nextBuild,
+  nextStart,
+} from 'next-test-utils'
+import { join } from 'path'
+
+const appDir = join(__dirname, '../app')
+
+describe('Image Generation', () => {
+  describe('Prod', () => {
+    let app
+    let appPort
+
+    beforeAll(async () => {
+      await nextBuild(appDir)
+      appPort = await findPort()
+      app = await nextStart(appDir, appPort)
+    })
+    afterAll(async () => {
+      await killApp(app)
+    })
+
+    it('should generate the image without errors', async () => {
+      const res = await fetchViaHTTP(appPort, '/api/image')
+      expect(res.status).toBe(200)
+      expect(res.headers.get('Content-Type')).toBe('image/png')
+
+      const buffer = await res.buffer()
+
+      // It should be a PNG
+      expect(
+        [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a].every(
+          (b, i) => buffer[i] === b
+        )
+      ).toBeTrue()
+    })
+  })
+})