🔥 适用于 NextJS 项目的 12 个顶级库 🏆 1. Trigger.dev

2025-05-28

🔥 适用于 NextJS 项目的 12 个顶级库 🏆

1. Trigger.dev

节省

在过去的十年里,我一直是一名全栈开发人员,构建过像gitup这样的小型项目和像crosspublic这样的大型项目

多年来,我测试了不同的工具来:

  1. 提高生产力
  2. 减少错误
  3. 编写更少的代码

我整理了一份库列表,旨在帮助你开发我每天都在使用的优秀 NextJS 产品,并解释了它们的用途。让我们深入了解一下。

变得更好


1. Trigger.dev

使用 NextJS 时,我总是需要与后台作业相关的所有方面的帮助。

它可以是一个在后台运行的 cron 作业,用于发送电子邮件或处理系统中新用户的漏斗。

这导致我必须运行另一台服务器来处理这些作业,要么是外部 EC2 服务器,要么是带有事件桥的无服务器函数。
这会导致我支付额外的服务费用(管理更多服务),并且(在某些时候)需要自己管理水平扩展。

Trigger.dev改变了这一现状,在 NextJS(以及许多其他平台)之上提供了后台作业。
他们还知道如何解决 NextJS 无服务器超时限制,从而处理长时间运行的作业。

 

如果可以的话,Star Trigger.dev

触发装置


2. Prisma

Prisma 并非 NextJS 独有的。它是一个与数据库协同工作的 ORM。

ORM 是数据库查询的统一包装器。
它保持了良好的结构,并允许您在不同的数据库提供商之间快速切换。

虽然有很多 ORM 可供选择,但 Prisma 的独特之处在于它为查询提供了 Typescript 支持,使所有操作速度提升了 100 倍。NextJS 在其默认配置中嵌入了 Typescript,使其成为完美的匹配。

 

如果可以的话,星光稜镜

棱镜.gif


3. NextAuth.js

假设您想要实现任何服务提供商身份验证,例如 Facebook / Google / GitHub(oAuth)。

在这种情况下,您必须为每个提供商创建实现或使用外部服务(如Auth0Clerk)

如果您要自己做,NextAuth 提供了一个丰富的实现,以便您只需提供正确的密钥即可轻松添加它们。

一旦您登录,他们还会负责授权。Next.JS
身份验证可以开箱即用地与 Prisma 配合使用。

 

如果可以的话请为 NextAuth 点赞🥰

authjs.gif


4. Next-Sitemap

一旦您在服务器上部署了 NextJS,您就需要帮助 Google 索引所有页面。

如果您可以告诉 Google 您网站上的所有页面,那就更好了。

为此,您可以创建一个列出所有页面的 sitemap.xml 文件。

您可以轻松地使用 Next-Sitemap 来实现这一点。

 

如果可以的话,请为 Next-Sitemap 加星标 🥰

站点地图.gif


5.下一个SEO

SEO 是通过在您的网站预览中提供关键字、描述和图像,使您的网站出现在针对不同查询的 Google Feed 中的过程。

如果您使用新的 NextJS 应用路由器,则可能不需要使用它。

您可以使用他们的export metadata方法或generateMetadata
但如果您使用旧的应用程序路由器,这是向您的网站添加 SEO 的最佳方法。

 

如果可以的话,请关注下一个 SEO 🥰

搜索引擎优化.gif


6.佐德

Zod 是一个对象验证器(服务器和客户端均可)。
您可以对一个对象添加不同的规则,然后稍后进行验证,例如用户名和密码,或者更复杂的规则,例如数组长度或其他键的条件。Zod并非 NextJS 独有的。

这些年来,我见过很多对象验证器,例如Yupclass-validator

是的,它看起来不像 Zod 那样维护,并且在使用 NestJS 之类的东西时类验证器功能强大 - 所以你最好使用 Zod。

 

如果可以的话,星际佐德

zod.gif


7. React-hook-form

虽然 Zod 可以验证对象,但如果没有定制逻辑,它不会影响您的客户端和后端。

React-hook-form 是一个用于客户端验证(显示输入错误、管理输入状态和提交)的优秀项目。

当然,您可以使用 Zod 作为 React-hook-form 的验证器。

 

如果可以的话,使用 Star React Hook Form 🥰

钩形.gif


8. tRPC

我承认我以前从未使用过 tRPC,但今天它似乎吸引了很多人的关注。

它具有与 Prisma 类似的概念;它们为您的请求和响应生成一个接口,因此当您使用前端调用时,您会获得自动完成功能。

这很棒,因为它减少了出现错误的机会 - 假设您修改了后端路由,您将无法编译项目 - 客户端将返回不存在的参数或响应键的错误。

 

如果可以的话,请关注 tRPC 🥰

trpc.gif


9. SWRReact-Query

多年来,我一直使用 Axios 和 fetch 作为发送请求的基础库。

SWR 和 React-Query 增强了这些库并提供钩子、缓存、转换等。

强烈推荐用于每个项目。请注意,这些库适用于客户端组件(use client),而不是服务器组件。

 

如果可以的话,请为 React Query 点赞 🥰

查询.gif


10. lodash

这不是一个 NextJS 专用的库。
它是一个用于修改数据的库。虽然 JavaScript 多年来凭借像 flatMap 这样优秀的原生函数取得了长足的进步,但它仍然缺少一些功能,例如按键唯一数组或分块和数组。

我发现自己几乎在任何项目中都使用 lodash。

 

如果可以的话给 lodash 点个星

lodash.gif


11. dayjs

day.js 是一个与日期、格式、时区等相关的库。

我可能会因为这个被嘲笑。我已经和他合作moment.js好几年了。

现在它不再维护了,dayjs 是一个很好的替代品。

有些人更喜欢使用新的 JS 函数来处理日期,但我仍然觉得 dayjs 选项和原生 JS 日期函数之间存在明显差距。

 

如果可以的话,给星星一天🥰

向下滚动.gif


12. jsdom

这不是必须的,但最近我在很多项目中使用它来替代cheerio

您可以获取整个页面内容(<html><body>….</html>)并将其转换为一个对象,以便稍后使用“本机” javascript dom 函数querySelectorinnerHTML进行操作...

非常适合需要一些抓取的项目。

 

如果可以的话,给 jsdom 点个星

jsdomer.gif


我们在 X 上联系吧?:)
我在这里

您是否使用了其他一些很酷的 NextJS 库?

请在评论中让我知道:)

文章来源:https://dev.to/nevodavid/top-12-libraries-for-your-nextjs-project-1oob
PREV
我的 Git 别名
NEXT
🎉 加入小队,贡献代码,并赢得 10 位优秀赞助商提供的精美礼品🚀 在评论中分享您的门票👇