19篇文章 · 4868字 · 1人關(guān)注
-
NextJS開發(fā)：使用swiper實(shí)現(xiàn)輪播圖
安裝swiper 創(chuàng)建組件 一定要添加"use client"，作為客戶端組件來使用 示例代碼中的樣式使用的tailwindcss 使用組件 使...
-
NextJS開發(fā)：封裝shadcn/ui中的AlertDialog組件
shadcn/ui很靈活可以方便的自己修改class樣式蔗彤，但是僅僅一個(gè)確認(rèn)刪除彈窗，需要拷貝太多代碼和導(dǎo)入太多包嫉晶，重復(fù)的代碼量太多叶洞，不利于代碼維...
-
NextJS開發(fā)：Prisma開啟SQL日志輸出
在 Prisma 中打印執(zhí)行的 SQL 可以通過在 PrismaClient 實(shí)例上設(shè)置 log 配置參數(shù)來實(shí)現(xiàn)。具體步驟如下： 在你的Pris...
-
NextJS開發(fā)：Prisma數(shù)據(jù)庫多表關(guān)聯(lián)查詢寸爆，使用include替代left join
Prisma中的多表關(guān)聯(lián)查詢實(shí)例 1礁鲁、schema.prisma中定義模型 2、查詢操作 3赁豆、查看日志中生成sql 通過sql日志可以看出仅醇，Pr...
-
NextJS開發(fā)：Image組件的使用及缺陷
Next.js 中的 Image 組件相比于傳統(tǒng)的 img 標(biāo)簽有以下幾個(gè)優(yōu)點(diǎn)： 總之，Next.js 中的 Image 組件在性能魔种、用戶體驗(yàn)着憨、...
-
NextJS開發(fā)：Prisma數(shù)據(jù)庫事務(wù)處理
Prisma是一個(gè)開源的ORM庫，用于在Node.js和TypeScript中訪問數(shù)據(jù)庫务嫡。它可以輕松地將數(shù)據(jù)庫模式轉(zhuǎn)換為GraphQL API甲抖，...
-
NextJS開發(fā)：解決React Hook useEffect has a missing dependency
NextJS編譯出現(xiàn)如下錯(cuò)誤,原因是在使用useEffect時(shí)漆改，當(dāng)我們將函數(shù)的聲明放在useEffect函數(shù)外面時(shí)或者使用useState定義的...
-
NextJS開發(fā)：ssr服務(wù)器端渲染頁面，添加加載進(jìn)度提示nextjs中ssr服務(wù)器端渲染的頁面加載速度慢的時(shí)候准谚，需要顯示一個(gè)如下圖的加載進(jìn)度提示挫剑，來優(yōu)化用戶體驗(yàn)。 nextjs框架中已經(jīng)預(yù)留了加載動(dòng)畫...
-
NextJS開發(fā)：nextjs中使用CkEditor5
NextJS項(xiàng)目中需要使用CkEditor5作為富文本編輯器柱衔，按照官網(wǎng)React CkEditor5手冊(cè)使用出現(xiàn)如下錯(cuò)誤： 還是因?yàn)閚extjs...
