Next.js 13项目集成Font Awesome遇Module not found错误求助

1. 确认依赖安装完整 #

确保安装以下三个核心包（领英图标属于品牌图标库，需单独安装）：

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/react-fontawesome

2. 根布局配置（替代旧的 _app.tsx） #

Next.js 13 App Router 不再使用 _app.tsx，所有全局配置需在 src/app/layout.tsx 中完成：

import './globals.css';
import type { Metadata } from 'next';
import { config } from '@fortawesome/fontawesome-svg-core';
import '@fortawesome/fontawesome-svg-core/styles.css';

// 禁用自动注入样式，避免冲突
config.autoAddCss = false;

export const metadata: Metadata = {
  title: '你的应用标题',
  description: '你的应用描述',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

3. 在页面中使用图标 #

直接在 src/app/page.tsx 中导入组件和目标图标即可：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLinkedin } from '@fortawesome/free-brands-svg-icons';

export default function Home() {
  return (
    <main>
      <h1>Next.js 13 + Font Awesome 集成示例</h1>
      {/* 使用领英图标，可通过size属性调整大小 */}
      <FontAwesomeIcon icon={faLinkedin} size="2x" />
    </main>
  );
}

常见问题排查 #

• Module not found 错误：检查 package.json 是否包含所有依赖，删除 node_modules 和锁文件后重新执行 npm install，并重启开发服务器
• 旧方案失效：Stack Overflow 旧方案针对 Pages Router，App Router 需用 layout.tsx 做全局配置
• SSR 兼容性：Font Awesome React 组件原生支持 SSR，配置正确即可正常渲染

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