Next.js能否替代Nginx实现反向代理功能？

结论 #

可以实现，Next.js原生支持反向代理能力，完全可以替代你给出的Nginx对应配置功能，以下是两种常用实现方案：

方案1：使用Rewrites配置（推荐，和原Nginx逻辑完全对齐） #

直接在项目根目录的next.config.js中添加重写规则即可，配置如下：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        // 匹配所有/api开头的请求
        source: '/api/:path*',
        // 自动去掉/api前缀，转发到配置的上游API服务器，请求参数、请求头、请求方法原样保留
        destination: `${process.env.NGINX_API_PROTO}://${process.env.NGINX_API_HOST}/:path*`,
      },
    ]
  },
}

module.exports = nextConfig

该方案和你原Nginx配置效果完全一致，不需要写额外业务代码，只需在部署环境配置对应的NGINX_API_PROTO、NGINX_API_HOST环境变量即可生效。

方案2：使用路由处理器/API路由（适合需要定制错误处理的场景） #

如果你需要实现原Nginx配置中api_json_errors.conf对应的统一JSON错误返回逻辑，可以用Next.js的路由能力手动处理转发：

App Router 实现

在项目app目录下新建api/[...path]/route.js文件，代码示例：

const UPSTREAM_API = `${process.env.NGINX_API_PROTO}://${process.env.NGINX_API_HOST}`

// 处理GET请求，其他请求方法可按照相同逻辑补充
export async function GET(request, { params }) {
  const requestPath = params.path.join('/')
  const queryString = new URL(request.url).search

  // 转发请求到上游服务器
  const upstreamRes = await fetch(`${UPSTREAM_API}/${requestPath}${queryString}`, {
    headers: request.headers,
    method: 'GET',
  })

  // 自定义错误返回格式，替代原Nginx的错误配置
  if (!upstreamRes.ok) {
    return Response.json({
      code: upstreamRes.status,
      message: '接口请求失败',
      data: null
    }, {
      status: upstreamRes.status
    })
  }

  const responseData = await upstreamRes.json()
  return Response.json(responseData)
}

Pages Router 实现

如果你的项目用的是Pages Router，在pages/api目录下新建[...path].js文件即可，逻辑和上述代码基本一致。

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