Server Error Error: Request failed with status code 500

Question

 export const getServerSideProps = async () => {
      const res = await axios.get('http://localhost:3000/api/products');
      return {
        props: {
          kebabList: res.data
        }
      }
    };




    // get all the products
  if (method === "GET") {
    try {
      const products = await Product.find();
      res.status(200).json(products);
    } catch (err) {
      res.status(500).json(err);
    }
  }

When I first load the app it is showing this error Server Error Error: Request failed with status code 500

If I reload again then it works fine but after deploying on vercel the error is permanent

Is `/api/products` an internal API route? If so, you shouldn't be fetching data from it inside `getServerSideProps`. You should move the logic that's in the API route into `getServerSideProps` instead. See [Internal API fetch with getServerSideProps? (Next.js)](https://stackoverflow.com/questions/65752932/internal-api-fetch-with-getserversideprops-next-js). — juliomalves, Mar 22 '22 at 19:14

score 1 · Answer 1 · answered Mar 21 '22 at 10:39

When you have deployed your app on vercel, your API url might be changed http://localhost:3000 to http://your-domain(live-url).com.

    export const getServerSideProps = async () => {
      const res = await axios.get('http://your-domain(live-url).com/api/products'); //  please focus on this line. I belive you have messed up here
      return {
        props: {
          kebabList: res.data
        }
      }
    };

    // get all the products
  if (method === "GET") {
    try {
      const products = await Product.find();
      res.status(200).json(products);
    } catch (err) {
      res.status(500).json(err);
    }
  }

Server Error Error: Request failed with status code 500

1 Answers1