Next.JSにてLinkコンポーネントにhrefを入れるとエラーが発生する。

• ローカル環境及びデプロイ後でも。

ブラウザのConsoleに以下のようなエラーメッセージが表示される。

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

以下のようにLinkタグをImageに直接囲んでいた。

import Link from 'next/link'
import logo from 'src/assets/images/logo.svg'

export default const Components: NextPage = () => {
  return (
    <Link href="/">
        <Image src={logo} alt="Logo image data." />
    </Link>
  )
}

Aタグを間に挟むと、エラーが解消される。

import Link from 'next/link'
import logo from 'src/assets/images/logo.svg'

export default const Components: NextPage = () => {
  return (
    <Link href="/">
      <a>
        <Image src={logo} alt="Logo image data." />
      </a>
    </Link>
  )
}