Next.js生产环境页面数据收集失败问题排查与解决求助

核心问题 #

开发环境下API可正常运行，但生产环境（含Vercel部署）出现data未定义或Failed to collect page data错误，根源是**getStaticPaths/getStaticProps中调用了指向localhost:3000的API**——在Vercel等生产环境构建阶段，服务尚未启动，localhost地址无法访问，导致Axios连接被拒绝。

错误原因 #

当前.env配置的API地址硬编码为本地开发地址：

MONGODB_URI=mongodb+srv://username:pass@clustername.v0a9z1l.mongodb.net/?retryWrites=true&w=majority

NEXT_PUBLIC_API_URL_SCHEDULE=https://localhost:3000/api/allSchedules
NEXT_PUBLIC_API_URL_SKILLS=https://localhost:3000/api/getAllSkills
NEXT_PUBLIC_API_BASE_URL=https://localhost:3000

getStaticPaths属于构建阶段执行的服务器端代码，此时生产环境的服务还未启动，无法通过localhost访问自身API，因此触发ECONNREFUSED错误。

正确实现方案 #

方案1：直接调用数据模型（推荐） #

跳过HTTP API层，在getStaticPaths中直接连接数据库或调用数据处理逻辑，彻底规避环境地址问题，同时减少请求开销。

修改getSchedules函数，直接操作MongoDB（以Mongoose为例）：

// 假设已定义Schedule数据模型
import Schedule from '../models/Schedule';
import mongoose from 'mongoose';

export const getSchedules = async () => {
  // 确保数据库连接（未全局连接时执行）
  if (!mongoose.connections[0].readyState) {
    await mongoose.connect(process.env.MONGODB_URI as string);
  }
  // 直接从数据库查询所需数据
  const schedules = await Schedule.find({}, 'name');
  return schedules.map(item => ({ name: item.name }));
};

方案2：动态切换API地址（仅适用于必须通过API访问的场景） #

若必须通过API获取数据，需根据运行环境动态切换API地址，避免硬编码localhost：

1. 更新.env配置，区分开发/生产环境地址：

# 开发环境API地址
DEV_API_URL_SCHEDULE=http://localhost:3000/api/allSchedules
# 生产环境API地址（替换为你的Vercel域名）
PROD_API_URL_SCHEDULE=https://your-vercel-project.vercel.app/api/allSchedules

2. 修改getSchedules函数，根据环境选择地址：

import axios from "axios";

export const getSchedules = async () => {
  const apiUrl = process.env.NODE_ENV === 'production' 
    ? process.env.PROD_API_URL_SCHEDULE 
    : process.env.DEV_API_URL_SCHEDULE;

  if (!apiUrl) {
    throw new Error('API地址未配置');
  }

  const res = await axios.get(apiUrl);
  return res.data;
};

注意：Vercel构建阶段使用自身域名时，需确保API已提前部署完成，否则仍可能出现连接失败，因此方案1始终是最优选择。

额外优化点 #

• 移除NEXT_PUBLIC_前缀：getStaticPaths在构建/服务器端运行，无需使用NEXT_PUBLIC_暴露环境变量，直接使用普通变量即可，避免前端敏感信息泄露。
• 添加错误捕获：在getStaticPaths中增加错误处理，防止构建失败：

export async function getStaticPaths() {
  try {
    const data = await getSchedules();
    const paths = data.map((item: any) => ({
      params: {
        schedule_name: item.name.toString(),
      },
    }));
    return { paths, fallback: false };
  } catch (error) {
    console.error('生成静态路径失败:', error);
    // 构建失败时返回空路径，或根据业务调整fallback策略
    return { paths: [], fallback: 'blocking' };
  }
}

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