Next.js执行npm run build报错ECONNREFUSED 127.0.0.1:3000求助
问题根因
报错核心原因是Next.js执行npm run build时,会触发页面预渲染逻辑,自动执行getServerSideProps内的代码,但此时你本地的3000端口并没有启动Next.js开发服务,所以请求http://localhost:3000/api/xxx直接被拒绝。而本地执行npm run dev时服务本身运行在3000端口,所以请求能正常响应。
修复方案
- 方案1:直接调用业务逻辑,跳过HTTP请求(最优)
你项目里的/api/admin/user/users/list本身就是Next.js内置的API路由,直接把这个接口对应的业务逻辑代码抽成公共函数,在getServerSideProps里直接调用函数拿数据即可,既解决报错还能减少不必要的HTTP请求,提升性能。
// 示例:抽离公共逻辑 // src/utils/userService.js export const getUserList = async (params) => { // 把原/api/admin/user/users/list接口内的查询数据库、处理数据逻辑直接搬过来 const res = await db.query('xxx', params.InitialSkip, params.initialLimit) return res } // 页面内修改getServerSideProps import { getUserList } from '@/utils/userService' export const getServerSideProps = async () => { const additionalData = { InitialSkip: 0, initialLimit: 3, }; // 直接调用逻辑,不发起HTTP请求 const data = await getUserList(additionalData) return { props: { data: data, }, }; };
- 方案2:用环境变量动态适配接口域名
如果确实需要走HTTP请求,不要固定写死localhost:3000,把请求域名做成环境变量,不同环境对应不同的接口地址:
# .env.local 本地开发环境配置 NEXT_PUBLIC_API_BASE_URL = 'http://localhost:3000' # .env.production 生产环境配置 NEXT_PUBLIC_API_BASE_URL = '你的线上正式接口域名'
// getServerSideProps内修改请求地址 const response = await axios.post( `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/admin/user/users/list`, additionalData, { headers: { "Content-Type": "application/json", }, } );
- 方案3:关闭build阶段预渲染
如果页面不需要预渲染,每次请求都要实时拉取最新数据,可以给页面添加动态渲染配置,build阶段就不会执行getServerSideProps逻辑:
// 在页面组件代码顶部添加 export const dynamic = 'force-dynamic'
内容的提问来源于stack exchange,提问作者node Dev
相关产品推荐
相关产品推荐

