Revert Next/Image as it was not working in production

Revert Next/Image as it was not working in production

Author: w3bdesign

README.md

@@ -46,7 +46,7 @@ The current release has been tested and is confirmed working with the following
 
 ## Features
 
-- Next.js version 10 with Next/Image and image optimization for product images
+- Next.js version 10
 - Connect to Woocommerce GraphQL API and list name, price and display image for products
 - Support for simple products and variable products
 - Cart handling and checkout with WooCommerce (Cash On Delivery only for now)
@@ -82,3 +82,4 @@ With that said, keep the following in mind:
 - Display product variation name in cart / checkout
 - Hide products not in stock
 - Add better SEO
+- Re-add Next/image when it is working better

components/Product/IndexProducts.component.jsx

@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import Image from 'next/image';
 import { v4 as uuidv4 } from 'uuid';
 
 import WOO_CONFIG from 'utils/config/nextConfig';
@@ -17,6 +16,7 @@ const IndexProducts = ({ products }) => {
           {products ? (
             products.map(
               ({
+                id,
                 databaseId,
                 name,
                 price,
@@ -30,42 +30,26 @@ const IndexProducts = ({ products }) => {
                   key={uuidv4()}
                   className="flex flex-col p-6 md:w-1/2 xl:w-1/4"
                 >
-                  <Link
-                    href="/produkt/[post]"
-                    as={`/produkt/${slug}?id=${databaseId}`}
-                  >
+                  <Link href="/produkt/[post]" as={`/produkt/${slug}?id=${databaseId}`}>
                     <a>
                       {image ? (
-                        <Image
+                        <img
                           id="product-image"
                           className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
                           alt={name}
-                          loading="lazy"
-                          quality="60"
                           src={image.sourceUrl}
-                          sizes="(max-width: 900px) 1366px, (min-width: 901px) 272px"
-                          width={366}
-                          height={366}
                         />
                       ) : (
-                        <Image
+                        <img
                           id="product-image"
                           className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
                           alt={name}
-                          loading="lazy"
-                          quality="60"
                           src={WOO_CONFIG.PLACEHOLDER_SMALL_IMAGE_URL}
-                          sizes="(max-width: 900px) 1366px, (min-width: 901px) 272px"
-                          width={366}
-                          height={366}
                         />
                       )}
                     </a>
                   </Link>
-                  <Link
-                    href="/produkt/[post]"
-                    as={`/produkt/${slug}?id=${databaseId}`}
-                  >
+                  <Link href="/produkt/[post]" as={`/produkt/${slug}?id=${databaseId}`}>
                     <a>
                       <div className="flex justify-center pt-3">
                         <p className="font-bold text-center cursor-pointer">

components/Product/SingleProduct.component.jsx

@@ -1,10 +1,9 @@
 import { useState, useEffect } from 'react';
-import Image from 'next/image';
 
 import AddToCartButton from 'components/Cart/AddToCartButton.component';
 import LoadingSpinner from 'components/LoadingSpinner/LoadingSpinner.component';
 
-import WOO_CONFIG from 'utils/config/nextConfig';
+import WOO_CONFIG  from 'utils/config/nextConfig';
 
 /**
  * Shows a single product with an Add To Cart button.
@@ -45,26 +44,18 @@ const SingleProduct = ({ product }) => {
         <div className="container flex flex-wrap items-center pt-4 pb-12 mx-auto ">
           <div className="grid grid-cols-1 gap-4 mt-16 lg:grid-cols-2 xl:grid-cols-2 md:grid-cols-2 sm:grid-cols-2">
             {image ? (
-              <Image
+              <img
                 id="product-image"
                 className="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 hover:grow hover:shadow-lg hover:scale-105"
                 alt={name}
                 src={image.sourceUrl}
-                loading="lazy"
-                quality="60"
-                width={600}
-                height={600}
               />
             ) : (
-              <Image
+              <img
                 id="product-image"
                 className="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 hover:grow hover:shadow-lg hover:scale-105"
                 alt={name}
                 src={WOO_CONFIG.PLACEHOLDER_LARGE_IMAGE_URL}
-                loading="lazy"
-                quality="60"
-                width={600}
-                height={600}
               />
             )}