arslan-robot

/ 定义传递给子组件的props类型（如果有）

可以在 JavaScript 执行后动态插入@font-face定义。从中移除@font-face定义。

在 React 中，useRef是一个钩子，用于返回一个可变的 ref 对象，其.current属性被初始化为传递的参数（initialValue）。这个返回的对象在组件的整个生命周期内保持不变。useRef可以用来直接访问 DOM 元素或存储任何不会引起重新渲染的可变值。以下是如何使用useRef。

在React中，如果你想要暴露组件的方法给全局作用域调用，你可以使用一个全局变量来引用你的组件实例，或者使用Context API来创建一个全局状态，通过它来传递方法引用。这样，你就可以在全局作用域内调用globalMethod了。记得在使用Context时要小心，因为它会使你的应用程序的不同部分紧密耦合，所以请根据实际情况谨慎使用。

使用图片作为轮播图，替换组件代码。

NextJS、React中跨组件消息事件通知。

shadcn/ui很灵活可以方便的自己修改class样式，但是仅仅一个确认删除弹窗，需要拷贝太多代码和导入太多包，重复的代码量太多，不利于代码维护。所以进一步封装以符合项目中使用。封装cx-alert-dialog.tsx。使用CxAlertDialog组件。

这样，在运行程序时，PrismaClient 就会始终记录和打印每个执行的 SQL 查询。你可以在控制台或日志文件中查看这些日志。在 Prisma 中打印执行的 SQL 可以通过在。

通过sql日志可以看出，Prisma是通过两条sql完成的查询，先查出chapter列表，在使用chapter中的主键集合，使用In查询的account，之后再组合数据进行结果返回。4、如果想要直接使用left join查询，只能使用prisma提供的原始数据库访问方法了。1、schema.prisma中定义模型。Prisma中的多表关联查询实例。3、查看日志中生成sql。

总之，Next.js 中的 Image 组件在性能、用户体验、开发效率等方面都优于传统的 img 标签，因此在开发过程中应当优先考虑使用 Image 组件。如果你项目中有不确定的任意域名图片的需求，还是用img标签吧，没有找到nextConfig中通配符允许任意域名的配置方式。使用img标签，npm run build可能会报如下警告。next.config.js文件中加入。

Prisma使用数据模型定义和可重用模块的概念来帮助开发者快速建设可扩展、可维护的应用程序。适用于：后一条数据库，不需要前一条的返回的结果，甚至变换前后执行顺序也不影响最终结果的场景。关联保存场景，先保存主表，再用主表的自增主键来继续保存子表数据显然就不适用这种适用于嵌套事务(推荐)或交互式事务。适用于事务期间有逻辑判断是否执行后续事务分支的场景，为了支持这种用例和更多的用例，你可以通过在你的 Prisma Schema 的生成器中添加interactiveTransactions来启用交互式事务。

NextJS编译出现如下错误,原因是在使用useEffect时，当我们将函数的声明放在useEffect函数外面时。3、全局忽略，.eslintrc.json中增加如下配置。或者使用useState定义的历史变量,会报警告。2、将变量和函数内容移到useEffect内。4、使用useCallback(推荐)1、逐个添加注释忽略警告。

nextjs中ssr服务器端渲染的页面加载速度慢的时候，需要显示一个如下图的加载进度提示，来优化用户体验。nextjs框架中已经预留了加载动画的接口页面，我们只需要提那家加载动画tsx，处理页面逻辑就可以实现。page.tsx 同级目录创建loading.tsx。globals.css中添加。

还是因为nextjs的服务器端渲染造成的错误，富文本编辑器一般用在表单提交页面，没有使用ssr的必要，想要解决上面问题，动态导入组件，禁用ssr就可以解决。

shadcn/ui组件比较灵活，但是功能相比ant之类组件还是缺少太多功能，本文为shadcn/ui为button组件增加图标，加载中动画等效果。

查看任务pm2 list/# 重启# 停止# 停止所有# 删除# 删除所有# 日志# 查看所有日志pm2 logs。

也可以用top命令，查看进程系统性能占用情况。查看端口占用，工程中使用的3000。查看进程名、进程ID。

IconPark、Lucide两个很不错的图标库，如果需要用到微信、阿里等国内logo可以使用IconPark，Lucide中没有包含这些内容。封装一下，避免每个页面导入，更换图标库也更方便。安装IconPark。

NextJs中如果使用Route Handlers来编写Restful API接口，可以使用winston来将日志存储到文件。

下面方法老版本中可以使用,但是在新版本中已经提示@deprecated — Use typeof window instead。NextJS中定义的函数，可能会存在同时被服务器端组件和客户端组件同时使用的场景，如下代码可以区分当前执行代码所在场景。nextjs 13中推荐使用。

shadcn/ui的组件相比React中的Ant Design、Vue中的iview、element ui中的组件缺少太多属性，需要组合tailwindcss中定义好的class来实现效果，Headless UI有自己的优势，更加灵活，但要求对原生的css要有足够经验。

useState的set操作是异步的，不能立刻取到新值，如果想立刻取到新数值，只能额外再定义一个useRef变量作为副本，在进行set操作的同时更新useRef变量的数值，useRef变量.current可以立刻取到(使用useRef是因为函数组件内不应该使用var/let定义变量,异步操作获取var/let变量数值取到的永远都是最初默认值，例如在click事件中)useState() 的主要作用是允许您创建有状态的 React 组件，并在渲染时动态更新它们的状态。useState的两种set函数。

useEffect是React Hooks中的一个方法，它用于在函数式组件中执行ui以外的附加操作，例如从接口获取数据等，useEffect可以在组件挂载、更新或卸载时执行。

shadcn/ui示例中常见cn函数的使用，作用于合并className，多用于动态传递的className与静态className之间合并或三目运算符条件判断的className与其它className合并。动态传递的className与静态className之间合并例如page.js中使用自定义的AppAside组件，传递了className参数AppAside.tsx中可以使用cn函数来合并参数中className和静态的className

Next.js 是一款基于 React 框架的轻量级服务端渲染框架，支持csr、ssr、isr、ssg等渲染方式。与bootstrap功能类似，省去手写css样式属性的烦恼，把样式属性封装成了class，多个class可以自由组合实现页面效果。更重要的还是提供响应式支持。创建工程时已经选择了安装tailwindcss所以这里不需要再单独安装。