Next.js现在建议我们使用App Dir,但是,由于现在默认情况下所有内容都是在服务器端呈现的,所以我们应该把所有需要交互的内容放在带有“Use Client”标志的组件上。
问题是Phosphor React Icons在服务器端渲染时会抛出错误,我不知道如何让它工作,因为它被用在一些组件中,而在客户端渲染是没有意义的,我是否应该为我使用的每个图标创建组件,仅用于 Package 每个图标在“use client”中?
当在服务器端渲染组件或页面中使用磷光体React图标时,我会得到以下错误:
Maybe one of these should be marked as a client entry with "use client":
./node_modules\@phosphor-icons\react\dist\lib\context.es.js
./node_modules\@phosphor-icons\react\dist\index.es.js
./src\app\page.tsx
将每个图标 Package 在客户端组件中是正确的解决方案吗?
1条答案
按热度按时间ecfsfe2w1#
不知道这是不是最好的解决方案,但这是我目前正在使用的:
我在src/assets/icons/创建了一个文件夹
在这个文件夹中,我为每个我想要使用的图标创建一个文件,并像这样导出它们:
每当我想使用它们时,我都会从这个资产文件夹中导入它们。