12 个用于 NextJS 项目最佳的库

开发 前端
这个我最近一直在许多项目中用作cheerio的替代品。你可以获取整个页面内容(<html><body>....</html>​),然后转换为之后可以通过querySelector、innerHTML等原生javascript dom函数进行操作的对象。

作为一只已有十年全栈开发经验的老猿,我构建过的项目不胜枚举,既有像gitup这样的小型项目,也有像crosspublic这样的大型项目,可以说是已经身经百战。

这些年来,出于以下目的,我尝试过很多工具:

  1. 提高工作效率
  2. 减少bug
  3. 减少代码编写量

最后我总结出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的库是不是很酷?

责任编辑:武晓燕 来源: 前端新世界
相关推荐

2018-01-03 11:22:45

2024-09-23 09:20:00

Python文本分析

2015-02-02 10:16:39

网络监控监控工具

2018-09-13 21:38:15

Python语言

2018-09-13 10:20:49

编程语言PythonPython库

2018-11-22 14:51:09

Python 开发编程语言

2024-01-04 16:43:42

Python前端

2019-09-17 08:47:42

DBA数据库SQL工具

2013-12-11 10:41:00

jQuery插件

2022-07-06 08:39:33

Python代码

2023-11-12 11:54:55

UX性能widget

2020-06-23 07:48:18

Python开发技术

2024-09-18 00:00:03

SSGSSR服务器

2024-05-29 05:00:00

2020-05-15 10:22:07

Python开发工具

2021-08-05 13:49:39

Python工具开发

2023-10-07 11:36:15

2022-12-04 23:39:33

机器学习AutoML

2023-10-11 12:25:35

2023-10-16 11:27:43

点赞
收藏

51CTO技术栈公众号