Move ImageResponse to next/og

packages/next-swc/crates/next-core/src/next_import_map.rs

@@ -399,6 +399,7 @@ pub async fn get_next_edge_import_map(
             "next/router" => "next/dist/esm/client/router".to_string(),
             "next/script" => "next/dist/esm/client/script".to_string(),
             "next/server" => "next/dist/esm/server/web/exports/index".to_string(),
+            "next/og" => "next/dist/esm/server/og/image-response".to_string(),
 
             "next/dist/client/components/headers" => "next/dist/esm/client/components/headers".to_string(),
             "next/dist/client/components/navigation" => "next/dist/esm/client/components/navigation".to_string(),
@@ -410,6 +411,7 @@ pub async fn get_next_edge_import_map(
             "next/dist/shared/lib/dynamic" => "next/dist/esm/shared/lib/dynamic".to_string(),
             "next/dist/shared/lib/head" => "next/dist/esm/shared/lib/head".to_string(),
             "next/dist/shared/lib/image-external" => "next/dist/esm/shared/lib/image-external".to_string(),
+            "dist/server/og/image-response" => "next/dist/esm/server/og/image-response".to_string(),
         },
     );
 

packages/next/og.d.ts

@@ -0,0 +1 @@
+export * from './dist/server/og/image-response'

packages/next/og.js

@@ -0,0 +1 @@
+module.exports = require('./dist/server/og/image-response')

packages/next/package.json

@@ -47,6 +47,8 @@
     "jest.d.ts",
     "amp.js",
     "amp.d.ts",
+    "og.js",
+    "og.d.ts",
     "index.d.ts",
     "types/index.d.ts",
     "types/global.d.ts",

packages/next/src/build/webpack-config.ts

@@ -811,7 +811,7 @@ export default async function getBaseWebpackConfig(
     ],
     alias: {
       // Alias 3rd party @vercel/og package to vendored og image package to reduce bundle size
-      '@vercel/og': 'next/dist/server/web/spec-extension/image-response',
+      '@vercel/og': 'next/dist/server/og/image-response',
 
       // Alias next/dist imports to next/dist/esm assets,
       // let this alias hit before `next` alias.
@@ -827,6 +827,8 @@ export default async function getBaseWebpackConfig(
             // Alias the usage of next public APIs
             [path.join(NEXT_PROJECT_ROOT, 'server')]:
               'next/dist/esm/server/web/exports/index',
+            [path.join(NEXT_PROJECT_ROOT, 'og')]:
+              'next/dist/esm/server/og/image-response',
             [path.join(NEXT_PROJECT_ROOT_DIST, 'client', 'link')]:
               'next/dist/esm/client/link',
             [path.join(
@@ -1903,7 +1905,7 @@ export default async function getBaseWebpackConfig(
         {
           // Mark `image-response.js` as side-effects free to make sure we can
           // tree-shake it if not used.
-          test: /[\\/]next[\\/]dist[\\/](esm[\\/])?server[\\/]web[\\/]exports[\\/]image-response\.js/,
+          test: /[\\/]next[\\/]dist[\\/](esm[\\/])?server[\\/]og[\\/]image-response\.js/,
           sideEffects: false,
         },
       ].filter(Boolean),

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

@@ -587,7 +587,7 @@ function getExtractMetadata(params: {
           const resource = module.resource
           const hasOGImageGeneration =
             resource &&
-            /[\\/]node_modules[\\/]@vercel[\\/]og[\\/]dist[\\/]index\.(edge|node)\.js$|[\\/]next[\\/]dist[\\/](esm[\\/])?server[\\/]web[\\/]spec-extension[\\/]image-response\.js$/.test(
+            /[\\/]node_modules[\\/]@vercel[\\/]og[\\/]dist[\\/]index\.(edge|node)\.js$|[\\/]next[\\/]dist[\\/](esm[\\/])?server[\\/]og[\\/]image-response\.js$/.test(
               resource
             )
 

packages/next/src/compiled/@vercel/og/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@vercel/og",
+  "version": "0.5.15",
   "LICENSE": "MLP-2.0",
   "type": "module",
   "main": "./index.node.js",
@@ -9,6 +10,7 @@
       "import": "./index.node.js",
       "node": "./index.node.js",
       "default": "./index.node.js"
-    }
+    },
+    "./package.json": "./package.json"
   }
 }

packages/next/src/server/og/image-response.ts

@@ -0,0 +1,52 @@
+export class ImageResponse extends Response {
+  public static displayName = 'NextImageResponse'
+  constructor(
+    ...args: ConstructorParameters<
+      typeof import('next/dist/compiled/@vercel/og').ImageResponse
+    >
+  ) {
+    const readable = new ReadableStream({
+      async start(controller) {
+        const OGImageResponse: typeof import('next/dist/compiled/@vercel/og').ImageResponse =
+          // So far we have to manually determine which build to use,
+          // as the auto resolving is not working
+          (
+            await import(
+              process.env.NEXT_RUNTIME === 'edge'
+                ? 'next/dist/compiled/@vercel/og/index.edge.js'
+                : 'next/dist/compiled/@vercel/og/index.node.js'
+            )
+          ).ImageResponse
+        const imageResponse = new OGImageResponse(...args) as Response
+
+        if (!imageResponse.body) {
+          return controller.close()
+        }
+
+        const reader = imageResponse.body!.getReader()
+        while (true) {
+          const { done, value } = await reader.read()
+          if (done) {
+            return controller.close()
+          }
+          controller.enqueue(value)
+        }
+      },
+    })
+
+    const options = args[1] || {}
+
+    super(readable, {
+      headers: {
+        'content-type': 'image/png',
+        'cache-control':
+          process.env.NODE_ENV === 'development'
+            ? 'no-cache, no-store'
+            : 'public, immutable, no-transform, max-age=31536000',
+        ...options.headers,
+      },
+      status: options.status,
+      statusText: options.statusText,
+    })
+  }
+}

packages/next/src/server/web/spec-extension/image-response.ts

@@ -1,52 +1,5 @@
-export class ImageResponse extends Response {
-  public static displayName = 'NextImageResponse'
-  constructor(
-    ...args: ConstructorParameters<
-      typeof import('next/dist/compiled/@vercel/og').ImageResponse
-    >
-  ) {
-    const readable = new ReadableStream({
-      async start(controller) {
-        const OGImageResponse: typeof import('next/dist/compiled/@vercel/og').ImageResponse =
-          // So far we have to manually determine which build to use,
-          // as the auto resolving is not working
-          (
-            await import(
-              process.env.NEXT_RUNTIME === 'edge'
-                ? 'next/dist/compiled/@vercel/og/index.edge.js'
-                : 'next/dist/compiled/@vercel/og/index.node.js'
-            )
-          ).ImageResponse
-        const imageResponse = new OGImageResponse(...args) as Response
-
-        if (!imageResponse.body) {
-          return controller.close()
-        }
-
-        const reader = imageResponse.body!.getReader()
-        while (true) {
-          const { done, value } = await reader.read()
-          if (done) {
-            return controller.close()
-          }
-          controller.enqueue(value)
-        }
-      },
-    })
-
-    const options = args[1] || {}
-
-    super(readable, {
-      headers: {
-        'content-type': 'image/png',
-        'cache-control':
-          process.env.NODE_ENV === 'development'
-            ? 'no-cache, no-store'
-            : 'public, immutable, no-transform, max-age=31536000',
-        ...options.headers,
-      },
-      status: options.status,
-      statusText: options.statusText,
-    })
-  }
+export function ImageResponse() {
+  throw new Error(
+    'ImageResponse export is moved to next/og since Next.js 14, please import from "next/og" instead'
+  )
 }

packages/next/taskfile.js

@@ -228,6 +228,7 @@ export async function copy_vercel_og(task, opts) {
     join(__dirname, 'src/compiled/@vercel/og/package.json'),
     {
       name: '@vercel/og',
+      version: require('@vercel/og/package.json').version,
       LICENSE: 'MLP-2.0',
       type: 'module',
       main: './index.node.js',
@@ -238,6 +239,7 @@ export async function copy_vercel_og(task, opts) {
           node: './index.node.js',
           default: './index.node.js',
         },
+        './package.json': './package.json',
       },
     },
     { spaces: 2 }

test/e2e/app-dir/metadata-dynamic-routes/app/(group)/dynamic/[size]/apple-icon.tsx

@@ -1,4 +1,4 @@
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 // without id
 export async function generateImageMetadata({ params }) {

test/e2e/app-dir/metadata-dynamic-routes/app/(group)/dynamic/[size]/icon.tsx

@@ -1,4 +1,4 @@
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 export async function generateImageMetadata({ params }) {
   return [

test/e2e/app-dir/metadata-dynamic-routes/app/(group)/dynamic/[size]/opengraph-image.tsx

@@ -1,4 +1,4 @@
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 export const alt = 'Open Graph'
 

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

@@ -1,4 +1,4 @@
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 export default function og() {
   return new ImageResponse(

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

@@ -1,4 +1,4 @@
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 export const alt = 'Twitter'
 export const size = { width: 1200, height: 675 }

test/e2e/app-dir/metadata-dynamic-routes/app/apple-icon.tsx

@@ -1,4 +1,4 @@
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 export const contentType = 'image/png'
 

test/e2e/app-dir/metadata-dynamic-routes/app/favicon.tsx

@@ -1,5 +1,5 @@
 // This file should be ignored
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 export default function favicon() {
   return new ImageResponse(

test/e2e/app-dir/metadata-dynamic-routes/app/font/opengraph-image.tsx

@@ -1,4 +1,4 @@
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 export const contentType = 'image/png'
 

test/e2e/app-dir/metadata-dynamic-routes/app/font/opengraph-image2.tsx

@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 import { fileURLToPath } from 'url'
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 export const contentType = 'image/png'
 

test/e2e/app-dir/metadata-dynamic-routes/app/icon.tsx

@@ -1,4 +1,4 @@
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 export const contentType = 'image/png'
 export const size = { width: 512, height: 512 }

test/e2e/app-dir/metadata-dynamic-routes/app/metadata-base/unset/opengraph-image2.tsx

@@ -1,4 +1,4 @@
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 export const alt = 'Open Graph'
 

test/e2e/app-dir/metadata-dynamic-routes/app/opengraph-image.tsx

@@ -1,4 +1,4 @@
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 export const alt = 'Open Graph'
 

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

@@ -1,4 +1,4 @@
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 import { ImageResponse as ImageResponse2 } from '@vercel/og'
 
 // Node.js: Using @vercel/og external package, and should be aliased to "next/server" ImageResponse

test/e2e/app-dir/metadata-dynamic-routes/app/twitter-image2.tsx

@@ -1,4 +1,4 @@
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 // @ts-ignore
 import { ImageResponse as ImageResponse2 } from '@vercel/og'
 

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

@@ -415,7 +415,7 @@ createNextDescribe(
       it('should error when id is missing in generateImageMetadata', async () => {
         const iconFilePath = 'app/metadata-base/unset/icon.tsx'
         const contentMissingIdProperty = `
-        import { ImageResponse } from 'next/server'
+        import { ImageResponse } from 'next/og'
         export async function generateImageMetadata() {
           return [
             {

test/e2e/app-dir/metadata-edge/app/og.tsx

@@ -1,4 +1,4 @@
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 export default function og() {
   return new ImageResponse(

test/production/standalone-mode/required-server-files/middleware.js

@@ -1,4 +1,5 @@
-import { ImageResponse, NextResponse } from 'next/server'
+import { NextResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 export async function middleware(req) {
   console.log('middleware', req.url)