Next.js中间件报错：Uncaught SyntaxError: Unexpected token '<' 求助

这个错误本质是浏览器请求JavaScript资源时，服务器返回了HTML内容（比如错误页、404页面）而非预期的JS代码，结合你的场景，可按以下步骤排查修复：

• 检查中间件文件的位置与命名
  Next.js 13要求中间件文件必须放在项目根目录或src目录下，且文件名必须为middleware.ts（或.js）。如果文件放在子目录（如pages/middleware.js），框架无法正确识别，会导致请求被错误处理并返回HTML。

• 修复代码中的类型与逻辑问题
  你的代码使用了TypeScript类型标注但文件后缀是.js，这会引发编译错误。要么将文件重命名为middleware.ts并确保项目配置了TypeScript，要么移除类型标注；同时注意中间件不应返回null，需返回NextResponse.next()：

  import { NextRequest, NextResponse } from 'next/server';
  
  export function middleware(request) {
    const accessToken = request.cookies.has('accessToken');
    const isLoginPage = request.nextUrl.pathname === '/login';
  
    if (!isLoginPage && !accessToken) {
      return NextResponse.redirect(new URL('/login', request.url));
    }
    return NextResponse.next();
  }
  

  另外你引入了jwt-decode但未使用，可直接删除该导入，避免潜在的Edge Runtime兼容问题。

• 调整matcher规则，避免拦截静态资源
  当前matcher规则可能会匹配到/_next/下的静态JS、CSS资源请求，导致中间件错误处理这些请求并返回HTML。修改规则排除静态资源路径：

  export const config = {
    matcher: [
      // 排除静态资源、图片优化文件和favicon
      '/((?!_next/static|_next/image|favicon.ico).*)',
      '/login',
      '/dashboard',
      '/dashboard/:path*',
      '/:path*/admin/:path*',
    ],
  };
  

• 清除缓存并重启服务

  1. 停止当前Next.js开发服务器
  2. 删除项目根目录下的.next文件夹
  3. 清除浏览器缓存（快捷键：Ctrl+Shift+R / Cmd+Shift+R）
  4. 重新执行npm run dev启动服务

• 验证Edge Runtime配置
  确认next.config.js中没有错误配置Runtime，Next.js中间件默认运行在Edge Runtime，无需额外设置runtime: 'nodejs'相关配置。

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