如何让Phosphor-React图标在Next.js服务端组件中正常工作？

不需要给每个使用的图标单独创建客户端组件，有更高效的解决方式：

方案一：创建统一的客户端图标包装组件 #

新建一个ClientIcon.tsx文件，在顶部声明"use client"，然后封装需要的图标或做通用组件：

"use client";
import { IconProps } from "@phosphor-icons/react";
// 导入你需要的图标
import { Home, User, Settings } from "@phosphor-icons/react";

// 方式1：导出单个封装好的图标
export const ClientHome = (props: IconProps) => <Home {...props} />;
export const ClientUser = (props: IconProps) => <User {...props} />;
export const ClientSettings = (props: IconProps) => <Settings {...props} />;

// 方式2：通用图标组件，支持动态指定图标名称
export const ClientIcon = ({ name, ...props }: { name: "Home" | "User" | "Settings" } & IconProps) => {
  const IconMap = { Home, User, Settings };
  const Icon = IconMap[name];
  return <Icon {...props} />;
};

之后在服务端渲染的组件中，直接导入并使用这些封装好的客户端图标即可，无需再处理"use client"标识。

方案二：将使用图标的组件转为客户端组件 #

如果你的组件（比如page.tsx）本身可以接受转为客户端组件，直接在组件文件顶部添加"use client"声明：

"use client";
import { Home } from "@phosphor-icons/react";

export default function HomePage() {
  return (
    <div>
      <Home size={24} weight="bold" />
      <h1>我的首页</h1>
    </div>
  );
}

这种方式适合那些本身包含少量交互逻辑，或者转为客户端组件后对性能影响不大的场景。

报错原因说明 #

Phosphor React图标库内部依赖了React Context（上下文），而Next.js App Router中，服务端渲染的组件默认无法访问客户端上下文，因此直接在SSR组件中导入图标会触发报错。

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