在Vercel部署Next.js网站时如何获取绝对URL？

核心解决方案：动态获取环境对应的绝对URL #

getStaticPaths/getStaticProps在构建阶段运行（本地或Vercel云端），无法直接使用相对路径，必须根据环境动态生成正确的绝对URL，可借助Next.js环境变量和Vercel自动提供的变量实现：

1. 编写基础URL获取函数 #

创建复用函数判断当前环境，返回对应基础URL：

const getBaseUrl = () => {
  // 开发环境直接使用本地地址
  if (process.env.NODE_ENV === 'development') {
    return 'http://localhost:3000';
  }
  // Vercel部署时自动注入VERCEL_URL变量，格式为xxx.vercel.app
  return `https://${process.env.VERCEL_URL}`;
};

2. 在getStaticPaths中拼接API路径 #

修改数据获取逻辑，用上述函数生成完整API地址：

export async function getStaticPaths() {
  const baseUrl = getBaseUrl();
  // 替换为你的实际API路由，比如/api/fetch-data
  const res = await fetch(`${baseUrl}/api/fetch-data`);
  
  if (!res.ok) {
    throw new Error('API数据获取失败');
  }
  
  const data = await res.json();
  
  // 根据业务逻辑生成页面路径
  const paths = data.map(item => ({
    params: { id: item.id.toString() }
  }));

  return { paths, fallback: false };
}

3. 自定义域名适配（可选） #

如果使用自定义域名，可在Vercel项目的环境变量中添加NEXT_PUBLIC_BASE_URL，值为你的自定义域名（如https://yourdomain.com），再修改getBaseUrl函数：

const getBaseUrl = () => {
  if (process.env.NODE_ENV === 'development') {
    return 'http://localhost:3000';
  }
  // 优先使用自定义域名变量，无则用Vercel默认地址
  return process.env.NEXT_PUBLIC_BASE_URL || `https://${process.env.VERCEL_URL}`;
};

关键注意事项 #

• getStaticPaths运行在构建阶段而非浏览器端，相对路径无法被解析，必须使用绝对路径。
• 查看Vercel构建日志，确认VERCEL_URL变量是否正常注入（Vercel会自动为部署项目添加该变量）。
• 本地测试时，确保.env.local文件未覆盖VERCEL_URL变量，避免开发环境路径错乱。

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