safak / youtube

5.04k stars 5.47k forks source link

500: Internal Server Error when trying to deploy to vercel #52

Open genekyle opened 2 years ago

genekyle commented 2 years ago

anybody have any tips to get rid of the 500 error? Cart/Admin Dashboard/navbar work just fine but loading in the homepage just does not work

sayinmehmet47 commented 2 years ago

@genekyle i faced 500 error. I refactored my some components. You shouldn't be calling your internal API route from getServerSideProps. Instead, use the logic that's in your API route directly.Here an example

import Cards from "../components/Cards";
import CarouselComponent from "../components/Carousel";
import { Navbar } from "../components/Navbar";
import dbConnect from "../lib/mongodb";
import Products from "../models/Products";
// import "tw-elements";

export default function Home({ products }) {
  console.log(products);
  return (
    <div className="">
      <Navbar />
      <CarouselComponent />
      <Cards products={products} />
    </div>
  );
}

export async function getServerSideProps() {
  // Fetch data from external API
  await dbConnect();
  const data = await Products.find().lean();

  // Pass data to the page via props
  return {
    props: {
      products: JSON.parse(JSON.stringify(data)),
    },
  };
}

Here a question that I asked on StackOverflow about that issue. I hope it helps

https://stackoverflow.com/questions/71006893/next-js-with-mongodb-and-mongoose-throws-500-internal-server-error-when-deploy-i/71010858#71010858