Next.js API中Puppeteer在Vercel部署时的500错误解决问询

DevOps 小满

2026-7-5

解决方案

1. 替换依赖

卸载旧的适配包，改用维护版的Chromium适配工具和轻量版Puppeteer：

npm uninstall chrome-aws-lambda puppeteer
npm install @sparticuz/chromium puppeteer-core

2. 修正API路由代码

以下是适配Vercel Serverless环境的完整代码，同时修复了异步操作、参数解析的问题：

"use server";
import { NextResponse } from "next/server";
import puppeteer from "puppeteer-core";
import chromium from "@sparticuz/chromium";

export async function POST(req) {
  try {
    // 从POST请求体获取目标URL（POST参数不应从URL查询串读取）
    const { url } = await req.json();
    if (!url) {
      return NextResponse.json({ error: "缺少url参数" }, { status: 400 });
    }

    // 启动适配Vercel环境的Chromium
    const browser = await puppeteer.launch({
      args: chromium.args,
      defaultViewport: chromium.defaultViewport,
      executablePath: await chromium.executablePath(),
      headless: chromium.headless,
      ignoreHTTPSErrors: true,
    });

    const page = await browser.newPage();
    // 设置超时和等待策略，避免请求挂起
    await page.goto(url, { timeout: 30000, waitUntil: "networkidle2" });
    const buffer = await page.screenshot({ type: "png" });
    await browser.close();

    const base64Image = buffer.toString("base64");
    return NextResponse.json({ image: base64Image });
  } catch (error) {
    console.error("截图失败:", error);
    return NextResponse.json({ error: "截图失败" }, { status: 500 });
  }
}