Next.js项目Middleware在Netlify生效但本地localhost无触发问题

你的Next.js中间件在Netlify部署后正常运行，但本地localhost环境完全不触发，可从以下方面排查修复：

可能原因及修复步骤 #

1. Next.js版本与配置问题 #

• 若使用Next.js 12.0.x ~ 12.1.x版本，middleware需手动启用实验性功能，在next.config.js中添加配置：

module.exports = {
  experimental: {
    middleware: true,
  },
};

• 若使用Next.js 12.2.0及以上版本，该配置默认启用，无需额外设置，但需确保版本符合要求。

2. 本地开发服务器缓存 #

停止当前npm run dev服务，完全关闭后重新启动，避免旧代码缓存导致中间件未加载。

3. 文件位置与命名问题 #

• 确认middleware.js的位置：无src目录的项目放在根目录；有src目录的项目必须放在src/middleware.js。
• 文件名必须为小写的middleware.js，不能是Middleware.js或其他变体。

4. Node.js版本不兼容 #

Next.js中间件要求Node.js版本≥16.8，运行node -v查看本地版本，版本过低请升级。

代码中的潜在bug #

你的中间件代码存在逻辑错误：request.cookies.get()返回的是包含name和value属性的对象（或undefined），直接与字符串比较会导致判断失效，需修改为：

import { NextResponse } from "next/server";

const secretkey = "sm@234";
export function middleware(request) {
  const key = request.nextUrl.searchParams.get("secretkey");
  const cookie = request.cookies.get("auth_dev");
  if (key && key === secretkey) {
    const response = NextResponse.next();
    response.cookies.set("auth_dev", "OK");
    return response;
  }
  // 修改：判断cookie的value属性
  if (cookie?.value === "OK") {
    return NextResponse.next();
  }
  // 检查是否已重定向：同样判断value
  const redirected = request.cookies.get("redirected");
  if (!redirected?.value) {
    const response = NextResponse.redirect(
      new URL("/underConstruction", request.url)
    );
    response.cookies.set("redirected", true);
    return response;
  }
}

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