My current route takes the id param and navigates to the page ex. /services/1. When I navigate to a regular page, it creates a new route such as /services/about-us with nothing on it but the page layout for the dynamic [id] route

How do I go about fixing this? I only want to have dynamic routes for the id params

// Dynamic route component
import React from "react";
import Link from "next/link";

const ServiceCard = ({ id, icon, title, details }) => {
  return (
    <>
      <Link href={`/services/${id}`} className="w-full px-4 md:w-1/2 lg:w-1/3">
        <div className="mb-9 rounded-[20px] bg-white p-10 shadow-2 hover:shadow-lg md:px-7 xl:px-10">
          <div className="mb-8 flex h-[70px] w-[70px] items-center justify-center rounded-2xl bg-primary">
            {icon}
          </div>
          <h4 className="mb-[14px] text-2xl font-semibold text-dark ">
            {title}
          </h4>
          <p className="text-body-color">{details}</p>
        </div>
      </Link>
    </>
  );
};

export default ServiceCard;

The snippet of navbar that this issue occurs from

<li role="none" className="flex items-stretch">
                <Link href="/services">
                  <div
                    role="menuitem"
                    aria-haspopup="false"
                    onClick={() => setIsToggleOpen(false)} // Close the menu when a link is clicked
                    className="."
                  >
                    <span>service</span>
                  </div>
                </Link>
              </li>
              <li role="none" className="flex items-stretch">
                <Link href="/about-us">
                  <div
                    role="menuitem"
                    aria-current="page"
                    onClick={() => setIsToggleOpen(false)}
                    aria-haspopup="false"
                    className="...."
                  >
                    <span>about us</span>
                  </div>
                </Link>
              </li>