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

Question

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

score 0 · Answer 1 · answered Oct 13 '22 at 03:09

0

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

answered Oct 13 '22 at 03:09

Someone Special

12,479
7
45
76

Problem still exists – noman sanaullah Oct 13 '22 at 08:47
I don't know why it didn't work for you. It works as expected here -> https://codesandbox.io/s/strange-waterfall-1dbriu?file=/pages/index.js – Someone Special Oct 13 '22 at 08:53
make sure ProductCard is a page, and not a component. getServerSideProps only work in page. – Someone Special Oct 13 '22 at 08:55

score 0 · Answer 2 · answered Oct 13 '22 at 14:42

0

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

answered Oct 13 '22 at 14:42

noman sanaullah

81
11

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

2 Answers2