Next.js13 Pages路由下用next-connect集成Helmet不生效问题

你的问题核心在于Helmet是为Express类框架设计的中间件，直接调用helmet()无法自动关联到Next.js的NextResponse对象，导致安全头无法被添加到响应中。以下是具体修复方案：

1. 适配next-connect的修复代码 #

修改中间件逻辑，通过模拟Express的响应对象，将Helmet生成的安全头手动附加到NextResponse上：

import {
  NextResponse,
  type NextRequest,
  type NextFetchEvent,
} from "next/server";
import { createEdgeRouter } from "next-connect";
import helmet from "helmet";

const router = createEdgeRouter<NextRequest, NextFetchEvent>();

router.use(async (req, event, next) => {
  const response = NextResponse.next();
  
  // 模拟Express的res对象，让Helmet能正常生成安全头
  const mockRes = {
    setHeader: (name: string, value: string | string[]) => {
      // 将Helmet生成的头写入NextResponse
      if (Array.isArray(value)) {
        response.headers.set(name, value.join(","));
      } else {
        response.headers.set(name, value);
      }
    },
    getHeader: () => {},
    removeHeader: () => {},
  };

  // 调用Helmet并传入模拟对象
  helmet()(req as any, mockRes as any, () => {});
  
  // 将处理后的response传递给后续中间件
  event.waitUntil(Promise.resolve(response));
  return next();
});

router.all(() => {
  return NextResponse.next();
});

export function middleware(req: NextRequest, event: NextFetchEvent) {
  return router.run(req, event);
}

export const config = {
  matcher: "/api/:path*",
};

2. 无需next-connect的简化方案 #

如果不需要next-connect的路由分发能力，直接在Middleware中处理会更简洁：

import { NextResponse, type NextRequest } from "next/server";
import helmet from "helmet";

export function middleware(req: NextRequest) {
  const response = NextResponse.next();
  
  const mockRes = {
    setHeader: (name: string, value: string | string[]) => {
      if (Array.isArray(value)) {
        response.headers.set(name, value.join(","));
      } else {
        response.headers.set(name, value);
      }
    },
  };

  helmet()(req as any, mockRes as any, () => {});
  
  return response;
}

export const config = {
  matcher: "/api/:path*",
};

关键逻辑说明 #

• Next.js的Middleware模型与Express不同，Helmet无法直接识别NextResponse，必须通过模拟Express的res.setHeader方法中转头信息。
• 部分Helmet生成的头是数组格式，需要转换为字符串后再写入NextResponse的headers中。

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