在根目录创建middleware文件时Next.js报TypeError错误求助

问题原因 #

触发 Error [TypeError]: Class extends value undefined is not a constructor or null 且关联undici@5.11.0库的核心原因，是你的中间件代码存在未正确导入依赖的问题：

• 未导入 NextResponse 却直接调用 NextResponse.redirect()
• 未导入 parseCookies 方法（假设来自next-cookies库）就直接使用
  这些未定义的调用会触发底层库的异常，而非直接抛出未引用错误。

修复方案 #

1. 补充缺失的导入并修正代码 #

修改中间件代码，补上必要的导入，同时修正方法调用细节：

import { NextResponse } from 'next/server';
import parseCookies from 'next-cookies'; // 若未安装需先执行：npm i next-cookies

export default function middleware(req){
    const cookies = parseCookies(req); // parseCookies需要传入req参数
    const verify = cookies.token;
    const url = req.url;
    
    if(url.includes('/profile')){
        // 推荐用URL构造函数生成跳转地址，符合Next.js规范
        return NextResponse.redirect(new URL('http://localhost:3000', req.url));
    }
    
    // 必须返回响应对象，否则会导致请求挂起
    return NextResponse.next();
}

2. 修复版本兼容性问题 #

若问题仍存在，检查版本匹配：

• undici@5.11.0和部分Next.js版本存在兼容问题，可升级undici到最新稳定版：

  npm update undici
  

• 确保你的Next.js版本在13.x及以上（中间件功能的稳定版本要求）

3. 确认文件命名规范 #

保证中间件文件名为 middleware.js 或 middleware.ts，且放在项目根目录（与pages/app目录同级），Next.js才能自动识别加载。

内容的提问来源于stack exchange，提问作者Abdus Sattar Nishad