Use next/image & fixes

site/components/cart/CartItem/CartItem.tsx

@@ -1,6 +1,6 @@
-import { ChangeEvent, FocusEventHandler, useEffect, useState } from 'react'
+import { ChangeEvent, useEffect, useState } from 'react'
 import cn from 'clsx'
-import Image from 'next/legacy/image'
+import Image from 'next/image'
 import Link from 'next/link'
 import s from './CartItem.module.css'
 import { useUI } from '@components/ui/context'

site/components/common/I18nWidget/I18nWidget.tsx

@@ -5,7 +5,7 @@ import { useRouter } from 'next/router'
 import s from './I18nWidget.module.css'
 import { Cross, ChevronUp } from '@components/icons'
 import ClickOutside from '@lib/click-outside'
-import Image from 'next/legacy/image'
+import Image from 'next/image'
 interface LOCALE_DATA {
   name: string
   img: {

site/components/product/ProductCard/ProductCard.module.css

@@ -7,7 +7,7 @@
 
 .root:hover {
   & .productImage {
-    transform: scale(1.2625);
+    transform: scale(1.1);
   }
 
   & .header .name span,
@@ -69,16 +69,11 @@
 }
 
 .imageContainer {
-  @apply flex items-center justify-center overflow-hidden;
+  @apply flex items-center justify-center overflow-hidden w-full h-full;
-}
-
-.imageContainer > div {
-  min-width: 100%;
 }
 
 .imageContainer .productImage {
-  @apply transform transition-transform duration-500
+  @apply transform transition-transform duration-500 object-cover w-auto h-full;
-  object-cover scale-120;
 }
 
 .root .wishlistButton {

site/components/product/ProductCard/ProductCard.tsx

@@ -3,7 +3,7 @@ import cn from 'clsx'
 import Link from 'next/link'
 import type { Product } from '@commerce/types/product'
 import s from './ProductCard.module.css'
-import Image, { ImageProps } from 'next/legacy/image'
+import Image, { ImageProps } from 'next/image'
 import WishlistButton from '@components/wishlist/WishlistButton'
 import usePrice from '@framework/product/use-price'
 import ProductTag from '../ProductTag'
@@ -49,17 +49,14 @@ const ProductCard: FC<Props> = ({
             <span>{product.name}</span>
           </div>
           {product?.images && (
-            <div>
             <Image
               quality="85"
               src={product.images[0]?.url || placeholderImg}
               alt={product.name || 'Product Image'}
               height={320}
               width={320}
-                layout="fixed"
               {...imgProps}
             />
-            </div>
           )}
         </>
       )}
@@ -85,7 +82,6 @@ const ProductCard: FC<Props> = ({
           )}
           <div className={s.imageContainer}>
             {product?.images && (
-              <div>
               <Image
                 alt={product.name || 'Product Image'}
                 className={s.productImage}
@@ -93,10 +89,8 @@ const ProductCard: FC<Props> = ({
                 height={540}
                 width={540}
                 quality="85"
-                  layout="responsive"
                 {...imgProps}
               />
-              </div>
             )}
           </div>
         </>
@@ -117,7 +111,6 @@ const ProductCard: FC<Props> = ({
           />
           <div className={s.imageContainer}>
             {product?.images && (
-              <div>
               <Image
                 alt={product.name || 'Product Image'}
                 className={s.productImage}
@@ -125,10 +118,8 @@ const ProductCard: FC<Props> = ({
                 height={540}
                 width={540}
                 quality="85"
-                  layout="responsive"
                 {...imgProps}
               />
-              </div>
             )}
           </div>
         </>

site/components/product/ProductSidebar/ProductSidebar.module.css

@@ -50,7 +50,7 @@
 }
 
 .sliderContainer .img {
-  @apply w-full h-auto max-h-full object-cover;
+  @apply w-auto h-full max-h-full object-cover;
 }
 
 .button {

site/components/product/ProductSlider/ProductSlider.module.css

@@ -19,11 +19,11 @@
 }
 
 .thumb.selected {
-  @apply bg-white;
+  @apply bg-white/30;
 }
 
 .thumb img {
-  height: 85% !important;
+  @apply h-full w-full object-cover transition duration-500;
 }
 
 .album {
@@ -44,10 +44,9 @@
 }
 
 @screen md {
-  .thumb:hover {
+  .thumb:hover img {
-    transform: scale(1.02);
+    @apply scale-110;
   }
-
   .album {
     height: 182px;
   }

site/components/product/ProductView/ProductView.module.css

@@ -17,15 +17,11 @@
 }
 
 .imageContainer {
-  @apply text-center h-full relative;
+  @apply flex items-center justify-center w-full h-full relative;
-}
-
-.imageContainer > span {
-  height: 100% !important;
 }
 
 .sliderContainer .img {
-  @apply w-full h-full max-h-full object-cover;
+  @apply object-cover h-full;
 }
 
 .button {

site/components/product/ProductView/ProductView.tsx

@@ -1,5 +1,5 @@
 import cn from 'clsx'
-import Image from 'next/legacy/image'
+import Image from 'next/image'
 import s from './ProductView.module.css'
 import { FC } from 'react'
 import type { Product } from '@commerce/types/product'
@@ -80,6 +80,7 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
                   variant="simple"
                   className="animated fadeIn"
                   imgProps={{
+                    alt: p.name,
                     width: 300,
                     height: 300,
                   }}

site/components/search.tsx

@@ -125,6 +125,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
                     >
                       <Link
                         href={{ pathname: getCategoryPath('', brand), query }}
+                        legacyBehavior
                       >
                         <a
                           onClick={(e) => handleClick(e, 'categories')}
@@ -151,6 +152,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
                             pathname: getCategoryPath(cat.path, brand),
                             query,
                           }}
+                          legacyBehavior
                         >
                           <a
                             onClick={(e) => handleClick(e, 'categories')}
@@ -226,6 +228,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
                           pathname: getDesignerPath('', category),
                           query,
                         }}
+                        legacyBehavior
                       >
                         <a
                           onClick={(e) => handleClick(e, 'brands')}
@@ -252,6 +255,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
                             pathname: getDesignerPath(path, category),
                             query,
                           }}
+                          legacyBehavior
                         >
                           <a
                             onClick={(e) => handleClick(e, 'brands')}
@@ -326,6 +330,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
                   imgProps={{
                     width: 480,
                     height: 480,
+                    alt: product.name,
                   }}
                 />
               ))}
@@ -390,7 +395,10 @@ export default function Search({ categories, brands }: SearchPropsType) {
                         }
                       )}
                     >
-                      <Link href={{ pathname, query: filterQuery({ q }) }}>
+                      <Link
+                        href={{ pathname, query: filterQuery({ q }) }}
+                        legacyBehavior
+                      >
                         <a
                           onClick={(e) => handleClick(e, 'sort')}
                           className={
@@ -416,6 +424,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
                             pathname,
                             query: filterQuery({ q, sort: key }),
                           }}
+                          legacyBehavior
                         >
                           <a
                             onClick={(e) => handleClick(e, 'sort')}

site/pages/index.tsx

@@ -46,6 +46,7 @@ export default function Home({
             key={product.id}
             product={product}
             imgProps={{
+              alt: product.name,
               width: i === 0 ? 1080 : 540,
               height: i === 0 ? 1080 : 540,
               priority: true,
@@ -68,6 +69,7 @@ export default function Home({
             key={product.id}
             product={product}
             imgProps={{
+              alt: product.name,
               width: i === 0 ? 1080 : 540,
               height: i === 0 ? 1080 : 540,
             }}