Next.js 13.4通过CDN引入Font Awesome图标遇水合错误的解决方法

解决水合错误的方法 #

在Next.js 13.4的App Router中，不能直接在layout.js里手动编写<head>标签——框架会自动管理文档头部内容，手动插入会导致服务端渲染内容与客户端水合时的内容不匹配，进而触发水合错误。你可以通过以下两种正确方式引入CDN资源：

1. 使用App Router的Metadata API（推荐） #

在layout.js中导出metadata对象，将Font Awesome的CDN样式链接添加到links数组中：

export const metadata = {
  links: [
    {
      rel: "stylesheet",
      href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/brands.min.css",
    },
  ],
};

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

2. 使用next/head组件（兼容方式） #

如果你习惯了Pages Router的写法，也可以在layout.js中导入next/head的Head组件，在组件内部添加样式链接：

import Head from 'next/head';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <Head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/brands.min.css" />
      </Head>
      <body>{children}</body>
    </html>
  );
}

是否必须安装Font Awesome？ #

不需要。通过CDN引入是完全可行的方案，能有效避免安装包增大应用体积的问题。如果你只需要单个图标，还可以进一步优化：直接从Font Awesome官网下载对应图标的SVG文件，将其作为React组件导入或内联使用，这样只会加载单个图标的资源，比引入整个brands.min.css更轻量化。

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