Upgrade og dependencies (#59541)

Upgrade `@vercel/og` to 0.6.1

Closes NEXT-1857

package.json

@@ -110,7 +110,7 @@
     "@typescript-eslint/eslint-plugin": "6.14.0",
     "@typescript-eslint/parser": "6.14.0",
     "@vercel/fetch": "6.1.1",
-    "@vercel/og": "0.5.15",
+    "@vercel/og": "0.6.1",
     "abort-controller": "3.0.0",
     "alex": "9.1.0",
     "amphtml-validator": "1.0.35",
@@ -212,7 +212,7 @@
     "request-promise-core": "1.1.2",
     "resolve-from": "5.0.0",
     "sass": "1.54.0",
-    "satori": "0.10.6",
+    "satori": "0.10.9",
     "scheduler-builtin": "npm:scheduler@0.24.0-canary-0cdfef19b-20231211",
     "scheduler-experimental-builtin": "npm:scheduler@0.0.0-experimental-0cdfef19b-20231211",
     "seedrandom": "3.0.5",

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

@@ -388,7 +388,9 @@ 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(),
+            "next/dist/server/og/image-response" => "next/dist/esm/server/og/image-response".to_string(),
+            // Alias built-in @vercel/og to edge bundle for edge runtime
+            "next/dist/compiled/@vercel/og/index.node.js" => "next/dist/compiled/@vercel/og/index.edge.js".to_string(),
         },
     );
 

packages/next/src/build/create-compiler-aliases.ts

@@ -90,7 +90,7 @@ export function createWebpackAliases({
   }
 
   return {
-    '@vercel/og': 'next/dist/server/og/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.

packages/next/src/build/handle-externals.ts

@@ -240,6 +240,7 @@ export function makeExternalHandler({
 
     // Don't bundle @vercel/og nodejs bundle for nodejs runtime.
     // TODO-APP: bundle route.js with different layer that externals common node_module deps.
+    // Make sure @vercel/og is loaded as ESM for Node.js runtime
     if (
       isWebpackServerLayer(layer) &&
       request === 'next/dist/compiled/@vercel/og/index.node.js'

packages/next/src/compiled/@vercel/og/figma/index.d.ts

@@ -0,0 +1,7 @@
+import type { EdgeImageResponse } from '../index.edge';
+import { FigmaImageResponseProps } from '../types';
+declare type InternalFigmaImageResponseProps = FigmaImageResponseProps & {
+    Response: EdgeImageResponse;
+};
+export declare const FigmaImageResponse: ({ url, template, fonts, imageResponseOptions, Response, }: InternalFigmaImageResponseProps) => Promise<import("../index.edge").ImageResponse>;
+export {};

packages/next/src/compiled/@vercel/og/index.edge.d.ts

@@ -1,5 +1,7 @@
 import type { ReactElement } from 'react';
-import type { ImageResponseOptions } from './types';
+import type { ImageResponseOptions, FigmaImageResponseProps } from './types';
 export declare class ImageResponse extends Response {
     constructor(element: ReactElement, options?: ImageResponseOptions);
 }
+export declare const experimental_FigmaImageResponse: (props: FigmaImageResponseProps) => Promise<ImageResponse>;
+export declare type EdgeImageResponse = typeof ImageResponse;

packages/next/src/compiled/@vercel/og/index.node.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" />
 import type { ReactElement } from 'react';
-import type { ImageResponseNodeOptions, ImageResponseOptions } from './types';
+import type { ImageResponseNodeOptions, ImageResponseOptions, FigmaImageResponseProps } from './types';
 import { Readable } from 'stream';
 export declare class ImageResponse extends Response {
     constructor(element: ReactElement, options?: ImageResponseOptions);
@@ -23,3 +23,5 @@ export declare class ImageResponse extends Response {
  * ```
  */
 export declare function unstable_createNodejsStream(element: ReactElement, options?: Omit<ImageResponseNodeOptions, 'status' | 'statusText' | 'headers'>): Promise<Readable>;
+export declare const experimental_FigmaImageResponse: (props: FigmaImageResponseProps) => Promise<import("./index.edge").ImageResponse>;
+export declare type NodeImageResponse = typeof ImageResponse;