在Vercel部署Next.js应用时如何解决ECONNREFUSED连接错误？

你碰到的ECONNREFUSED 127.0.0.1:3000错误，本质是对Next.js 构建执行机制的认知偏差：

• getStaticProps 只会在应用构建的阶段执行一次，产出静态化的页面内容，不会在用户访问应用时实时运行
• 本地开发环境下，next dev 会同时启动前端进程和API服务在3000端口，所以你fetch localhost地址可以正常连通
• 部署到线上（如Vercel）时，构建流程是独立的隔离沙箱环境，这个阶段根本没有启动完整的应用服务去监听3000端口，硬请求localhost的接口必然触发连接拒绝
• 单纯把请求URL改成Vercel分配的线上域名是行不通的：构建阶段应用还没完成部署上线，对应域名的服务还未启动，请求依然会失败

方案一：直接在getStaticProps中查询数据库，移除冗余的内部fetch请求 #

这是更推荐的生产环境实践：

• 完全消除不必要的内部网络请求开销，构建阶段直接通过Prisma连接数据库取数，比绕一圈请求自身API接口少一层网络跳转，构建速度更快
• 没有域名依赖的坑：只要配置好Prisma的数据库连接串环境变量，构建阶段即可直接访问数据库，不需要依赖线上域名的可用性
• 代码修改逻辑简单，直接把原API路由里的数据库查询逻辑平移到getStaticProps中即可：

// 改写后的 index.js getStaticProps
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

export async function getStaticProps() {
  // 直接查库，不需要发网络请求
  const projectList = await prisma.project.findMany()
  const skillList = await prisma.skill.findMany()

  return {
    props: {
      // 对齐原页面使用的字段结构
      projects: projectList,
      skills: skillList,
    }
  }
}

• 额外优化点：如果/api/projects/all、/api/skills/all没有其他客户端需要调用，可以直接删除这两个API路由，减少不必要的服务函数部署成本
• 适配提醒：如果你的数据库设置了访问IP白名单，需要把Vercel构建环境、运行环境的IP段加入白名单，否则会触发数据库连接失败

注意原有代码的结构问题：你之前的API接口返回的是包含projects、skills字段的对象，原fetch写法直接把整个响应对象赋值给数组变量，存在取值逻辑错误，改写时需要对齐前端页面实际消费的数据结构，避免出现页面数据渲染异常的问题。

方案二：保留API路由，调整数据获取逻辑 #

如果出于代码结构考虑必须保留API接口，不能直接在getStaticProps中查库：

• 不要硬编码任何环境的请求地址，通过环境变量动态拼接请求前缀，生产环境配置NEXT_PUBLIC_SITE_URL为你的线上域名
• 关键调整：把getStaticProps替换为getServerSideProps，因为getStaticProps在构建阶段运行时API服务还未启动，必然连不上接口；getServerSideProps是在服务运行时执行的，此时API服务已经正常监听，可以正常请求自身接口
• 不推荐该方案的原因：多了一层完全冗余的内部网络请求，还需要额外维护环境变量、调整数据获取时机，性能和可维护性都远不如直接查库的方案

• 不要尝试在getStaticProps中请求自身的API接口，哪怕配置了正确的线上域名，构建阶段应用还未部署完成，该请求100%会失败
• 个人项目优先选择构建时静态取数的方案，静态页面部署完成后不需要运行时连接数据库，安全风险更低

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