如何在Next.js的getStaticPaths中获取宿主URL以获取数据？

方案1：直接调用API核心逻辑（推荐） #

getStaticPaths在构建阶段（或增量静态再生时）运行，无需通过HTTP请求调用自身API路由，直接导入API路由里的数据处理核心函数即可，彻底绕开宿主URL的依赖。

实现步骤：

1. 将API路由的核心逻辑抽离到独立文件（比如lib/data.js）：

// lib/data.js
export async function fetchPosts() {
  // 这里写原本在/api/data中的数据获取逻辑，比如从数据库/第三方接口拉取数据
  const response = await fetch("实际数据源地址");
  return response.json();
}

2. 在API路由中复用该函数：

// pages/api/data.js
import { fetchPosts } from "../../lib/data";

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

3. 在getStaticPaths中直接调用核心函数：

import { fetchPosts } from "../lib/data";

export async function getStaticPaths() {
  const posts = await fetchPosts();

  const paths = posts.map((post) => ({
    params: { id: post.id },
  }));

  return { paths, fallback: false };
}

方案2：利用环境变量适配多环境 #

如果必须通过HTTP请求调用API，可以结合环境变量和Vercel系统变量动态获取宿主URL：

1. 本地开发环境：在.env.local中配置基础URL

# .env.local
NEXT_PUBLIC_BASE_URL=http://localhost:3000

2. Vercel部署场景：Vercel会自动提供VERCEL_URL系统变量，对应部署后的随机测试域名
3. 在getStaticPaths中拼接完整URL：

export async function getStaticPaths() {
  // 根据环境自动切换基础URL
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || `https://${process.env.VERCEL_URL}`;
  const res = await fetch(`${baseUrl}/api/data`);
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id },
  }));

  return { paths, fallback: false };
}

注意：Vercel的VERCEL_URL变量不包含协议，需要手动拼接https://。

方案3：增量静态再生（ISR）适配动态场景 #

如果动态路由需要频繁更新，可以开启增量静态再生，在getStaticProps中获取宿主URL，同时在getStaticPaths中返回少量默认路径，剩余路径在用户访问时动态生成：

export async function getStaticPaths() {
  // 返回空数组或少量默认路径，开启阻塞式 fallback
  return { paths: [], fallback: "blocking" };
}

export async function getStaticProps({ params, req }) {
  // 这里可像getServerSideProps一样获取宿主URL
  const apiUrl = `${req.protocol}://${req.headers.host}/api/data/${params.id}`;
  const res = await fetch(apiUrl);
  const post = await res.json();

  return {
    props: { post },
    revalidate: 60, // 每60秒自动重新生成页面
  };
}

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