Next.js使用内部API路径报错，如何替代硬编码完整URL？

在getStaticProps中直接用相对路径/api/hello调用内部API会报错，原因是这个函数在服务器端构建阶段运行，没有浏览器环境的基础URL上下文，fetch无法解析相对路径。以下是两种更优的替代方案：

方案一：直接调用API路由的业务逻辑（推荐） #

不用通过HTTP请求，直接复用API路由里的处理逻辑，既避免URL解析问题，又提升性能。

1. 先把API的核心逻辑抽离到单独的文件（比如lib/api/hello.js）：

// lib/api/hello.js
export async function getHelloData() {
  // 这里写原本在API路由里的业务逻辑，比如从数据库取数据
  return { name: 'John Doe' };
}

2. 在API路由文件中引入这个函数：

// pages/api/hello.js
import { getHelloData } from '../../lib/api/hello';

export default async function handler(req, res) {
  const data = await getHelloData();
  res.status(200).json(data);
}

3. 在页面的getStaticProps中直接调用这个抽离的函数：

// pages/index.js
import { getHelloData } from '../lib/api/hello';

export async function getStaticProps() {
  const data = await getHelloData();
  return {
    props: { data }
  };
}

export default function Home({ data }) {
  return <div>Hello {data.name}</div>;
}

方案二：通过环境变量拼接完整URL #

如果必须用fetch请求，可以通过环境变量动态获取基础URL，避免硬编码。

1. 在项目根目录创建.env.local文件（开发环境）：

NEXT_PUBLIC_BASE_URL=http://localhost:3000

生产环境部署时，将NEXT_PUBLIC_BASE_URL设置为你的实际域名（比如https://yourdomain.com）。

2. 在getStaticProps中使用环境变量拼接URL：

export async function getStaticProps() {
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
  const res = await fetch(`${baseUrl}/api/hello`);
  const data = await res.json();
  
  return {
    props: { data }
  };
}

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