运行Next.js应用时出现TypeError: Only absolute URLs are supported错误的解决求助

这个错误的核心原因是你拼接的请求URL不是有效的绝对URL——大概率是process.env.API_BASE_URL没有被正确读取，导致最终的requestUrl变成了undefined加上路径（比如undefined/api/posts），自然不符合fetch要求的绝对URL规范。

下面是具体的排查和解决步骤：

1. 先确认环境变量是否被正确加载 #

首先在你的fetchAPI函数里加一行日志，看看实际生成的URL是什么：

export async function fetchAPI(path) {
  const requestUrl = getStrapiURL(path);
  console.log('Generated request URL:', requestUrl); // 打印出来看结果
  const response = await fetch(requestUrl);
  const data = await response.json();
  return data;
}

如果日志输出是类似undefined/xxx的内容，说明process.env.API_BASE_URL的值是undefined，接下来分两种场景处理：

场景A：在服务端上下文使用（比如getStaticProps、getServerSideProps、API路由） #

• 检查项目根目录的.env文件，确保变量名拼写正确：API_BASE_URL='http://localhost:3000'
• 重启你的Next.js开发服务器——环境变量修改后必须重启才能生效，这是很多人容易忽略的点
• 给getStrapiURL加个兜底值，避免环境变量未加载时出错：

  export function getStrapiURL(path = "") {
    // 兜底使用默认地址，防止环境变量读取失败
    const baseUrl = process.env.API_BASE_URL || 'http://localhost:3000';
    return `${baseUrl}${path}`;
  }
  

场景B：在客户端组件中调用fetchAPI #

Next.js默认不会把没有NEXT_PUBLIC_前缀的环境变量暴露给浏览器端代码，所以如果你的fetchAPI是在客户端组件（比如页面组件、普通组件）里调用的：

• 修改.env里的变量名，加上前缀：NEXT_PUBLIC_API_BASE_URL='http://localhost:3000'
• 同步修改代码里的变量引用：

  export function getStrapiURL(path = "") {
    const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3000';
    return `${baseUrl}${path}`;
  }
  

• 同样需要重启开发服务器让新的环境变量生效

2. 额外检查点 #

• 确保你的.env文件没有被误删或覆盖，且符合Next.js的环境变量文件命名规则（比如.env.local用于本地开发，.env.production用于生产环境）
• 如果是部署到生产环境，确认平台（比如Vercel、Netlify）的环境变量已经正确配置，且变量名和代码里的引用完全一致

内容的提问来源于stack exchange，提问作者Aswin.S