Next js active link

import Link from "next/link";
import { useRouter } from "next/router";


export const MyNav = () => {

  const router = useRouter();

  return (
    <ul>
      <li className={router.pathname == "/" ? "active" : ""}>
        <Link href="/">home</Link>
      </li>
      <li className={router.pathname == "/about" ? "active" : ""}>
        <Link href="/about">about</Link>
      </li>
    </ul>
  );
};

Source: stackoverflow.com

Similar codes

0 vote139 views2 answers
Use svg image in next js
Javascript Next.js
0 vote126 views1 answer
Next js absolute path
Javascript Next.js
0 vote201 views1 answer
Nextjs react native web typescript
Javascript Next.js
0 vote118 views1 answer
Next js redirect if not logged in
Javascript Next.js
0 vote126 views1 answer
How to make nextjs image component responsive
Javascript Next.js
0 vote130 views1 answer
Show uploaded image in react/nextjs
Javascript Next.js
0 vote129 views1 answer
How to connect next js with postgresql localhost
Javascript Next.js
0 vote82 views2 answers
Mdb nextjs
Javascript Next.js
48 votes153 views1 answer
Emmet not working in react nextjs
Javascript Next.js
41 votes145 views2 answers
How to change port in next js
Javascript Next.js