you can refractor TopNav like this

export default function TopNav(props) {
    const { data } = props

    return (
      <StyledDiv>
        <nav>
          <ul>
            {data.map(item => <StyledLi key={item.name} >
              <Link href={item.href}>{item.name}</Link>
            </StyledLi> )}
          </ul>
        </nav>
      </StyledDiv>
    );
}

now you can use it like <TopNav data={[{href: "/abc", name: "ABC"}, {href: "/xyz", name: "XYZ"}]} />
you can either use it on every page with different props,
or
you can use it on top level _app.jsx and give conditional data props to TopNav, you can get pathname from useRouter and depending upon the path name change data prop
example

const App = () => {
 const { asPath } = useRouter()
 const getData = () => {
   if (asPath === "/url1") {
     return [{href: "/abc", name: "ABC" }]
   }
   if (asPath === "/url2") {
     return [{href: "/xyz", name: "XYZ" }]
   }
   return [{href: "/wsad", name: "WSAD" }]
 }
  return(
   <>
    <TapNav data={getData()} />    
    {otherComp}
   </>
  )
}