NextJS13服务端组件在Vercel部署时如何切换Fetch请求主机名？

下面是几个实用的方案，不用折腾复杂配置就能搞定：

方案1：利用Vercel默认环境变量+本地配置 #

Vercel部署时会自动给项目注入VERCEL_URL环境变量，值就是部署后的域名（比如your-pj-and-git-branch.vercel.app）。本地开发时，在项目根目录创建.env.local文件，手动定义这个变量：

VERCEL_URL=localhost:3000

然后在服务端组件里这样写fetch：

// 根据环境拼接基础URL
const baseUrl = process.env.VERCEL_URL 
  ? `https://${process.env.VERCEL_URL}` 
  : 'http://localhost:3000';

// 发起请求
const res = await fetch(`${baseUrl}/api/test`);

注：Vercel的VERCEL_URL不带协议头，所以部署环境要加https://，本地用http://。

方案2：直接获取当前请求的主机名（推荐） #

在Next.js 13的服务端组件里，可以通过next/headers提供的headers()函数拿到当前请求的host头，这样不管是本地还是任何部署环境，都自动用当前的主机名，完全不用配置环境变量：

import { headers } from 'next/headers';

async function YourServerComponent() {
  const host = headers().get('host');
  // 开发环境用http，生产环境用https
  const baseUrl = process.env.NODE_ENV === 'development' 
    ? `http://${host}` 
    : `https://${host}`;

  const res = await fetch(`${baseUrl}/api/test`);
  // 处理响应逻辑...
}

这个方案特别适合调用同域名下的Next.js API路由，完全不用关心部署环境的域名变化。

方案3：自定义全局环境变量 #

如果需要更灵活的配置（比如API域名和前端域名不同），可以自定义一个环境变量：

1. 本地根目录创建.env.local，添加：

NEXT_PUBLIC_API_BASE_URL=http://localhost:3000

2. 登录Vercel控制台，找到你的项目，进入「Settings」→「Environment Variables」，给每个分支添加对应的变量值，比如分支环境填https://your-pj-and-git-branch.vercel.app。

然后代码里直接用这个变量：

const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/test`);

内容的提问来源于stack exchange，提问作者Keisuke Nagakawa 永川 圭介