Updated Image Component implementation

components/cart/CartItem/CartItem.tsx

@@ -4,7 +4,6 @@ import { Trash, Plus, Minus } from '@components/icon'
 import usePrice from '@lib/bigcommerce/use-price'
 import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
 import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
-import getPathname from '@lib/get-pathname'
 import s from './CartItem.module.css'
 
 const CartItem = ({
@@ -58,7 +57,13 @@ const CartItem = ({
   return (
     <li className="flex flex-row space-x-8 py-6">
       <div className="w-12 h-12 bg-violet relative overflow-hidden">
-        <Image src={getPathname(item.image_url)} width={60} height={60} />
+        <Image
+          src={item.image_url}
+          width={60}
+          height={60}
+          // The cart item image is already optimized and very small in size
+          unoptimized
+        />
       </div>
       <div className="flex-1 flex flex-col justify-between text-base">
         <span className="font-bold mb-3">{item.name}</span>

components/product/ProductCard/ProductCard.tsx

@@ -3,7 +3,6 @@ import cn from 'classnames'
 import Image from 'next/image'
 import Link from 'next/link'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
-import getPathname from '@lib/get-pathname'
 import { Heart } from '@components/icon'
 import s from './ProductCard.module.css'
 
@@ -25,7 +24,7 @@ const ProductCard: FC<Props> = ({
   imgHeight,
   priority,
 }) => {
-  const src = getPathname(p.images.edges?.[0]?.node.urlOriginal!)
+  const src = p.images.edges?.[0]?.node.urlOriginal!
 
   if (variant === 'slim') {
     return (
@@ -40,6 +39,7 @@ const ProductCard: FC<Props> = ({
           width={imgWidth}
           height={imgHeight}
           priority={priority}
+          quality="90"
         />
       </div>
     )
@@ -69,6 +69,7 @@ const ProductCard: FC<Props> = ({
             width={imgWidth}
             height={imgHeight}
             priority={priority}
+            quality="90"
           />
         </div>
       </a>

components/product/ProductView/ProductView.tsx

@@ -6,12 +6,10 @@ import { FC, useState, useEffect } from 'react'
 import { useUI } from '@components/ui/context'
 import { Button, Container } from '@components/ui'
 import { Swatch, ProductSlider } from '@components/product'
-import getPathname from '@lib/get-pathname'
 import useAddItem from '@lib/bigcommerce/cart/use-add-item'
 import { isDesktop } from '@lib/browser'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
 import { getProductOptions } from '../helpers'
-import bcImageSrc from '@lib/bc-image-src'
 
 interface Props {
   className?: string
@@ -60,10 +58,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
           description: product.description,
           images: [
             {
-              url: bcImageSrc({
+              url: product.images.edges?.[0]?.node.urlOriginal!,
-                src: getPathname(product.images.edges?.[0]?.node.urlOriginal!),
-                width: 1200,
-              }),
               width: 800,
               height: 600,
               alt: product.name,
@@ -84,14 +79,14 @@ const ProductView: FC<Props> = ({ product, className }) => {
 
           <div className={s.sliderContainer}>
             <ProductSlider>
-              {/** TODO: Change with Image Component  **/}
               {product.images.edges?.map((image, i) => (
                 <Image
                   key={image?.node.urlOriginal}
-                  src={getPathname(image?.node.urlOriginal!)}
+                  src={image?.node.urlOriginal!}
                   width={1200}
                   height={1200}
                   priority={i === 0}
+                  quality="90"
                 />
               ))}
             </ProductSlider>

lib/bc-image-src.ts

@@ -1,22 +0,0 @@
-type Props = {
-  src: string
-  width?: number
-}
-
-type LoaderProps = Props & { root: string }
-
-function normalizeSrc(src: string) {
-  return src[0] === '/' ? src.slice(1) : src
-}
-
-// This is the same loader used by Next.js in the Image Component, we have it here too
-// so we can create image URLs for meta tags
-function bcImageLoader({ root, src, width }: LoaderProps): string {
-  return `${root}${normalizeSrc(
-    width ? src.replace('/original/', `/${width}w/`) : src
-  )}`
-}
-
-export default function bcImageSrc(props: Props) {
-  return bcImageLoader({ root: 'https://cdn11.bigcommerce.com/', ...props })
-}

lib/get-pathname.ts

@@ -1,3 +0,0 @@
-export default function getPathname(url: string) {
-  return new URL(url).pathname
-}

next.config.js

@@ -1,8 +1,7 @@
 module.exports = {
   images: {
     sizes: [320, 480, 820, 1200, 1600],
-    path: 'https://cdn11.bigcommerce.com/',
+    domains: ['cdn11.bigcommerce.com'],
-    loader: 'bigCommerce',
   },
   rewrites() {
     return [

package.json

@@ -30,7 +30,7 @@
     "js-cookie": "^2.2.1",
     "lodash.debounce": "^4.0.8",
     "lodash.random": "^3.2.0",
-    "next": "file:../next.js/packages/next",
+    "next": "^9.5.6-canary.12",
     "next-seo": "^4.11.0",
     "next-themes": "^0.0.4",
     "nextjs-progressbar": "^0.0.6",

yarn.lock

@@ -1514,20 +1514,20 @@
     meow "^7.0.0"
     prettier "^2.0.5"
 
-"@next/env@9.5.6-canary.11":
+"@next/env@9.5.6-canary.12":
-  version "9.5.6-canary.11"
+  version "9.5.6-canary.12"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.6-canary.11.tgz#95e1e668a19ba7cadd7047305bf64e23ba7d2c4f"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.6-canary.12.tgz#5680e9f1cfed54d7529086f519352307337f3ea1"
-  integrity sha512-mFnvhl39lkEf8BuULn5wX6kN9TnSo5HW/J65AGEAMFoQio9aMpjnaTqYIavg+j8ddlWpVWxK0ypMjY3D8GXz1A==
+  integrity sha512-cZ2ETTduAi+ThD6rk6FNzQWAOI0QRg0De54EqG4+2YFAU/FwWeoVy6c8nkaO1KE3qCVqXEyuat2Q6knA4E/sFA==
 
-"@next/polyfill-module@9.5.6-canary.11":
+"@next/polyfill-module@9.5.6-canary.12":
-  version "9.5.6-canary.11"
+  version "9.5.6-canary.12"
-  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.6-canary.11.tgz#681828311b562c40c43c2867c071d179e1bdd2ba"
+  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.6-canary.12.tgz#2ccd053b73ef350d690ecd85446de5ba7c40bcaa"
-  integrity sha512-MTK9f7iNy5aIAg3saeCidL7Wjapv0UhX/e/TJA9HUxw/smqzfNBos8HW974T46r1QKwUIEdz7S+5xJDnx+XdAg==
+  integrity sha512-2zOZYPJtzlPnObsjD9UEmOygQwvlSzeMGCwklFmH+ioR5ngaA7P4oXtqh8ocYAsjRVbZucJcT9Yn5roPbZfUNQ==
 
-"@next/react-dev-overlay@9.5.6-canary.11":
+"@next/react-dev-overlay@9.5.6-canary.12":
-  version "9.5.6-canary.11"
+  version "9.5.6-canary.12"
-  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.6-canary.11.tgz#4e397914b5d1a42fdbbf9fccf1de72f62d6232a5"
+  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.6-canary.12.tgz#eef065cd2d37e446aef78ffea974fcf9066bcdcd"
-  integrity sha512-Z+ScaXurAkaTRSbOUVVYew4ufZVsAHIkRJtTmaI1s3g5+nG5YjTSZRgTMmQVf6W1bZSJp7wGkYWD4cKvBHCojQ==
+  integrity sha512-ELQCF4/CX/PygiOa9PD7iCu62PqWrIK3jVj9PuascEhoF8au3N987ElJ7he57MuD6TLNpy5a8G7IxYUEPV55rA==
   dependencies:
     "@babel/code-frame" "7.10.4"
     ally.js "1.4.1"
@@ -1540,10 +1540,10 @@
     stacktrace-parser "0.1.10"
     strip-ansi "6.0.0"
 
-"@next/react-refresh-utils@9.5.6-canary.11":
+"@next/react-refresh-utils@9.5.6-canary.12":
-  version "9.5.6-canary.11"
+  version "9.5.6-canary.12"
-  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.6-canary.11.tgz#c97fa5cdfdbdd90db4d2c56065193fa2cdd076ad"
+  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.6-canary.12.tgz#f2f0cc30e646af4daefd5d0f50681ac231fbd826"
-  integrity sha512-ve7rdJp8CrgoCpKqF/09C3RYryA7NgYy0+Op7r5l6PTUv9AQoDs2RUGia3l2Irsz7bCSSBUxah41peZBgNn7Cw==
+  integrity sha512-jX6JwC8IHzHo1BV2yayPaOnXpM9KWF2/NM1SWTCZlfplBF5Rm1nQTG0WX8MF0CUpLh+DBeXmJ3Xzve/IGLdZmw==
 
 "@nodelib/fs.scandir@2.1.3":
   version "2.1.3"
@@ -5664,8 +5664,10 @@ next-tick@~1.0.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
-"next@file:../next.js/packages/next":
+next@^9.5.6-canary.12:
-  version "9.5.6-canary.11"
+  version "9.5.6-canary.12"
+  resolved "https://registry.yarnpkg.com/next/-/next-9.5.6-canary.12.tgz#84c8c3202ae09b0fe2ca12254931eb43501b5aee"
+  integrity sha512-JkOoQnMmJw/so0A3WnYSw3/XOnVGg/unUGcYsDBme0mkX8d9ooO/xC7QI01V3BW9A62txusoFMUxFjFrymGDiQ==
   dependencies:
     "@ampproject/toolbox-optimizer" "2.7.0-alpha.1"
     "@babel/code-frame" "7.10.4"
@@ -5686,10 +5688,10 @@ next-tick@~1.0.0:
     "@babel/runtime" "7.11.2"
     "@babel/types" "7.11.5"
     "@hapi/accept" "5.0.1"
-    "@next/env" "9.5.6-canary.11"
+    "@next/env" "9.5.6-canary.12"
-    "@next/polyfill-module" "9.5.6-canary.11"
+    "@next/polyfill-module" "9.5.6-canary.12"
-    "@next/react-dev-overlay" "9.5.6-canary.11"
+    "@next/react-dev-overlay" "9.5.6-canary.12"
-    "@next/react-refresh-utils" "9.5.6-canary.11"
+    "@next/react-refresh-utils" "9.5.6-canary.12"
     ast-types "0.13.2"
     babel-plugin-transform-define "2.0.0"
     babel-plugin-transform-react-remove-prop-types "0.4.24"