Next.js Image can not be inside Link?

Viewed 22

I have this structure:

    return (
        <nav className={`${isTransparent ? 'transparent' : ''}`}>
            <Link href={'/'}>
                <Image src={'/logo.svg'} width={68} height={50} alt="logo" />
            </Link>

and got this error, what is wrong?

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)`.
    at Image (webpack-internal:///./node_modules/next/dist/client/image.js:19:22)
    at LinkComponent (webpack-internal:///./node_modules/next/dist/client/link.js:92:23)
    at nav
    at Navbar (webpack-internal:///./tikexModule/components/Navbar/index.tsx:27:31)

Image can not child of Link?


OK, I put <Image> inside <a>, it dismiss warning, but why? Could you explain?

<Link href="/">
<a>
    <Image src="/logo.svg" width={68} height={50} alt="logo" />
</a>
</Link>
0 Answers
Related