import { GetServerSideProps } from 'next';
type Product = { //Product variables
id: number;
title: string;
price: number;
thumbnail: string;
};
interface ProductsProps {
products: Product[];
}
export default function Products({ products }: ProductsProps){
return (
<main>
<h1 className="productHeader">Our Products</h1>
<div className="products">
{products && products.map((product) => ( `//mapping`
<div className="card" key={product.id}>
<p>{product.thumbnail}</p> `Product info`
<p>{product.title}</p>
<p>price:{product.price}$</p>
</div>
))}
</div>
</main>
);
};
export const getServerSideProps: GetServerSideProps = async () => { 'fetching API'
const res = await fetch('https://dummyjson.com/products');
const products = await res.json();
return {
props: {
products,
},
};
};
I attempted to retrieve data from the 'https://dummyjson.com/products' API, but unfortunately, I am not seeing any product information on the website. The API should provide details like product name and thumbnail images. Despite my efforts, the products are not displaying as expected on the site, indicating that there may be an issue with how I implemented the API fetch.