Next.js集成Tesseract.js部署Vercel时worker.load()执行卡住问题求助

问题原因 #

你遇到的卡住问题主要和Vercel的运行环境限制、Tesseract.js的资源加载逻辑相关，常见触发原因如下：

1. 运行位置不匹配：如果代码写在Next.js App Router的服务端组件/Serverless接口中，Node.js环境默认没有浏览器的Web Worker API，原生Tesseract.js的worker模式无法正常初始化；如果使用Edge Runtime，还会因为缺少部分Node.js原生API导致加载失败。
2. 超时限制：Vercel Hobby计划的Serverless函数默认超时时间为10秒，worker.load()需要下载加载wasm核心文件和语言训练数据，冷启动时耗时较长很容易超出超时限制，直接被平台中断执行。
3. 资源加载失败：Tesseract.js默认从公共CDN拉取核心依赖，Vercel运行环境的出站网络限制、CDN访问延迟都可能导致资源加载超时，流程卡住。
4. 客户端CSP限制：如果代码运行在浏览器端，Vercel部署后默认的内容安全策略(CSP)可能会拦截Web Worker、wasm资源的加载，导致初始化失败。

解决方案 #

情况1：OCR逻辑运行在服务端

• 调整Serverless函数超时配置，在项目根目录新增vercel.json设置最大运行时长：

{
  "functions": {
    "app/api/**/*.{js,ts}": {
      "maxDuration": 10,
      "runtime": "@vercel/node@3"
    }
  }
}

• 改用Tesseract.js的Node.js适配模式，显式关闭worker，将核心资源内置到项目中避免CDN请求：

const worker = createWorker({
  workerBlobURL: false,
  corePath: require.resolve('tesseract.js-core/tesseract-core.wasm'),
  langPath: require.resolve('tesseract.js/tessdata/eng.traineddata')
});

• 如果超时问题仍然存在，建议将OCR逻辑迁移到客户端执行，Serverless函数不适合CPU密集型的长时间运行任务。

情况2：OCR逻辑运行在客户端

• 给组件添加'use client'标识，确认逻辑运行在浏览器侧。
• 将Tesseract依赖的worker脚本、wasm文件、训练数据放到项目public目录下，初始化时指定本地资源路径，避免公共CDN请求：

const worker = createWorker({
  workerPath: '/tesseract-worker.min.js',
  corePath: '/tesseract-core.wasm',
  langPath: '/eng.traineddata'
});

• 调整Next.js的CSP配置，允许wasm资源加载：在next.config.js中添加'wasm-unsafe-eval'到脚本安全规则中。
• 添加上报和超时逻辑，捕获具体错误信息：

try {
  await Promise.race([
    worker.load(),
    new Promise((_, reject) => setTimeout(() => reject(new Error('Tesseract加载超时')), 15000))
  ])
} catch (e) {
  console.error('初始化失败原因：', e)
}

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