Next.js 14中间件始终不运行，如何正确实现？

核心问题分析 #

你遇到的问题来自两个常见误解：

1. 中间件执行环境：Next.js 中间件是服务器端代码，日志不会出现在浏览器开发者工具控制台，而是显示在启动 next dev 的终端窗口，或部署平台的服务器日志中。
2. 响应要求：当前代码未返回 NextResponse 对象，会导致请求处理流程中断，中间件逻辑可能被忽略。

修复步骤 #

1. 修正中间件代码（必填）

必须返回 NextResponse.next() 让请求继续向下执行，同时推荐使用命名函数导出（Next.js 13+ 规范写法）：

import { NextResponse } from "next/server";

// 替换默认导出为命名函数导出（更规范）
export function middleware(req: Request) {
  console.log('run middleware');
  // 必须返回响应，保证请求流程正常完成
  return NextResponse.next();
}

// 可选：明确指定匹配所有路由（默认已覆盖所有路由，后续可修改为仅保护特定路由）
export const config = {
  matcher: '/:path*',
};

2. 查看正确的日志位置

运行 next dev 后，所有中间件的 console.log 都会输出在终端窗口，而非浏览器控制台。无论是直接刷新页面，还是用 next/Link 进行客户端导航，中间件都会在服务器端触发，日志统一显示在终端。

3. 排查缓存与服务重启

如果修改中间件代码后仍未生效，尝试：

• 停止 next dev 服务，重新启动（Next.js 可能缓存了旧的中间件代码）
• 清除浏览器缓存，或使用隐身模式测试

后续鉴权逻辑示例（结合Xano） #

针对你用Xano实现鉴权的需求，提供基础的token校验逻辑：

import { NextResponse } from "next/server";

export function middleware(req: Request) {
  // 获取Xano的authToken cookie
  const authToken = req.cookies.get('authToken')?.value;
  
  console.log('当前请求路由:', req.nextUrl.pathname);
  console.log('authToken:', authToken);

  // 示例：保护所有/admin开头的路由，无token则重定向到登录页
  if (req.nextUrl.pathname.startsWith('/admin') && !authToken) {
    return NextResponse.redirect(new URL('/login', req.url));
  }

  // 允许合法请求继续执行
  return NextResponse.next();
}

// 后续可修改matcher，仅对需要鉴权的路由生效
export const config = {
  matcher: ['/admin/:path*', '/user/profile'],
};

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