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 vote279 views1 answer
How to connect next js with postgresql localhost
Javascript Next.js
0 vote286 views1 answer
Next js global layout
Javascript Next.js
41 votes435 views2 answers
How to change port in next js
Javascript Next.js
42 votes454 views4 answers
Set port nextjs
Javascript Next.js
0 vote225 views2 answers
Mdb nextjs
Javascript Next.js
-2 votes199 views3 answers
Google analytics nextjs
Javascript Next.js
1 vote454 views1 answer
Next js script tag
Javascript Next.js
25 votes360 views1 answer
Next js disable ssr
Javascript Next.js
0 vote289 views1 answer
Install bootstrap in nextjs
Javascript Next.js
0 vote268 views1 answer
Next js get request
Javascript Next.js