Getting build error occurred when running npm run build [duplicate] - next.js

Question

This question already has an answer here:
Fetch error when building Next.js static website in production
(1 answer)
Closed 12 months ago.
The app fetches data from local Javascript file via an api. Here is below the error and code.
$ npm run build
next-crash-course#0.1.0 build
next build && next export
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist#latest --update-db
info - Creating an optimized production build
info - Compiled successfully
Build error occurred
FetchError: request to http://localhost:3000/api/articles failed, reason: connect ECONNREFUSED 127.0.0.1:3000
at ClientRequest. (C:\WebTest_NextJS(Brad Traversy)\pr1\node_modules\node-fetch\lib\index.js:1461:11)
at ClientRequest.emit (node:events:369:20)
at Socket.socketErrorListener (node:_http_client:462:9)
at Socket.emit (node:events:369:20)
at emitErrorNT (node:internal/streams/destroy:188:8)
at emitErrorCloseNT (node:internal/streams/destroy:153:3)
at processTicksAndRejections (node:internal/process/task_queues:81:21) {
type: 'system',
errno: 'ECONNREFUSED',
code: 'ECONNREFUSED'
}
info - Collecting page data .npm ERR! code 1
npm ERR! path C:\Test_NextJS\pr1
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c next build && next export
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\MH1\AppData\Local\npm-cache_logs\2021-05-21T02_51_47_465Z-debug.log
NOTE: in the dev mode everything work fine.
Code link: https://github.com/bradtraversy/next-crash-course

Answer 1

When we are building with "next export" it will try to invoke the call to fetch the data Pages/index.js line 13. In Config/index.js it is expecting the API server is hosted somewhere "https://yourwebsite.com". As a workaround,
Modify "https://yourwebsite.com" to "http://localhost:3000" inside Config/index.js
Open one terminal and start "npm run dev"
Open 2nd terminal and execute "npm run build". As the API is running in localhost:3000, it will build properly.
Config/index.js
const dev = process.env.NODE_ENV !== 'production'
export const server = dev ? 'http://localhost:3000' : 'https://yourwebsite.com'
Pages/index.js
export const getStaticProps = async () => {
const res = await fetch(`${server}/api/articles`)
const articles = await res.json()
return {
props: {
articles,
},
}
}
URL: https://nextjs.org/docs/advanced-features/static-html-export
Browse the link in any browser. Example: http://localhost:3000/about