When working with the fake store API in Next.js, I encountered an issue where the product was showing as undefined in the console.
Even after trying to debug using various methods, such as console.log(product), the issue persisted and the product remained undefined.
import axios from "axios";
import Products from "./Products";
const ProductCard = ({ product }) => {
console.log(product);
return (
<div className="">
<Products product={product} />
</div>
);
};
export async function getServerSideProps(context) {
const res =await axios.get("https://fakestoreapi.com/products");
const product = await res.json();
return {
props: {
product: product,
},
};
}
export default ProductCard