Next.JS is an excellent SSR framework, which many developers, including myself, love. While I was working on a side project using Next.js and Chakra UI, I found out that Chakra has an official package @chakra-ui/next-js which support next/link ( chakra with next.js link ) // app/page.tsx ' use client ' import { Link } from ' @chakra-ui/next-js ' export default function Page () { return ( < Link href = '/about' color = 'blue.400' _hover = { { color : ' blue.500 ' } } > About </ Link > ) } Note: if you want to use Link this way, add this option into next.config.js experimental : { esmExternals : false , } Github issue At first, it looks really simple, and Chakra also provides some style props like _hover for link's hover style and _activeLink for a link's active style. However, there is one issue: There aren't any native support for the active state of this Link component.…