Next.js中加载face-api.js模型失败，请求技术支持

问题描述 #

你在Next.js应用中加载face-api.js模型时触发未处理运行时错误：

Unhandled Runtime Error
Error: Failed to parse URL from /model/ssd_mobilenetv1_model-weights_manifest.json

该问题仅在Next.js环境出现，普通Node.js应用可正常运行，且已确认模型存放路径正确。相关代码如下：

import * as faceapi from 'face-api.js';
import fs from 'fs';

export async function loadingModels() {
    const exists = fs.existsSync('public/model/tiny_face_detector_model-weights_manifest.json');
    console.log(exists)
    await faceapi.nets.ssdMobilenetv1.load('/model')
}

核心原因 #

1. Next.js客户端环境与普通Node.js环境资源加载逻辑不同，fs是Node.js后端专属模块，在浏览器端执行会导致路径解析异常
2. faceapi.nets.ssdMobilenetv1.load()在客户端环境下的路径解析规则和Node.js不一致，直接使用/model会触发URL解析错误

具体修复方案 #

方案1：客户端组件加载模型（推荐前端场景）

Next.js客户端无法使用fs，需直接通过静态资源路径加载，确保模型文件放在public/model目录下，修改代码如下：

import * as faceapi from 'face-api.js';

export async function loadingModels() {
    // 客户端环境下直接使用public目录下的相对路径（注意结尾的斜杠）
    await faceapi.nets.ssdMobilenetv1.load('/model/');
}

方案2：服务端组件加载模型（仅适用于后端场景）

如果是在服务端组件中执行模型加载，需使用绝对路径+loadFromDisk方法：

import * as faceapi from 'face-api.js';
import fs from 'fs';
import path from 'path';

export async function loadingModels() {
    // 构建服务端绝对路径
    const modelDir = path.join(process.cwd(), 'public', 'model');
    const exists = fs.existsSync(path.join(modelDir, 'tiny_face_detector_model-weights_manifest.json'));
    console.log(exists);
    
    // 服务端使用loadFromDisk加载本地模型
    await faceapi.nets.ssdMobilenetv1.loadFromDisk(modelDir);
}

方案3：确认模型文件完整性

检查public/model目录下是否包含ssd_mobilenetv1模型的所有必要文件：

• ssd_mobilenetv1_model-weights_manifest.json
• ssd_mobilenetv1_model-shard1
• ssd_mobilenetv1_model-shard2

关键注意事项 #

• 客户端组件禁止使用fs模块，该模块仅能在Next.js服务端环境（如API路由、服务端组件）中使用
• Next.js静态资源根目录为public，加载路径需以/model/开头，对应本地public/model/目录
• face-api.js在客户端用load()方法加载网络资源，在服务端用loadFromDisk()加载本地文件

内容的提问来源于stack exchange，提问作者Nguyen Dũng