Next.js上传文件出现413 Request Entity Too Large错误如何解决？

Next.js 12 版本的API路由默认限制请求体最大为1MB，你上传超过1MB的文件时就会触发413 Payload Too Large错误，即便你已经配置了bodyParser: false，也需要额外配置请求体大小上限。

1. 修改/api/upload-file.js中的API配置，增加sizeLimit参数，按需放宽请求体大小限制：

export const config = {
    api: {
        bodyParser: false,
        // 示例设置最大请求体为100MB，可根据实际需求调整
        sizeLimit: '100mb'
    }
}

2. 建议同步在multer配置中增加文件大小限制，避免无效的大文件请求直接写入磁盘：

const upload = multer({
    limits: {
        // 示例设置单文件最大为100MB，单位为字节
        fileSize: 100 * 1024 * 1024
    },
    storage: multer.diskStorage({
        destination: './public/upload',
        filename: (req, file, cb) => cb(null, file.originalname),
    })
})

• 如果部署在Vercel平台，Vercel对API路由的请求体最大限制为4.5MB，超过该大小的文件上传需要采用客户端直传对象存储的方案，不要经过Next.js API路由中转。
• 生产环境不建议将上传的文件存储在public目录下，避免静态资源目录过大影响构建、部署性能，建议存储到第三方对象存储服务或独立文件服务器。

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