Error: Failed to collect page data in production in next.js

[humailsaleem123]

Summary

Basically APIs are working fine in dev mode. but when its come to production its give me an error that data is not defined or failed to collect page data. so, I guess my Apis are not working in getStaticPaths and getStaticProps. So,

what is the proper way to doing it ? how to resolve this issue ? and I tried also in VERCEL but its give me the same error. Can anybody please help me :(

Thanks In Advanced <3

ERROR:

- info Collecting page data .AxiosError: connect ECONNREFUSED ::1:3000
    at AxiosError.from (file:///E:/HUMAIL/NEXT.JS%20FOLDER/ROAD%20TO%20DEVELOPERS/road-to-developers/node_modules/axios/lib/core/AxiosError.js:89:14)

        _currentUrl: 'https://localhost:3000/api/allSchedules',
        [Symbol(kCapture)]: false
      },
      cause: Error: connect ECONNREFUSED ::1:3000
          at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16) {
        errno: -4078,
        code: 'ECONNREFUSED',
        syscall: 'connect',
        address: '::1',
        port: 3000
      }
    }
    Error: Failed to collect page data for /schedules/[schedule_name]

this is how am I doing:

this is env file:

MONGODB_URI=mongodb+srv://username:[email protected]/?retryWrites=true&w=majority
NEXT_PUBLIC_API_URL_SCHEDULE=https://localhost:3000/api/allSchedules
NEXT_PUBLIC_API_URL_SKILLS=https://localhost:3000/api/getAllSkills
NEXT_PUBLIC_API_BASE_URL=https://localhost:3000

this is my method:

export async function getStaticPaths() {


  const data = await getSchedules();



  const paths = await data.map((item: any) => ({

    params: {
      schedule_name: item.name.toString(),
    },

  }));

  return {

    paths,
    fallback: false

  }

}

getSchedule Function:

import axios from "axios";

export const getSchedules = async () => {


  const api_url: string | undefined = process.env.NEXT_PUBLIC_API_URL_SCHEDULE;

  const res = await axios.get(api_url as string);

  const data = await res.data;

  return data;


}

these methods are working perfectly fine in development mode but I don't know why is not running in production mode..

Additional information

No response

Example

No response

[icyJoseph]

I mean there's a few things here that raise some questions.

First, NEXT_PUBLIC_API_URL_SCHEDULE have you defined that in the Vercel Dashboard?

Second, https://localhost:3000/api/allSchedules this value, does it mean:

• That you have, locally, while developing a server (not the next.js server) running at 3000?
• Or, that you are trying to reach to <next.js-server>/api/allSchedules, that is an API route of your server, while building the app?

Both are in a way, making a big assumption, that the server that responds to https://localhost:3000/api/allSchedules is running during build time. In the second case, that's not gonna happen because you are first building the app, there's no server to handle such request.

There's a Vue based framework, called Nuxt, where they have a special function $fetch (not available in Next.js), which can reach for associated functions https://nuxt.com/docs/guide/concepts/server-engine#direct-api-calls, but I think it still wouldn't support your use case.

The solution here is to reach for the server with the data, from the build step. Because, during the build step there's no server to handle requests.

If https://localhost:3000/api/allSchedules is an external system, you'll have to make sure it is reachable by the Vercel Build Environment, by either making it public globally, or reachable with API keys or something like that.

If https://localhost:3000/api/allSchedules is a route of your Next.js server, well you are already on the server, you don't need to call yet another API, just get the data from there. Also this means that once you deploy your server, https://localhost:3000/api/allSchedules will be a publicly available route.

[humailsaleem123]

@icyJoseph, yes I define the environment variable in vercel all these .env values, then what is the proper way to doing it bro ? can you please help me

[icyJoseph]

The work you do in api/allSchedules, you should move into the getStaticProps function. First do that, then you can think of refactoring.

[humailsaleem123]

@icyJoseph thank u so much dude its now work properly <3

[SantiGaleazzi]

Hi everyone!

I've one issue when I try to build my Next.js app. This issue is coming from an axios request made on the getStaticPaths on a dynamic page. This is the route /products/[id].

My project has an internal API where I can get the data from, but for some reason when I use npm run build I get the following error:

AxiosError: connect ECONNREFUSED 127.0.0.1:80

17:55:17.520 | at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16) {
17:55:17.521 | port: 80,
17:55:17.521 | address: '127.0.0.1',
17:55:17.521 | syscall: 'connect',
17:55:17.521 | code: 'ECONNREFUSED',
17:55:17.521 | errno: -111,

Error: Failed to collect page data for /products/[id]

17:55:17.540 | at /vercel/path0/node_modules/next/dist/build/utils.js:1158:15
17:55:17.540 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
17:55:17.540 | type: 'Error'
17:55:17.545 | }

Here is what inside my Page:

export async function getStaticPaths() {
	const { data } = await axios.get('/api/products/store')

	return {
		fallback: false,
		paths: data?.map(product => ({
			params: { id: product._id },
		})),
	}
}

export async function getStaticProps({ params }) {
	const { data } = await axios.get(`/api/products/${params.id}`)

	return {
		props: {
			product: data,
		},
	}
}```

[humailsaleem123]

@SantiGaleazzi You can't Directly call an Api, just make another folder on the root name 'utils' and make the function and implement this functionality on it,
and also don't call the an Api, because its server-less, you can directly call the database there and then just call this function in getStaticPaths, then error will be gone.

I given you an example so, you can understand correctly.
let suppose you have to get all the products, make the file in util like getAllProducts.tsx /jsx
and in this function:

import { connectToDatabase } from './dbCon';

export async function getAllProducts() {

  const db = await connectToDatabase();
  const collection = db.collection('products');
  const data= await collection.find({}).toArray();
  return data;

}

then you can call this function in the getStaticPaths
and the error will be gone, this is called serverless, you dont need to call the api in getStaticPaths or getStaticProps.

[karimessouabni]

I Had the same problem. I was using bash. I switched to zsh and it worked

[samunplugged]

I had the same problem. In my case, DB connection was being made. If you are doing createClient, move the call to within a function instead of invoking the function prior.

[priyanshuwks]

I also face the same issue "unable to get the page data for /api/getUser". The solution to this is to perform prisma generate before each build. Full blog for this is in below link. Please do checkout.

https://pris.ly/d/vercel-build

[asuh]

Thank you for this, it wasn't clear that "prisma generate" command was needed for every build of next.js. Adding that to the build command fixed this issue for me.

"build": "prisma generate && next build",

[Consoling]

It worked for me thanks a lot and i guess this is the only solution if anyone using prisma

[EmmanuelKD]

If you are facing same issue when using prisma and deploying on vercel, this is your solution, override the build script.

[reginpv]

This is the solution, in project settings you need to override the build and add prisma generate like so:

"build": "prisma generate && next build",

Thank you @asuh !

I have another build that uses the same stack and the only difference is my Postgres is on Neon and I don't need to do this.