How to use Active nav link/route in next js

Next Js Active Navlink Link

Problem: Next js by default not have active route system. If you are use next js then need to create custom active link system. Next js Has usePathname hook using this hook need to apply custom logic for checking is active nav link/route

Solution: This next-js-active-route package this very simple. Here need just import NavLink and use it Like default <Link> component in next js. But this package have Active feature just need to add props "activeClassName".

Demo

Authors

• @AbtahiHasan

Installation

install with npm

npm i next-js-active-route

install with yarn

yarn add next-js-active-route

install with pnpm

pnpm install next-js-active-route

Usage/Examples

import { NavLink } from "next-js-active-route";

const Demo = () => {
  return (
    <>
      <ul>
        <li>
          <NavLink
            href="/"
            exact={true}
            activeClassName="bg-green-600"
            className="border"
          >
            Home
          </NavLink>
          <NavLink
            href="/blogs"
            activeClassName="bg-green-600"
            className="border"
          >
            Blogs
          </NavLink>
        </li>
      </ul>
    </>
  );
};

export default Demo;

Props