Next.js执行npm run build时报localhost:3000/api连接被拒绝错误

错误原因 #

这个报错的核心逻辑是：Next.js执行npm run build时，会在构建阶段执行页面的预渲染逻辑（比如getStaticProps方法），此时你在预渲染逻辑中调用了http://localhost:3000/api/articles接口，但构建阶段本地的Next.js服务并没有启动，所以会抛出连接被拒绝的错误。
你参考的教程里这种调用本地API拿数据的写法，只适合开发阶段调试，不符合生产构建的要求。

解决方案 #

最优方案：直接导入本地数据文件 #

你的API接口本身就是从本地JS/JSON文件读取数据，完全可以跳过API网络请求，在getStaticProps里直接导入数据文件即可：

// 原来的写法，不推荐
export async function getStaticProps() {
  const res = await fetch('http://localhost:3000/api/articles')
  const articles = await res.json()
  return { props: { articles } }
}

// 优化后的写法
import articles from '../data/articles.js' // 替换成你实际的数据文件路径
export async function getStaticProps() {
  return { props: { articles } }
}

备选方案：抽离公共数据获取逻辑 #

如果后续你可能会把数据换成远端接口，想保留逻辑复用性，可以把数据获取逻辑单独抽成公共方法，API路由和预渲染逻辑都调用同一个方法，避免本地网络请求：

1. 新建lib/getArticles.js文件，写公共逻辑：

// lib/getArticles.js
import articles from '../data/articles.js'
export default function getArticles() {
  // 这里可以加后续的过滤、排序等逻辑，两边共用
  return articles
}

2. API路由里调用这个方法返回结果：

// pages/api/articles.js
import getArticles from '../../lib/getArticles'
export default function handler(req, res) {
  res.status(200).json(getArticles())
}

3. 页面的getStaticProps里也直接调用这个方法：

import getArticles from '../lib/getArticles'
export async function getStaticProps() {
  const articles = getArticles()
  return { props: { articles } }
}

额外注意事项 #

你当前的构建命令包含next export，这个命令是用来导出纯静态站点的，导出的静态站点不支持Next.js的API路由功能，API路由只有在Next.js服务运行时才会生效，所以如果要做静态导出，绝对不能在预渲染逻辑或前端代码里调用本地API接口。

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