Wrapper around Nextjs `Link` component to make it work with HeadlessUI

headlesslink.tsx

import type { LinkProps } from 'next/link'
import type { PropsWithChildren, HTMLProps } from 'react'

import Link from 'next/link'
import { forwardRef } from 'react'

type HeadlessLinkProps = PropsWithChildren<LinkProps & HTMLProps<HTMLAnchorElement>>

const HeadlessLink = forwardRef<HTMLAnchorElement, HeadlessLinkProps>((props, ref) => {
  const { href, children, ...rest } = props
  
  return (
    <Link href={href}>
      <a ref={ref} {...rest}> {children} </a>
    </Link>
  )
})

HeadlessLink.displayName = 'HeadlessLink'

export default HeadlessLink