为何Next.js的getStaticProps调用API路由需带localhost:3000？

• 核心原因是getStaticProps是在服务器端（构建阶段）执行的，并非浏览器前端环境。
• 当你用axios.get("/api/tv/popular")这类相对路径时，Node.js的HTTP客户端没有默认的主机地址（比如localhost:3000）作为请求基础，它无法识别这个相对路径该指向哪个服务器，因此请求会失败。
• 而使用完整的http://localhost:3000/api/tv/popular时，明确指定了请求的目标服务器地址，自然能正常发起请求。

另外推荐一个更优的方案：不用通过HTTP请求调用自身的API路由，直接导入API路由里的逻辑函数来获取数据。这样既省去了HTTP请求的开销，也不用纠结路径问题。

举个简单例子：

// pages/api/tv/popular.js
// 把数据获取逻辑抽成独立函数
export async function getPopularTV() {
  // 这里写原本的业务逻辑，比如调用第三方影视API
  const res = await fetch('https://第三方影视API地址/tv/popular');
  return res.json();
}

// 原API路由的handler
export default async function handler(req, res) {
  const data = await getPopularTV();
  res.status(200).json(data);
}

然后在页面的getStaticProps里直接调用这个函数：

// pages/tv.js
import { getPopularTV } from './api/tv/popular';

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

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