1

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

juliomalves
  • 42,130
  • 20
  • 150
  • 146
muhuss
  • 11
  • 1
  • 3

1 Answers1

0

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,

  1. Modify "https://yourwebsite.com" to "http://localhost:3000" inside Config/index.js
  2. Open one terminal and start "npm run dev"
  3. 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,
    },
  }
}

enter image description here

URL: https://nextjs.org/docs/advanced-features/static-html-export

enter image description here

Browse the link in any browser. Example: http://localhost:3000/about

enter image description here

Viswanatha Swamy
  • 699
  • 1
  • 10
  • 17
  • Error occurred prerendering page "/about". Read more: https://err.sh/next.js/prerender-error Error: Cannot find module for page: /about – muhuss May 21 '21 at 11:48
  • Where are you seeing this error? Could you please update your original query with the details and screen prints? – Viswanatha Swamy May 21 '21 at 12:10
  • If it throws the prerendering error. Please browse that url in your browser. Example: for "/about", Open a browser and navigate to "http://localhost:3000/about". Then run "npm run build". If you get any other pre-render error, please do visit that end point. I have attached a new Image. Please review. – Viswanatha Swamy May 21 '21 at 17:13
  • Thank you very much Viswanatha for your help on NextJS building static pages problem resolution , WOW, Cheer! – muhuss May 21 '21 at 18:17