使用@vercel/og生成Open Graph图片失败：ERR_MODULE_NOT_FOUND错误

问题核心 #

你遇到的错误是因为@vercel/og依赖的WebAssembly模块resvg.simd.wasm未被正确加载，结合你的代码和部署环境，主要诱因包括API路由文件结构错误、版本兼容性问题以及代码参数缺失。

解决方案 #

1. 修正API路由文件结构 #

在Next.js App Router中，API路由必须命名为route.js，而非page.js。page.js用于渲染页面组件，无法被识别为API端点。

• 将你的文件从app/api/og/page.js重命名为app/api/og/route.js

2. 修复API路由代码逻辑 #

你的代码存在两个问题：

• 未接收请求参数（req未定义）
• App Router的API路由需使用GET/POST等明确的方法导出

修正后的代码：

// File: app/api/og/route.js
import { ImageResponse } from "@vercel/og";

export const config = {
  runtime: "edge",
};

export async function GET(request) {
  const { searchParams } = new URL(request.url);
  const hasTitle = searchParams.has("title");
  const title = hasTitle ? searchParams.get("title")?.slice(0, 100) : "delilah";

  return new ImageResponse(
    (
      <div
        style={{
          background: "linear-gradient(to bottom right, #246bd7 0%, #169680 30%, #169680 55%, #cc978d)",
          backgroundSize: "100% 100%",
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          color: "white",
          padding: "50px",
          textShadow: "0px 0px 1px black",
        }}
      >
        <img src="[img src here]" width={500} style={{ borderRadius: 20 }} />
        <div style={{ marginLeft: 50, fontSize: 80, fontWeight: "bold", textShadow: "1px 1px 0px black" }}>
          {title}
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

3. 升级依赖版本 #

@vercel/og的旧版本可能存在打包路径问题，确保你使用的是兼容Next.js的最新稳定版：

# npm
npm install @vercel/og@latest next@latest

# yarn
yarn add @vercel/og@latest next@latest

# pnpm
pnpm add @vercel/og@latest next@latest

4. 配置Vercel构建环境 #

确保Vercel使用Node.js 18+运行环境（@vercel/og依赖该版本特性），在项目根目录创建vercel.json：

{
  "functions": {
    "app/api/**/*.js": {
      "runtime": "@vercel/node@20.x"
    }
  }
}

5. 清除缓存重新部署 #

• 本地清除依赖缓存：

  rm -rf node_modules package-lock.json # npm
  npm install
  

• 在Vercel控制台的部署页面，选择重新部署并清除缓存，确保构建过程中重新拉取所有依赖。

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