Product is undefined in fake store API in the console in Next Js inside getServerSideProps

console.log(product) is undefined. I have debugged it using a console but it still shows 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

CodePudding user response：

When you use axios, you do not use res.json().

You can correct it as follows.

export async function getServerSideProps(context) {
  const { data } =await axios.get("https://fakestoreapi.com/products");

  
  return {
    props: {
      product: data,
    },
  };
}

CodePudding user response：

I was using getServerSideProps in component.So the final answer is that getServerSideProps works only in pages, not in components