Link not going to my second slug (nextjs/sanity)

Question

I have two slugs, one for linking to an image gallery for each category, and another for each product in a shop.

I have [slug].js for the image galleries, and [slugProduct].js for the products. But when I click the slug for the products, I get this error: Failed to reload dynamic routes: Error: You cannot use different slug names for the same dynamic path ('slug' !== 'slugProduct').

I'm guessing that the link is directing to the [slug] page and not [slugProduct], but not sure how to fix that. I've looked at the routing dynamic routes page on nextjs, but I don't understand it to be honest.

This is my link code:

<ul className="products">
    {getProduct && getProduct.map((getProduct, index) => (
        <Link href={`/${getProduct.slug.current}`}>
            <li key={index}>
                 <a href="../pages/productSlug/[slugProduct].js"><img src={urlFor(getProduct.productImage).auto('format').url()} alt={getProduct.productName}/></a>
                 <span className="product-name">{getProduct.productName}</span>
                 <span className="product-price">${getProduct.price}.00</span>
             </li>
         </Link>
     ))}
</ul>

And my file paths (I put it in a separate folder due to something I read online, but it hasn't worked):

Answer 1

I think you should try this.

<ul className="products">
    {getProduct && getProduct.map((getProduct, index) => (
        <Link href={`/productSlug/${getProduct.slug.current}`}>
            <li key={index}>
                 <a><img src={urlFor(getProduct.productImage).auto('format').url()} alt={getProduct.productName}/></a>
                 <span className="product-name">{getProduct.productName}</span>
                 <span className="product-price">${getProduct.price}.00</span>
             </li>
         </Link>
     ))}
</ul>