Next.js中Image嵌套Link报错，添加<a>后解决求原因解析

问题原因 #

你遇到的警告核心是Next.js Link 组件的 ref 传递机制导致的：

• Next.js 的 Link 组件为了实现路由跳转优化（比如预加载、页面切换后的焦点管理），会尝试给它的直接子元素传递 ref。
• 而 Next.js 内置的 Image 组件是未使用 React.forwardRef() 转发 ref 的函数组件，函数组件默认无法接收 ref，因此当 Image 作为 Link 的直接子元素时，ref 传递失败，触发了警告。

原代码示例：

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

解决方法的原理 #

在 Link 和 Image 之间嵌套原生 <a> 标签后警告消失，原因如下：

• 原生 <a> 是 DOM 元素，可以正常接收 Link 传递的 ref，满足了 Link 组件的 ref 传递需求。
• Next.js 的 Link 组件会自动识别子元素中的原生 <a> 标签，接管它的跳转逻辑，不会生成重复的可点击元素，也不会影响路由正常跳转。
• Image 作为 <a> 的子元素，不需要接收 Link 的 ref，自然不会触发 ref 传递失败的警告。

修改后的代码示例：

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

内容的提问来源于stack exchange，提问作者user19473296