[Next JS] Link 안에 Image 를 넣었을 때, 오류 & 해결방법

Next Js에서 Image 클릭 시 원하는 페이지로 Link 하려는 코드를 만들 때,

이러한 오류가 발생한다.

 

      <Link href={"/"}>
        <Image
          src={logo}
          layout="fixed"
          height={50}
          width={90}
          className=" cursor-pointer"
        />
      </Link>

 

 

해결방법은 간단하다.

<a></a> 를 감싸주면 된다. (html 렌더링 시 문제라고 한다.)

 

 

    <nav className={styles.navbar}>
      <Link href={"/"}>
        <a>
          <Image
            src={logo}
            layout="fixed"
            height={50}
            width={90}
            className=" cursor-pointer"
          />
        </a>
      </Link>