next.js - 如何在下一个js应用程序文件夹中使用vercel og图像？

Question

但是我在实现 ImageResponse 以作为 NextResponse 返回时遇到问题。

我有一个问题，我尝试在 app/somedirectory/route.js 中使用 @vercel/og 实现 og 图像生成

但是我在实现 ImageResponse 以作为 NextResponse 返回时遇到问题。

我收到错误 405，有时甚至收到错误 500。

关于如何正确实现它的任何想法或代码示例？ 我在 App/api/hello/route.js 中尝试了以下内容

import { ImageResponse } from '@vercel/og';
 
export const config = {
  runtime: 'edge',
};
 
const ogImage =  function () {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          textAlign: 'center',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        Hello world!
      </div>
    ),
    {
      width: 1200,
      height: 600,
    },
  );
}

export async function GET(request) {
  return new Response(ogImage)
}

它返回了整个函数

function() {
return new _vercel_og__WEBPACK_IMPORTED_MODULE_1__.ImageResponse(/*#__PURE__*/ (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)("div", {
    style: {
        fontSize: 128,
        background: "white",
        width: "100%",
        height: "100%",
        display: "flex",
        textAlign: "center",
        alignItems: "center",
        justifyContent: "center"
    },
    children: "Hello world!"
}, void 0, false, {
    fileName: "C:\\Users\\.. ..test\\app\\api\\hello\\route.js",
    lineNumber: 10,
    columnNumber: 7
}, this), {
    width: 1200,
    height: 600
});

}

当使用 NextResponse 时，我无法得到任何返回。 当我使用以下内容时

  const ogImage =  new ImageResponse(
    (
      <div></div>

     );

export async function GET(request) {
  return new Response(ogImage)
}

它只是返回[对象响应]

Answer 1

终于知道怎么做了:

import { ImageResponse } from '@vercel/og';
 
export const config = {
  runtime: 'edge',
};
 


export async function GET(request) {
   return  new ImageResponse(
      (
        <div
          style={{
            fontSize: 128,
            background: 'white',
            width: '100%',
            height: '100%',
            display: 'flex',
            textAlign: 'center',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          Hello world!
        </div>
      ),
      {
        width: 1200,
        height: 600,
      },
    );
    // return new Response(imageG);
}

这应该放在:

App/directoryName/route.js

这是迄今为止从 NextJs 新应用程序结构中的 Api 端点获取 imageResponse 的唯一方法。

它正在接受请求并返回 ImageResponse。 如果 ImageResponse 存储在 const 中，并且使用 new Response(const) 返回该 const，则它将返回 [object response]。