Next.js如何动态加载图标？动态引入FontAwesomeIcon报类型错误怎么解决

问题原因 #

@fortawesome/react-fontawesome 包采用命名导出的方式暴露 FontAwesomeIcon 组件，而 next/dynamic 默认会读取导入模块的 default 导出。你直接传入导入整个模块的逻辑时，返回的模块对象的 default 属性是整个模块的导出集合，并不是组件本身，类型完全不匹配，因此触发编译报错。

解决方法 #

修改动态导入逻辑，在 Promise 回调中显式返回命名导出的 FontAwesomeIcon 组件，将其包装为 next/dynamic 要求的 { default: 组件 } 结构即可：

import dynamic from "next/dynamic";
// 可选：导入组件类型做类型标注，保证props类型提示正常
import type { FontAwesomeIconProps } from "@fortawesome/react-fontawesome";

const FontAwesomeIcon = dynamic<FontAwesomeIconProps>(() =>
  import("@fortawesome/react-fontawesome").then(mod => ({ default: mod.FontAwesomeIcon })),
  // 可选：不需要服务端渲染时可以关闭，减少服务端打包体积
  { ssr: false }
);

修改后原有组件调用代码不需要任何调整，直接重新执行 yarn build 即可正常编译。

内容的提问来源于stack exchange，提问作者János