DEV Community

Discussion on: How To Add Styling To An Active Link In NextJS

Collapse
 
w3bdesign profile image
w3bdesign

I would recommend extracting this to a separate function. Then you can do the following:

const activeLink = (url: string, pathname: string) => pathname === url ? "navbar-link-active" : "";
Enter fullscreen mode Exit fullscreen mode

Then you can do something like this in your links (if you use string literals):

${activeLink(link.url, router.pathname)
Enter fullscreen mode Exit fullscreen mode