<Link> component in NextJS seems to lose the cursor-pointer with a <div> as child component

Question

I'm using NextJS and wanted to configure a top navigation header bar. In the left-hand side of my nav bar, I have a small svg and text that I would like to be Link's to the site's root. The Link component will not allow multiple children, so I have done this:

<Link href="/">
  <div className="">
    <img className="" src="/whistle.svg" />
    <span className="">Root!</span>
  </div>
</Link>

however, when I do this the entire div block loses it cursor-pointer and I need to then set a specific class of cursor pointer. I am also using tailwindCSS. I'm not sure what I'm doing wrong here in this instance - any help is appreciated!

Answer 1

<Link> must have <a> tag inside. You define your styles by yourself, so just add cursor pointer class of style to your div. You can add className="cursor-pointer" to your div instead of the style described.

<Link href="/">
  <a>
  <div className="" style={{cursor: 'pointer'}}>
    <a>
    <img className="" src="/whistle.svg" />
    <span className="">Root!</span>
    </a>
  </div>
  </a>
</Link>

P.S. Update for 2023+, and for Nextjs v13+ : <Link> should not need <a> tag.