Next.js导入next-connect提示nextConnect is undefined如何解决

• next-connect@1.0.0-next.2 版本取消了默认导出，旧版默认导入写法会直接拿到undefined
• 提供的示例代码存在语法错误，且未导出路由实例、未配置正确的运行时参数
• Next.js 根目录级别的内置middleware.js运行在Edge Runtime环境，不支持multer这类依赖Node.js原生流、文件系统API的第三方库，无法直接导入使用

1. 修正next-connect导入方式 #

该版本需要使用命名导入方式引入路由创建方法：

import { createRouter } from 'next-connect';

如果习惯旧版的nextConnect命名，可以直接做重命名导入：

import { createRouter as nextConnect } from 'next-connect';

2. 修正API路由写法 #

pages/api/test.js的基础正确写法如下，注意链式注册请求方法时要传入完整的处理函数，最后必须默认导出路由实例，同时配置运行时参数：

import { createRouter } from 'next-connect';

const apiRoute = createRouter({
  // 全局错误兜底
  onError(err, req, res) {
    res.status(500).json({ msg: err.message });
  },
  // 方法不匹配兜底
  onNoMatch(req, res) {
    res.status(405).json({ msg: `方法${req.method}不允许` });
  }
});

// post方法注册，注意回调是.post()的入参
apiRoute.post((req, res) => {
  res.status(200).json({ data: 'success' });
});

export default apiRoute;
// 关键配置：使用Node.js运行时，关闭默认body解析
export const config = {
  runtime: 'nodejs',
  api: {
    bodyParser: false,
  }
};

3. multer集成方案 #

multer只能作为API路由级别的中间件通过next-connect挂载，不能在根目录的Edge Runtime中间件中使用，单文件上传示例：

import { createRouter } from 'next-connect';
import multer from 'multer';

// 配置上传存储规则，示例为存在内存中，可按需改为磁盘存储
const upload = multer({ storage: multer.memoryStorage() });
const apiRoute = createRouter();

// 挂载multer中间件，指定接收字段名为file的单文件
apiRoute.post(upload.single('file'), (req, res) => {
  // req.file即为上传的文件对象，可按需做后续存储/转存操作
  res.status(200).json({ 
    data: 'success',
    uploadFile: req.file.originalname
  });
});

export default apiRoute;
export const config = {
  runtime: 'nodejs',
  api: {
    bodyParser: false,
  }
};

多文件上传只需要把upload.single()替换为multer对应的upload.array()/upload.fields()方法即可，配置规则和原生Express环境下完全一致。

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