Next.js项目中Link组件内嵌FontAwesome图标触发浏览器控制台报错

Next.js 的 <Link> 组件会向直接子元素透传链接相关的原生属性（如 href、onClick、ref 等），而 FontAwesomeIcon 属于第三方自定义组件，内部没有声明接收这类原生链接属性，也未做对应的 ref 转发逻辑，因此会触发 React 的未知 DOM 属性校验警告。
这个警告属于客户端运行时的校验提示，不影响项目编译逻辑，因此你只会在浏览器控制台看到报错，项目编译终端不会输出相关内容，链接跳转功能也能正常运行。

有两种常用的修复方式：

方案1：在外层嵌套原生DOM元素 #

在 FontAwesomeIcon 外层套一层原生的 <span> 或 <a> 标签，让 <Link> 把属性透传给能识别这些属性的原生元素即可：

import Link from 'next/link'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHeart } from '@fortawesome/free-regular-svg-icons'

const Component = () => {
    return (
        // ...
        <Link href='/followed'>
            <span>
                <FontAwesomeIcon icon={faHeart} />
            </span>
        </Link>
        // ...
    )
}

方案2：使用 legacyBehavior 属性（适配Next.js 13+ App Router） #

如果是 Next.js 13+ 版本的 App Router 场景，直接给 <Link> 加 legacyBehavior 属性，就可以直接将自定义组件作为子元素使用：

import Link from 'next/link'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHeart } from '@fortawesome/free-regular-svg-icons'

const Component = () => {
    return (
        // ...
        <Link href='/followed' legacyBehavior>
            <FontAwesomeIcon icon={faHeart} />
        </Link>
        // ...
    )
}

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