在Vercel部署Next.js应用时，如何解决Playwright浏览器缺失问题？

核心原因 #

Vercel构建环境不会自动安装Playwright的浏览器二进制文件，本地执行npx playwright install仅会将文件保存在本地，无法同步至部署仓库。

解决方案 #

1. 在package.json中添加postinstall脚本 #

在项目package.json的scripts字段中新增postinstall命令，让Vercel在安装依赖后自动下载Chromium浏览器：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "postinstall": "npx playwright install chromium"
  }
}

指定chromium是因为playwright-aws-lambda默认使用该浏览器，无需下载全量浏览器，可节省构建时间

2. 配置Vercel环境变量（可选） #

若问题仍存在，在Vercel项目的环境变量设置中添加PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=false，确保构建过程不会跳过浏览器下载步骤。

3. 调整playwright-aws-lambda初始化逻辑 #

确认launchChromium调用显式配置必要参数，避免路径识别异常：

import { launchChromium } from 'playwright-aws-lambda';

export async function generateOgImage() {
  const browser = await launchChromium({
    executablePath: process.env.CHROMIUM_EXECUTABLE_PATH,
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });
  // 后续图片生成逻辑
}

Vercel环境中Playwright会自动识别缓存的浏览器路径，显式配置可进一步规避路径问题

4. 清除Vercel构建缓存 #

若此前构建失败导致缓存异常，可在Vercel项目的构建设置中勾选"Disable Build Cache"，重新触发构建，确保浏览器文件被正确下载。

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