CODEWITHSUNDEEP
javascriptreactjsnext.js
vivek kn
vivek kn

Reputation: 265

internal server error 500 occuring after deploying after using getServerSideProps next :js

i am trying to host redeploy my website in to vercel i added getServerSideProps in my webiste after that i am getting the following error i dont know what this means and what should i do to fix it? in localhost the program is working perfetly enter image description here

this is the getServerSideProps that i addeed to my index.js

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 } };
}

enter image description here

enter image description here

if the code i provided is not enough github.com/vivekkn91/wixten.git here is the git repository note that the webiste has no issue in localhost

his issue occoured after i added getServerSideProps in my index.js and i also found that my inner pages has no issue its wotking perfeclty

enter image description here

enter image description here

enter image description here

i tyred deploying to netlify also. the home landing page is giving me this page but innerpages are working fine i am no longer using firebase so its oke to remove all codes based on firebase

i am adding github page for ur refernce feel free to clone the code https://github.com/vivekkn91/wixten

Upvotes: 2

Views: 5889

Answers (4)

Guilherme Falcão
Guilherme Falcão

Reputation: 21

I had the same issue. Adding a postinstall script to my package.json fixed the problem.

What happened in my case was that I needed to run prisma generate command after the postinstall to synch client and server side.

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "postinstall": "prisma generate"
  },

Upvotes: 0

williamli
williamli

Reputation: 4104

Can you check your code to see if you have import next from 'next' in any part of your code (component/pages/etc)? If you do, try removing this from your code and see if this fixes your issue.

Upvotes: -1

ghost
ghost

Reputation: 95

So, I quickly forked your repo to check whether the site is working locally and it is.

Thus, obviously the issue is with how the website being deployd in production on Vercel. Testing the repo on Vercel is a bit too big of an ask for me, thus I can only give hints about what I see in the error pages, etc.

Thus, what I would suggest is to install the VercelCLI by running the following terminal command if you have npm:

$ npm i vercel -g

or the one bellow would be better since you are only ussing itfor development purposes - no need to install the package globally with -g

$ npm i vercel --save-dev

Once installed, login with the vercel login command and provide your email address, which you use for Vercel.

$ vercel login [email protected]

Once logged in, you can run the vercel dev command to replicate the Vercel deployment environment locally, allowing you to test your Serverless Functions, without requiring you to deploy each time a change is made.

$ vercel dev

This wont fix the issue itself, but it will be easyer than to constantly re-deploy the app after every code change.

So, what to do next, since I am not going to test the code on Vercel, I can only give you other hints, based on the error messages you have provided.

  1. When I ran the repo locally, I got an error in the terminal that the website had an issue with the map function and the /qeustion route. Thus, you should check this url - https://nextjs.org/docs/messages/prerender-error.
  2. When I was deploying React.js apps on Digital Cload, I always had to state the engines that my app was ussing. Maybe you have to do something simillar for Vercel since one of the error code images aretalking about the fact that it cant find /server/next:
 "name": "wixten",
 "private": true,
 "main": "index.js",
 "engines": {
      "node": "8.11.x",
    "npm": "~1.0.20"
  },

Upvotes: 1

ghost
ghost

Reputation: 95

I see two potential problems why this might be happening.

  1. For some reason your app (prob. Vercel) needs you to specify the main entry point for your app. I came to this potential conclusion based on your errormessages. You should go to your package.json file in the root and add something like this at the start of the file and then re-deploy.
{
  "name": "app-name",
  "version": "1.0.0",
  "description": "...",
  "main": "index.js",  <------------------ this
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
... rest of content

  1. The other issue might be that you have accidentally committed the node_modules folder from your App's root folder to your project's Git repo or Vercel server. You should check if that is the case.

  2. There might be an issue with your "scripts" in package.json, but I have not used Vercel specifically, so it is hard for me to say.

If you have the Vercel CLI installed on your app... You can use The $vercel dev command to replicate the Vercel deployment environment locally, allowing you to test your Serverless Functions, without requiring you to deploy each time a change is made.

https://vercel.com/blog/vercel-dev#get-started

Upvotes: 0

Related Questions