Next.js中如何配置代理地址

在Next.js 13中，有两种方式来配置服务端代理地址，这两种方法都适用于App Router和Page Router两种模式的应用。

在next.config.js中配置

这种方式是官方文档推荐的常规做法，通过config中的rewrites字段来重写地址，具体配置如下

rewrites() {
		return {
			beforeFiles: [
				{
					source: '/api/:path*',
					destination: `${process.env.SERVER_URL}/api/:path*`
				}
			]
		}
	},

rewrites函数的返回对象有三个字段 beforeFiles afterFiles fallback，分别代表三个验证重写的时机：

• beforeFiles 表示重写将在读取有无相应pages和public文件之前执行，因此可以覆盖页面的请求。
• afterFiles 在获取pages/public之后，校验动态路由之前执行。
• fallback 在获取pages/public和校验动态路由之前执行。

需要注意的是，rewrites函数是在执行next build的时候执行，如果在配置中使用了环境变量，将会在执行构建操作的时候填入当前指定的NODE_ENV对应的环境变量的值。

在实际使用中，我们通常期望一个镜像可以在多个环境中运行，这就需要支持在容器运行时通过环境变量来确定服务代理地址，使用rewrites来配置代理将无法支持。

配置middleware.ts文件自定义代理

middleware可以拦截matcher配置匹配的请求，并可以使用NextResponse对请求进行操控。

在和app或pages目录同层级声明middleware.(t|j)s文件:

import { NextRequest, NextResponse } from 'next/server';

// 代理/api/开头的请求
export function middleware(request: NextRequest) {
  return NextResponse.rewrite(
    new URL(`${process.env.SERVER_URL}${request.nextUrl.pathname}${request.nextUrl.search}`),
    { request },
  );
}

export const config = {
  matcher: ['/api/:path*'],
};

通过已上配置，在每一次有/api/:path请求的时候，都会进入middleware函数，这时候读取的环境变量process.env.SERVER_URL就是运行时的环境变量了。