CODEWITHSUNDEEP
reactjsnext.js
vivek kn
vivek kn

Reputation: 265

Failed to load resource: the server responded with a status of 500 () in when deployed to vercel next js

i am using next js and i added getServerSideProps to my project and when i redeployed my project to vercel i am getting the flowing error but my localhost is woeking perfectly

enter image description here

i am using next js and i added getServerSideProps to my project and when i redeployed my project to vercel i am getting the flowing error but my localhost is woeking perfectly

enter image description here

export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://ask-over.herokuapp.com/questapi`);
  const data = await res.json();
  // console.log(data);
  // Pass data to the page via props
  return { props: { data } };
}

module.exports = {
  reactStrictMode: true,
}

enter image description here

enter image description here

Upvotes: 6

Views: 6042

Answers (1)

bcstryker
bcstryker

Reputation: 521

This is the result of an async call not completing before the next line of code that uses that variable runs. This can happen randomly because that is the nature of async code. The fix is to replace the line where you have data.map(...) with data ? data.map(...) : []; which will return an epty array until data gets its value, then the map function will run and your app should be ok.

In javascript, pretty much any time you're using a variable that is the result of an awaited activity, you should have null checks in place. The code above checks if data has value, then if it does have value, it will run return data.map, otherwise it will return [].

Upvotes: 3

Related Questions