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