Next.js 13 Server Component如何动态获取Base URL调用内部API？

1. 直接调用API路由的处理函数（最推荐） #

Server Component运行在服务端，完全没必要走HTTP请求调用pages/api里的接口，直接导入对应API文件的处理函数执行即可，彻底绕开Base URL的问题，还能减少额外的网络开销。

示例代码：

// app/page.js（Server Component）
// 导入pages/api里的handler函数
import { handler as getUserHandler } from '../pages/api/user';

async function Page() {
  // 根据API的需求构造模拟的req和res对象
  const mockReq = { method: 'GET', query: { id: '123' } };
  const mockRes = {
    json: (data) => data,
    status: (code) => ({ json: (data) => ({ statusCode: code, data }) })
  };

  // 直接调用API处理函数获取数据
  const userData = await getUserHandler(mockReq, mockRes);
  return <div>用户信息：{JSON.stringify(userData)}</div>;
}

export default Page;

2. 通过headers()函数动态获取域名 #

在Server Component中可以使用Next.js提供的headers()工具（来自next/headers），从请求头里拿到当前域名，再拼接协议生成Base URL。

示例代码：

// app/page.js（Server Component）
import { headers } from 'next/headers';

async function Page() {
  const headersList = headers();
  const host = headersList.get('host');
  // 根据环境判断协议，生产环境用https，开发环境用http
  const protocol = process.env.NODE_ENV === 'production' ? 'https' : 'http';
  const baseUrl = `${protocol}://${host}`;

  // 用拼接好的Base URL调用API
  const res = await fetch(`${baseUrl}/api/user`);
  const userData = await res.json();
  return <div>用户信息：{JSON.stringify(userData)}</div>;
}

export default Page;

注意：这个方法不支持静态生成（SSG）场景，因为静态页面构建时没有实际的请求上下文，headers()拿不到host。如果要结合generateStaticParams，更推荐第一种方法。

3. 自动生成环境变量（优化手动配置） #

如果还是倾向用环境变量，可以在next.config.js里根据当前环境自动设置Base URL，不用手动逐个环境修改：

// next.config.js
module.exports = {
  env: {
    BASE_URL: process.env.NODE_ENV === 'production' 
      ? 'https://你的生产域名.com' 
      : 'http://localhost:3000',
  },
};

之后在Server Component里直接使用：

// app/page.js（Server Component）
async function Page() {
  const res = await fetch(`${process.env.BASE_URL}/api/user`);
  const userData = await res.json();
  return <div>用户信息：{JSON.stringify(userData)}</div>;
}

export default Page;

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