next js active link

1import Link from 'next/link'
2
3function Home() {
4  return (
5    <ul>
6      <li>
7        <Link href="/">
8          <a>Home</a>
9        </Link>
10      </li>
11      <li>
12        <Link href="/about">
13          <a>About Us</a>
14        </Link>
15      </li>
16      <li>
17        <Link href="/blog/hello-world">
18          <a>Blog Post</a>
19        </Link>
20      </li>
21    </ul>
22  )
23}
24
25export default Home
26

1import Link from "next/link";
2import { useRouter } from "next/router";
3
4
5export const MyNav = () => {
6
7  const router = useRouter();
8
9  return (
10    <ul>
11      <li className={router.pathname == "/" ? "active" : ""}>
12        <Link href="/">home</Link>
13      </li>
14      <li className={router.pathname == "/about" ? "active" : ""}>
15        <Link href="/about">about</Link>
16      </li>
17    </ul>
18  );
19};
20

1import Link from 'next/link';
2import { useRouter } from 'next/router';
3import React from 'react';
4
5const NavLink = ({ href, children }) => {
6    const router = useRouter();
7
8    let className = children.props.className || '';
9    if (router.pathname === href) {
10        className = `${className} selected`;
11    }
12
13    return <Link href={href}>{React.cloneElement(children, { className })}</Link>
14}
15
16export default NavLink;
17