Approach to Add Styling To An Active Link In NextJS
We are going to use a usePathname hook. usePathname hook is a client component hook and it is used to get a current URL’s pathname. By using the ternary operator, we are comparing if the current pathname matches the specified pathname. if it matches the specified pathname then, we are adding an active class name.
Syntax:
const pathname = usePathname()
<Link className={`${pathname === '/' ? 'active' : ''}`} href="/"> Home </Link>
How To Add Styling To An Active Link In NextJS?
NextJS is a React framework that is used to build full-stack web applications. It is used both for front-end as well as back-end. It comes with a powerful set of features to simplify the development of React applications. In this article, we will learn about how to add styling to an active link in NextJS.