NextJS开发教程

安装swiper 创建组件 一定要添加"use client"，作为客户端组件来使用 示例代码中的样式使用的tailwindcss 使用组件 使用图片作为轮播图，替换组件代码

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

Prisma中的多表关联查询实例 1、schema.prisma中定义模型 2、查询操作 3、查看日志中生成sql 通过sql日志可以看出，Prisma是通过两条sql完成的查询，先查出chapter

Next.js 中的 Image 组件相比于传统的 img 标签有以下几个优点： 总之，Next.js 中的 Image 组件在性能、用户体验、开发效率等方面都优于传统的 img 标签，因此在开发过程

Prisma是一个开源的ORM库，用于在Node.js和TypeScript中访问数据库。它可以轻松地将数据库模式转换为GraphQL API，并提供查询和变更解析器。Prisma支持多个数据库，包括

NextJS编译出现如下错误,原因是在使用useEffect时，当我们将函数的声明放在useEffect函数外面时 或者使用useState定义的历史变量,会报警告 解决方法： 1、逐个添加注释忽略警

nextjs中ssr服务器端渲染的页面加载速度慢的时候，需要显示一个如下图的加载进度提示，来优化用户体验。 nextjs框架中已经预留了加载动画的接口页面，我们只需要提那家加载动画tsx，处理页面逻辑

NextJS项目中需要使用CkEditor5作为富文本编辑器，按照官网React CkEditor5手册使用出现如下错误： 还是因为nextjs的服务器端渲染造成的错误，富文本编辑器一般用在表单提交页

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

nextjs项目有多种部署方式，本文介绍最简单的一种方式，将源码上传到云服务器，编译后使用pm2后台运行nextjs工程。 检查node、npm是否安装 查看npm版本，如果版本较低先升级npm版本

查看端口占用，工程中使用的3000 查看进程名、进程ID 使用PS命令 显示结果 USER: 显示每个进程所属的用户。 PID: 进程的唯一标识符（Process ID）。 %CPU: 进程当前使用的

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

NextJs中如果使用Route Handlers来编写Restful API接口，可以使用winston来将日志存储到文件。 winston Winston是一个Node.js的日志记录库，它可以帮

NextJS + shadcn/ui实现 shadcn/ui的组件相比React中的Ant Design、Vue中的iview、element ui中的组件缺少太多属性，需要组合tailwindcss

useState的set操作是异步的，不能立刻取到新值，如果想立刻取到新数值，只能额外再定义一个useRef变量作为副本，在进行set操作的同时更新useRef变量的数值，useRef变量.curre

shadcn/ui示例中常见cn函数的使用，作用于合并className，多用于动态传递的className与静态className之间合并或三目运算符条件判断的className与其它classNa

一、初识NextJS 1、NextJS简介 Next.js 是一款基于 React 框架的轻量级服务端渲染框架，支持csr、ssr、isr、ssg等渲染方式。 2、服务器端渲染 服务器端渲染主要解决的