Upgrade project to Next.js 10

Upgrade project to Next.js 10

Author: w3bdesign

components/LoadingSpinner/LoadingSpinner.component.jsx

@@ -1,8 +1,7 @@
-import React from 'react';
 import styled, { keyframes } from 'styled-components';
 
 /**
- * Loading spinner, shows while loading products or categories. 
+ * Loading spinner, shows while loading products or categories.
  * Uses Styled-Components
  */
 const LoadingSpinner = () => {

components/Product/IndexProducts.component.jsx

@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import Image from 'next/image';
 import { v4 as uuidv4 } from 'uuid';
 
 import WOO_CONFIG from 'utils/config/nextConfig';
@@ -16,7 +17,6 @@ const IndexProducts = ({ products }) => {
           {products ? (
             products.map(
               ({
-                id,
                 databaseId,
                 name,
                 price,
@@ -30,26 +30,42 @@ 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 ? (
-                        <img
+                        <Image
                           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}
                         />
                       ) : (
-                        <img
+                        <Image
                           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,9 +1,10 @@
 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.
@@ -44,18 +45,26 @@ 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 ? (
-              <img
+              <Image
                 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}
               />
             ) : (
-              <img
+              <Image
                 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}
               />
             )}