In Next.js, How to use Image (next/image) in Link (next/link)?-CodePudding

I'm new to use Next.js framework to make my latest project. I use Image tag from next/image in Link tag from next/link, But I got the error like below.

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

Check the render method of `ForwardRef(LinkComponent)`.

My code was like below.

export defult function header (){
 return {
   <div>
     <Link href="/">
          <Image
            src="http://xxxx.xxxx.xxx.com"
            objectFit="contain"
            layout="fill"
          />
      </Link>
   </div>
 }
}

I read the official documents and use 'passHref' tag at Link, and change code like below.

export defult function header (){
 return {
   <div>
     <Link href="/" passHref>
          <Image
            src="http://xxxx.xxxx.xxx.com"
            objectFit="contain"
            layout="fill"
          />
      </Link>
   </div>
 }
}

But still error ocurrred. Does anyone advice how to stop this kind of error, please?

CodePudding user response：

The passHref is if you have a custom component that wraps an a. For an image you don't need this but you do need an a tag, i.e.:

export default function Header() {
  return {
    <div>
      <Link href="/">
        <a>
          <Image
            src="http://xxxx.xxxx.xxx.com"
            objectFit="contain"
            layout="fill"
          />
        </a>
      </Link>
    </div>
  }
}