I received products data from fakestoreapi to the console but not receiving to the browser-CodePudding

I'm doing a amazon clone with next.js and fakestoreapi products data but Im not able to receive the data to the browser. but they receives to the vscode console. and I'm not even getting any error messages too. my code is as follows.

index.js

import Head from "next/head";
        import Header from "../src/Components/Header";
        import Banner from "../src/Components/Banner";
        import ProductFeed from "../src/Components/ProductFeed";
    
        export default function Home({ products }) {
          return (
            <div>
              <Head>
                <title>ShopBag | amazon Clone</title>
              </Head>
              <Header />
              <main className="max-w-screen-2xl bg-gray-100 mx-auto">
                {/* banner */}
                <Banner />
    
                {/* product Feild */}
    
                <ProductFeed products={products} />
              </main>
            </div>
          );
        }
        export async function getServerSideProps(context) {
          const products = await fetch("https://fakestoreapi.com/products")
            .then((res) => res.json())
            .then((json) => console.log(json));
          return {
            props: {
              products: products || null,
            },
          };
        }

ProductFeed.js

 import React from "react";
 import Product from "./Product";

 function ProductFeed({ products }) {
   return (
     <div>
       {products?.map(({ id, title, price, description, category, image }) => (
         <Product
           key={id}
           title={title}
           price={price}
           description={description}
           category={category}
           image={image}
         />
       ))}
     </div>
   );
 }
 export default ProductFeed;

Product.js

import React from "react"; import Image from "next/image"

 function Product({ id, title, price, description, category, image }) {
   return (
     <div>
       <p>{category}</p>
       <Image src={image} height={200} width={200} objectfit="contain" alt="product-images" />
     </div>
   );
 }

 export default Product;

next.config.js

/** @type {import('next').NextConfig} */
    const isProd = process.env.NODE_ENV === "production";
    const nextConfig = {
      reactStrictMode: true,
      Images: {
        domains: ["./public", "fakestoreapi.com"],
        assetPrefix: isProd ? "/amazon-clone/" : "",
      },
    };

    module.exports = nextConfig;

CodePudding user response：

It's because you log the json in the second then, instead of returning it. You should do :

....
.then(json => json)

Or if you want to log it :

.then(json => {
   console.log(json)
   return json
})

CodePudding user response：

you can remove then and use await

 const response = await fetch("https://fakestoreapi.com/products");
 const products = await response.json();
 return {
   props: {
     products: products || null,
   },
 };