Nextjs Link concatenate issue

Question

I am having an issue with the Next/Link component. My issue occurs when the user has reached the product details page. In the home page I have 3 link components that takes the user to either domain.com/headphones || domain.com/earphones || domain.com/speakers. Now in these pages the user can view a desired product which leads them to a dynamic product details page. In the product details page, I have the exact 3 link components from the home page that initially takes the user to either /headphones || /earphones || /speakers. This is where the error comes to play. The url concatenates and leads me to a 404 page.

If the user is in domain.com/speakers/productId and clicks on for example the headphones link component, the url now becomes domain.com/speakers/headphones.. when it should really just take the user back to domain.com/headphones..

Ive tried to use the replace prop in the link component as well as router.push

Any tips are greatly appreciated

const LinkCard = (props) => {
  return (
    <Link href={props.id}>
      <li id={props.id} className={styles.linkContainer}>
        <Image
          src={props.src}
          width={200}
          height={200}
          objectFit="cover"
          className={styles.img}
        />
        <h2>{props.title}</h2>
        <div>
          <p>Shop</p>
          <ArrowSVG />
        </div>
      </li>
    </Link>
  );
};

export default LinkCard;

Answer 1

The problem is that when you redirect to with using headphones, the Next.js just concatenate the links.

Instead of that, you need to pass your target url to href like /headphones. With that way, you can redirect user to domain.com/headphones