Fix next/link should be used with anchor as children #330 (#482)

components/cart/CartItem/CartItem.tsx

@@ -85,25 +85,29 @@ const CartItem = ({
       <div className="flex flex-row space-x-4 py-4">
         <div className="w-16 h-16 bg-violet relative overflow-hidden cursor-pointer z-0">
           <Link href={`/product/${item.path}`}>
-            <Image
+            <a>
-              onClick={() => closeSidebarIfPresent()}
+              <Image
-              className={s.productImage}
+                onClick={() => closeSidebarIfPresent()}
-              width={150}
+                className={s.productImage}
-              height={150}
+                width={150}
-              src={item.variant.image!.url}
+                height={150}
-              alt={item.variant.image!.altText}
+                src={item.variant.image!.url}
-              unoptimized
+                alt={item.variant.image!.altText}
-            />
+                unoptimized
+              />
+            </a>
           </Link>
         </div>
         <div className="flex-1 flex flex-col text-base">
           <Link href={`/product/${item.path}`}>
-            <span
+            <a>
-              className={s.productName}
+              <span
-              onClick={() => closeSidebarIfPresent()}
+                className={s.productName}
-            >
+                onClick={() => closeSidebarIfPresent()}
-              {item.name}
+              >
-            </span>
+                {item.name}
+              </span>
+            </a>
           </Link>
           {options && options.length > 0 && (
             <div className="flex items-center pb-1">

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -74,9 +74,11 @@ const CartSidebarView: FC = () => {
         <>
           <div className="px-4 sm:px-6 flex-1">
             <Link href="/cart">
-              <Text variant="sectionHeading" onClick={handleClose}>
+              <a>
-                My Cart
+                <Text variant="sectionHeading" onClick={handleClose}>
-              </Text>
+                  My Cart
+                </Text>
+              </a>
             </Link>
             <ul className={s.lineItemsList}>
               {data!.lineItems.map((item: any) => (

components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx

@@ -44,7 +44,9 @@ const CheckoutSidebarView: FC = () => {
     >
       <div className="px-4 sm:px-6 flex-1">
         <Link href="/cart">
-          <Text variant="sectionHeading">Checkout</Text>
+          <a>
+            <Text variant="sectionHeading">Checkout</Text>
+          </a>
         </Link>
 
         <PaymentWidget