I am workin on an e commerce website . I want to create this feature but i am having a little difficulty . When a user clicks on an image , it redirects them to a page that contains more details about the selected item and a little carousel that enables the user see different angle of the cloth selected . I dont want tp hard code this for all features on the project . I would love to create a component that cam serve this purpose . I am using Next js for React , Thank you

here is my code This is an example of a shirt component file . I import Image from "next/image";

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 

THIS IS THE ITEM FILE

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

How di i please make on click of the image tag . the image clicked is automatically rendered in another page , I hope who ever reads this gets what i am talking about .