12 個(gè)用于 NextJS 項(xiàng)目最佳的庫(kù)
作為一只已有十年全棧開(kāi)發(fā)經(jīng)驗(yàn)的老猿，我構(gòu)建過(guò)的項(xiàng)目不勝枚舉，既有像gitup這樣的小型項(xiàng)目，也有像crosspublic這樣的大型項(xiàng)目，可以說(shuō)是已經(jīng)身經(jīng)百戰(zhàn)。
這些年來(lái)，出于以下目的，我嘗試過(guò)很多工具：
- 提高工作效率
- 減少bug
- 減少代碼編寫(xiě)量
最后我總結(jié)出12個(gè)庫(kù)，正是它們每天兢兢業(yè)業(yè)地幫助我開(kāi)發(fā)出色的NextJS內(nèi)容，放心，我會(huì)詳細(xì)解釋它們有什么用。
一起來(lái)看看吧。
1.Trigger.dev
我們知道，NextJS可以幫助處理與后臺(tái)作業(yè)相關(guān)的所有事情。這里所指的所有事情可以是在后臺(tái)運(yùn)行的定時(shí)任務(wù)——發(fā)送電子郵件或處理系統(tǒng)中的新用戶渠道。
這導(dǎo)致我需要運(yùn)行另一臺(tái)服務(wù)器來(lái)處理這些任務(wù)，要么是外部EC2服務(wù)器，要么是帶有事件橋接的無(wú)服務(wù)器函數(shù)。
于是我不得不為額外的服務(wù)付費(fèi)，并且某些時(shí)候還得自己花時(shí)間花精力去管理。
Trigger.dev不需要我做這些，它能夠在NextJS（其他也行）上提供后臺(tái)作業(yè)。而且還可以解決為處理長(zhǎng)時(shí)間運(yùn)行作業(yè)NextJS無(wú)服務(wù)器超時(shí)限制的問(wèn)題。超棒！
圖片
2.Prisma
Prisma并不專用于NextJS。它是處理數(shù)據(jù)庫(kù)的ORM。
ORM是數(shù)據(jù)庫(kù)查詢的統(tǒng)一包裝器。它具有良好的結(jié)構(gòu)，允許你在不同的數(shù)據(jù)庫(kù)之間快速切換。
雖然ORM有很多，但Prisma的獨(dú)特之處在于Typescript的支持，提高了百倍效率。NextJS的默認(rèn)配置嵌入Typescript，使得Prisma成為絕佳選擇。
圖片
3.NextAuth.js
假設(shè)我們需要實(shí)現(xiàn)各大網(wǎng)站平臺(tái)，例如Facebook / Google / GitHub（oAuth）的身份驗(yàn)證。在這種情況下，我們必須為每個(gè)平臺(tái)創(chuàng)建或使用外部服務(wù)，如Auth0或Clerk。
如果你打算自己動(dòng)手，那么試試NextAuth。它提供成功的實(shí)現(xiàn)，你只需提供正確的密鑰即可輕松添加。
登錄之后它還會(huì)負(fù)責(zé)授權(quán)。Next.JS身份驗(yàn)證可以與Prisma配合使用。
圖片
4.Next-Sitemap
在服務(wù)器上部署NextJS后，我們需要幫助Google索引所有頁(yè)面。如果能告訴Google這個(gè)網(wǎng)站上的所有頁(yè)面，那就方便多了。
為此，可以創(chuàng)建一個(gè)列出所有頁(yè)面的sitemap.xml文件。只要使用Next-Sitemap就可以輕松實(shí)現(xiàn)了。
圖片
5.Next SEO
SEO是通過(guò)提供關(guān)鍵字、描述以及網(wǎng)站預(yù)覽圖像，使網(wǎng)站出現(xiàn)在不同搜索引擎上的過(guò)程。
如果你使用的是新的NextJS app路由，那么可能不需要使用Next SEO?？梢允褂胑xport metadata方法或generateMetadata。
但是，如果你使用的是舊的app路由，那么Next SEO是將SEO添加到網(wǎng)站的最佳方式。
圖片
6.Zod
Zod是對(duì)象驗(yàn)證器（服務(wù)器和客戶端）。你可以在對(duì)象上配置不同的規(guī)則，并在之后進(jìn)行驗(yàn)證，例如用戶名和密碼，或者更復(fù)雜的如數(shù)組長(zhǎng)度或其他鍵上的條件。Zod并不專用于NextJS。
這些年來(lái)，我見(jiàn)識(shí)過(guò)很多對(duì)象驗(yàn)證器，比如Yup和class-validator。Yup看起來(lái)不如Zod得到良好的維護(hù)，而class-validator在使用NestJS之類的東西時(shí)，用力過(guò)猛——所以你最好使用Zod。
圖片
7.React-hook-form
雖然Zod可以驗(yàn)證對(duì)象，但如果沒(méi)有自定義邏輯，它不會(huì)影響客戶端和后端。
React-hook-form是優(yōu)秀的客戶端驗(yàn)證項(xiàng)目（可以顯示輸入錯(cuò)誤、管理輸入狀態(tài)和提交）。當(dāng)然，你可以使用Zod作為React-hook-form的驗(yàn)證器。
圖片
8.tRPC
我以前沒(méi)用過(guò)tRPC，但今天的它實(shí)實(shí)在在吸引了很多人的目光。它的概念與Prisma相似；為請(qǐng)求和響應(yīng)生成接口，因此當(dāng)你使用前端調(diào)用時(shí)，可以獲取自動(dòng)完成。
很不錯(cuò)，因?yàn)檫@樣減少了bug幾率——假設(shè)你修改了后端路由，就會(huì)無(wú)法編譯項(xiàng)目——客戶端則會(huì)返回不存在的參數(shù)或響應(yīng)鍵的錯(cuò)誤。
圖片
9.SWR和React-Query
這么多年來(lái)，我一直使用Axios和fetch作為發(fā)送請(qǐng)求的基礎(chǔ)庫(kù)。
SWR和React-Query增強(qiáng)了這些庫(kù)，并提供鉤子、緩存、轉(zhuǎn)換等功能。
強(qiáng)烈推薦大家每個(gè)項(xiàng)目都用。注意，這些庫(kù)用于客戶端組件（use client），而不是服務(wù)器組件。
圖片
10.lodash
lodash不是專用于NextJS的庫(kù)。它是一個(gè)用于可變數(shù)據(jù)的庫(kù)，雖然JavaScript多年來(lái)在flatMap等原生函數(shù)方面取得了很大進(jìn)步，但仍然缺少一些東西，例如按鍵或分塊數(shù)組的唯一數(shù)組。
我發(fā)現(xiàn)自己幾乎所有項(xiàng)目中都在用lodash。可見(jiàn)它有多好用了。
圖片
11.dayjs
day.js這個(gè)庫(kù)包含與日期、格式化、時(shí)區(qū)等相關(guān)的所有內(nèi)容。
以前我一直用的是moment.js。但現(xiàn)在moment.js不維護(hù)了，我試了試dayjs，也很不錯(cuò)。
有些人更喜歡用JS函數(shù)來(lái)處理日期，但我始終覺(jué)得dayjs和原生JS date函數(shù)之間存在顯著差距。
圖片
12.jsdom
這個(gè)我最近一直在許多項(xiàng)目中用作cheerio的替代品。
你可以獲取整個(gè)頁(yè)面內(nèi)容（<html><body>....</html>），然后轉(zhuǎn)換為之后可以通過(guò)querySelector、innerHTML等原生javascript dom函數(shù)進(jìn)行操作的對(duì)象。
非常適合一些需要爬取并解析網(wǎng)頁(yè)的項(xiàng)目。
圖片
這些用于NextJS的庫(kù)是不是很酷？
