Next.js本地运行正常但Vercel部署出现Only absolute URLs构建错误

开发者阿泽

2026-10-5

错误原因

Vercel 平台的 NEXT_PUBLIC_VERCEL_URL 环境变量仅在部署完成后的运行时可用，构建阶段执行next build时该变量未生成，因此你的API_URL在构建时取值为undefined，拼接后的请求地址为undefined/api/hello，不属于合法的绝对URL，触发fetch报错。
getStaticProps 运行在服务端，你无需通过HTTP请求调用同项目的API路由获取数据，这种写法本身属于不必要的绕路，也是触发本次环境变量问题的根因之一。
你的代码存在配置错误：revalidate 配置项需要和props平级，你当前写在props内部，增量静态再生的配置不会生效。

解决方案

最优方案：直接复用业务逻辑，省略HTTP请求

把pages/api/hello.js中的业务逻辑抽离为独立的公共函数，getStaticProps中直接调用该函数获取数据，完全避免网络请求和URL相关问题：

// 示例：抽离的公共逻辑 functions/getHelloData.js
export default async function getHelloData() {
  // 这里写原api/hello接口里的逻辑
  return { name: 'John Doe' }
}

// pages/index.js中调用
import getHelloData from 'functions/getHelloData'

export const getStaticProps = async () => {
  const data = await getHelloData()
  return {
    props: {
      data
    },
    revalidate: 1
  }
}

备选方案：修复环境变量配置

如果你必须保留HTTP请求的写法，需要修正API_URL的拼接逻辑，补充协议头：

// config/index.js
export const API_URL = process.env.NEXT_PUBLIC_VERCEL_URL 
  ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}` 
  : 'http://localhost:3000'

同时需要在Vercel项目的环境变量配置页，添加构建阶段可用的VERCEL_URL变量，确保构建时可以拿到域名值。