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