Ask Question

How can I use NextJS link with Chakra-UI link together

I am creating a SPA with NextJS and using Chakra-UI as UI component library. How can I use the link components of them together?

NextJSchakra

4469 views

AuthorΒ΄s AnkiCodes image

AnkiCodes

πŸ‘
2
Last edited on

1 Answer available

Best answer

The creator of Chakra-UI posted the solution here

import { Link } from "@chakra-ui/core"
import NextLink from "next/link"

<NextLink href="/..." as={...} passHref>
  <Link ... >Chakra styled link</Link>
</NextLink>

The magic happens with passHref property of NextJS link πŸ˜‰