Next.js部署Netlify构建时调用API报错，求解决方案

核心问题本质 #

• getStaticProps/getStaticPaths在Netlify构建阶段是在Node.js环境中执行的，此时线上API还未部署完成，无论请求本地localhost:3000还是线上URL都会失败。
• Node.js环境下的fetch不支持相对路径，必须传入完整URL，这也是你用/api/projects/报错的原因。

最优解决方案：直接调用业务逻辑而非HTTP请求 #

既然你的技术栈包含Mongoose和Next.js API，说明API的核心逻辑是和数据库交互的代码，完全没必要通过HTTP请求绕路，直接在静态生成函数里调用底层逻辑即可。

具体步骤示例 #

1. 抽离API核心逻辑到独立文件
   创建lib/projects.js，把pages/api/projects.js里的数据库操作逻辑单独拿出来：

// lib/projects.js
import mongoose from 'mongoose';

// 定义Mongoose模型（如果已有模型可直接导入）
const Project = mongoose.models.Project || mongoose.model('Project', new mongoose.Schema({
  title: String,
  description: String
  // 你的其他字段
}));

// 封装数据库查询逻辑
export const fetchProjects = async () => {
  // 确保Mongoose已连接（可把连接逻辑抽去lib/db.js复用）
  if (!mongoose.connections[0].readyState) {
    await mongoose.connect(process.env.MONGODB_URI);
  }
  
  return await Project.find({});
};

2. 在API路由中复用该逻辑
   修改pages/api/projects.js，让它调用抽离后的函数：

// pages/api/projects.js
import { fetchProjects } from '../../lib/projects';

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

3. 在getStaticProps中直接调用逻辑
   不再使用fetch，直接调用封装好的数据库查询函数：

// 示例：pages/index.js
import { fetchProjects } from '../lib/projects';

export const getStaticProps = async () => {
  const projects = await fetchProjects();
  
  return {
    props: { projects },
    revalidate: 86400 // 可选：开启增量静态再生，自动更新页面
  };
};

方案优势 #

• 构建阶段直接与数据库交互，完全避开了对未部署API的依赖，从根源解决连接失败问题。
• 代码复用性强，API路由和静态生成逻辑共用一套业务代码，避免重复编写。
• 性能更优，省去了HTTP请求的额外开销。

额外注意事项 #

• 确保在Netlify的环境变量中配置好MONGODB_URI，和本地开发时的配置一致。
• Mongoose连接逻辑要做判断，避免构建过程中重复创建连接。
• 如果需要后续更新数据无需全量重新部署，可通过revalidate参数开启增量静态再生。

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