能否不依赖React使用@vercel/og生成图片API？

1. 补装React依赖包 #

@vercel/og底层依赖React的JSX转换逻辑，本地开发时必须安装相关依赖才能正常运行。在项目根目录执行：

npm install react react-dom --save-dev

若使用Yarn：

yarn add react react-dom --dev

2. 修复Buffer未定义问题 #

Vercel边缘函数在vercel dev本地环境中，Node.js全局Buffer对象不会自动注入，可通过两种方式解决：

• 代码内手动引入：在api/test.ts开头添加

import { Buffer } from 'node:buffer';
globalThis.Buffer = Buffer;

• 对齐Node.js版本：在项目根目录创建.nvmrc文件，写入与Vercel部署环境一致的Node版本（如v18.17.0），重新启动vercel dev即可。

3. 绕过React直接生成图片（可选） #

如果你的场景完全不需要HTML/JSX，可以直接使用@vercel/og的底层依赖@resvg/resvg-js生成图片，彻底规避React依赖：

import { Resvg } from '@resvg/resvg-js';
import type { VercelRequest, VercelResponse } from '@vercel/node';

export default async function handler(req: VercelRequest, res: VercelResponse) {
  // 替换为你需要生成的SVG内容
  const svgContent = `<svg width="300" height="100"><text x="50%" y="50%" text-anchor="middle" font-size="24" fill="#333">自定义图片内容</text></svg>`;
  
  const resvgInstance = new Resvg(svgContent);
  const pngBuffer = resvgInstance.render().asPng();

  res.setHeader('Content-Type', 'image/png');
  res.send(pngBuffer);
}

注意：需提前安装@resvg/resvg-js包，且要确认Vercel边缘函数支持该依赖（实测大部分场景兼容）。

内容的提问来源于stack exchange，提问作者Patrick Martin