We have few pages in our app but we have to manually type the page in the url to access them. Let's fix this by using nextjs Link component. It's similar to using <a> in regular html.

// components/nav/TopNav.js
import Link from "next/link";

<Menu.Item key="mail" icon={<CloudTwoTone />}>
    <Link href="/">
        <a>CMS</a>
    </Link>
</Menu.Item>

<Menu.ItemGroup title="Management">
    <Menu.Item key="setting:1">
        <Link href="/admin">
            <a>Dashboard</a>
        </Link>
    </Menu.Item>
    <Menu.Item key="setting:2">Option 2</Menu.Item>
</Menu.ItemGroup>

Update other links the same way as needed.