如何在Next.js的Rewrites中添加自定义请求头

Next.js 的 rewrites 配置确实没有提供类似 proxySetHeader 的直接配置项，你可以通过以下两种方案实现类似 Nginx proxy_add_header 的功能：

方案一：用API路由手动实现代理 #

放弃 next.config.js 中的 rewrites，创建自定义API路由来处理转发并注入请求头：

Pages Router 实现 #

在 pages/api/[...path].js 中编写：

import { createProxyMiddleware } from 'http-proxy-middleware';

// 禁用Next.js自动解析请求体，让代理处理
export const config = {
  api: {
    bodyParser: false,
    externalResolver: true,
  },
};

const proxy = createProxyMiddleware({
  target: 'https://my-backend-host',
  changeOrigin: true,
  // 注入自定义请求头
  onProxyReq: (proxyReq) => {
    proxyReq.setHeader('my-env-var', process.env.MY_ENV_VAR);
  },
});

export default proxy;

App Router 实现 #

在 app/api/[...path]/route.js 中编写：

import { NextResponse } from 'next/server';
import { createProxyMiddleware } from 'http-proxy-middleware';
import { createServer } from 'http';

const proxy = createProxyMiddleware({
  target: 'https://my-backend-host',
  changeOrigin: true,
  onProxyReq: (proxyReq) => {
    proxyReq.setHeader('my-env-var', process.env.MY_ENV_VAR);
  },
});

const proxyServer = createServer((req, res) => proxy(req, res));

// 处理GET请求
export async function GET(request) {
  return new Promise((resolve) => {
    proxyServer.emit('request', request, new NextResponse(), () => {
      resolve(NextResponse.next());
    });
  });
}

// 按需处理POST/PUT/DELETE等其他方法
export async function POST(request) {
  return new Promise((resolve) => {
    proxyServer.emit('request', request, new NextResponse(), () => {
      resolve(NextResponse.next());
    });
  });
}

依赖安装：

npm install http-proxy-middleware
# 或
yarn add http-proxy-middleware

方案二：Middleware + Rewrites 组合使用 #

如果想保留 rewrites 配置，可通过 Middleware 在转发前注入请求头：

1. 创建 middleware.js 文件：

import { NextResponse } from 'next/server';

export function middleware(request) {
  // 仅对/api路径的请求添加头
  if (request.nextUrl.pathname.startsWith('/api')) {
    const modifiedHeaders = new Headers(request.headers);
    modifiedHeaders.set('my-env-var', process.env.MY_ENV_VAR);
    
    return NextResponse.next({
      request: { headers: modifiedHeaders },
    });
  }
  return NextResponse.next();
}

// 指定匹配/api下的所有路径
export const config = {
  matcher: '/api/:path*',
};

2. 保留原 next.config.js 中的 rewrites 配置不变：

async rewrites() {
  return [
    {
      source: '/api/:path*',
      destination: 'https://my-backend-host/:path*'
    }
  ]
}

这种方式会在请求进入 rewrites 转发流程前，通过 Middleware 为请求添加自定义头，再转发到后端服务。

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