How to add an "activated" class to links pointing to the current route
This example shows how to build and use a <LinkActive> component which can be used to replace Next.js' default <Link> component in situations where you require the link to be styled differently when the appropriate route or child-routes are active.
If you import it as Link then you don't have to modify any existing navigations. As with the standard <Link> componet, it will accept either a string or an element as its children.
To use it:
<LinkActive href="/about" activeClassName="text-white">About me</LinkActive>or
<LinkActive href="/blog" activeClassName="text-white">
<a>
<div>
Read my blog!
</div>
</a>
</LinkActive>