Vercel Edge部署的Next.js应用中@vercel/og接口无法显示图片

你的问题核心是ImageResponse生成的内容缺少可见样式，导致呈现为空白。以下是具体修复方案：

1. 给JSX内容添加基础样式 #

默认情况下，@vercel/og的JSX容器未设置背景色、文本颜色和布局规则，大概率出现文本与背景色一致（均为白色）的情况，导致内容不可见。修改你的/pages/api/og.js代码：

import { ImageResponse } from '@vercel/og'

export const config = {
  runtime: 'edge', // 建议使用稳定版edge runtime，替代experimental-edge
};

export const handler = (request) => {
  return new ImageResponse(
    (
      // 添加布局、背景色、文本样式
      <div 
        style={{ 
          width: '100%', 
          height: '100%', 
          display: 'flex', 
          alignItems: 'center', 
          justifyContent: 'center',
          backgroundColor: '#ffffff',
          color: '#000000',
          fontSize: 64,
          fontWeight: 'bold'
        }}
      >
        <p>test</p>
      </div>
    ),
    {
      width: 1200,
      height: 630
    }
  );
};

export default handler;

2. 直接验证接口可用性 #

先在浏览器中打开https://你的域名/api/og，确认图片是否正常显示。如果此时能看到内容，说明meta标签配置无问题，之前的空白是生成的图片本身无可见内容导致的。

3. 检查依赖版本 #

确保@vercel/og为最新版本，旧版本可能存在渲染bug。执行以下命令更新：

npm update @vercel/og

关于meta标签的补充 #

你的meta标签配置本身无问题，但可以在页面中打印baseUrl，确认process.env.NEXT_PUBLIC_HOST是否正确注入，避免出现URL拼接错误。

内容的提问来源于stack exchange，提问作者J. Whitehead