Estoy trabajando en un sitio web de comercio electrónico. Quiero crear esta función, pero tengo algunas dificultades. Cuando un usuario hace clic en una imagen, lo redirige a una página que contiene más detalles sobre el elemento seleccionado y un pequeño carrusel que permite al usuario ver diferentes ángulos de la tela seleccionada. No quiero codificar esto para todas las características del proyecto. Me encantaría crear un componente que sirva para este propósito. Estoy usando Next js para React, gracias

aquí está mi código Este es un ejemplo de un archivo de componente de camisa. Importo imagen desde "siguiente/imagen";

 import products from "../product/MenShoes/MenShoes"; import Items from "../app/Items"; function ShirtComp ({}) { return ( <div className="grid grid-flow-row-dense md:grid-cols-2 lg:grid-cols-3"> { products.map(({id, name, price, size, image }) => { return <Items key={id} id={id} name={name} price={price} size={size} image={image} /> }) } </div> ) } export default ShirtComp

ESTE ES EL ARCHIVO DEL ARTÍCULO

 import Image from "next/image"; import { useDispatch } from "react-redux"; import { addToBasket } from "../slices/basketSlice"; import { useRouter } from "next/router"; function Items({ id, name, price, size, image } ) { const router = useRouter(); const dispatch = useDispatch(); const addItemToBasket =()=>{ const product = { id, image, name, size, price, }; dispatch(addToBasket(product)) } return ( <div className="relative flex flex-col m-5 bg-white z-30 p-10"> <img onClick={() => router.push('/Description')} src={image} height={400} width={400} objectFit="contain" className="cursor-pointer"/> <p className="my-3 pr-5">{name}</p> <p className="mb-5">{size}</p> <p className="mb-5"> ${price}</p> <button onClick={addItemToBasket} className="mt-auto button">Add to cart</button> </div> ) } export default Items

¿Cómo puedo hacer clic en la etiqueta de la imagen? la imagen en la que se hace clic se representa automáticamente en otra página, espero que quien lea esto entienda de lo que estoy hablando.