Next.js App Router 项目的 SSR 兼容 FontAwesome 集成
npm install @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome如何在 Next.js 组件中使用 FontAwesome 图标
'use client';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHome, faUser, faGear } from '@fortawesome/free-solid-svg-icons';
export default function IconExample() {
return (
<div>
<FontAwesomeIcon icon={faHome} />
<FontAwesomeIcon icon={faUser} size="2x" />
<FontAwesomeIcon icon={faGear} spin />
</div>
);
}FontAwesome 支持 Next.js 中的服务端渲染
// 通过正确配置确保 SSR 兼容性
// app/layout.tsx - 全局 CSS 导入
import '@fortawesome/fontawesome-svg-core/styles.css';
import { config } from '@fortawesome/fontawesome-svg-core';
config.autoAddCss = false;
export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
</html>
);
}'use client';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHouse, faUser, faBell, faGear } from '@fortawesome/free-solid-svg-icons';
import Link from 'next/link';
const navItems = [
{ icon: faHouse, label: 'Home', href: '/' },
{ icon: faUser, label: 'Profile', href: '/profile' },
{ icon: faBell, label: 'Notifications', href: '/notifications' },
{ icon: faGear, label: 'Settings', href: '/settings' },
];
export default function Sidebar() {
return (
<nav>
{navItems.map(item => (
<Link key={item.href} href={item.href}>
<FontAwesomeIcon icon={item.icon} fixedWidth className="me-2" />
{item.label}
</Link>
))}
</nav>
);
}// 服务器组件中的静态图标用法
import { faHome, faUser } from '@fortawesome/free-solid-svg-icons';
// 服务器组件用法
export default function Page() {
return (
<div>
<i className="fa-solid fa-house"></i>
<i className="fa-solid fa-user text-xl"></i>
</div>
);
}