🔥 Top 12 libraries for your NextJS project 🏆
Tags: webdev, javascript, tutorial, react
Published: 2023-12-12 11:47:39


![Save](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szi0gw4l049yctxjeu1p.png)

I have been a full-stack developer for the last decade, building smaller projects like [gitup](https://gitup.dev/) and bigger projects like [crosspublic](https://github.com/github-20k/crosspublic).

Over the years, I have tested different tools to:

1. Be more productive
2. Have fewer bugs
3. Write less code

I have curated a list of libraries to help you develop great NextJS stuff that I am using daily with an explanation of what you can do with them. **Let's dig in.**


![Be Better](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ap38q1ej3tqypjuebg3u.gif)

---

# 1. [Trigger.dev](https://github.com/triggerdotdev/trigger.dev)


With NextJS, I always needed help with everything connected to background jobs.

It can be a cron job running in the background to send emails or process new users’ funnels in the system.

That caused me to run another server to process those jobs, either an external EC2 server or a serverless function with an event bridge.
It would cause me to pay for extra services (manage more services) and manage horizontal scaling myself (at some point).


[Trigger.dev](http://Trigger.dev) changed that, offering background jobs on top of NextJS (and many others).
They also know how to tackle NextJS serverless timeout limit to process long-running jobs.

&nbsp;

{% cta https://github.com/triggerdotdev/trigger.dev %}Star Trigger.dev if you can 🥰{% endcta %} 

![TriggerDev](https://nevdav2.dreamhosters.com/wp-content/uploads/2023/12/triggertop.gif)

---

## 2. [Prisma](https://www.prisma.io)

Prisma is not NextJS-specific. It's an ORM to work with your database.

ORM is a unified wrapper for DB queries.
It keeps a good structure and lets you quickly change between different database providers.

While there are a lot of ORMs you can use, Prisma is unique by offering Typescript support for your queries, making everything 100x faster. NextJS imbraced typescript in their default configuration, making it a perfect match.

&nbsp;

{% cta https://github.com/prisma/prisma %}Star Prisma if you can 🥰{% endcta %} 

![prisma.gif](https://nevdav2.dreamhosters.com/wp-content/uploads/2023/12/prisma.gif)

---

## 3. [NextAuth.js](https://next-auth.js.org)

Suppose you want to implement any service provider authentication, such as Facebook / Google / GitHub (oAuth).

In that case, you must create your implementation for each provider or use an external service like [Auth0](https://auth0.com/) or [Clerk](https://clerk.com/).

If you are going to do it yourself, NextAuth provides a prosperous implementation so that you can easily add them by only providing the correct keys.

They also take care of authorization once you are logged in.
*Next.JS auth can work with Prisma out-of-the-box.*

&nbsp;

{% cta https://github.com/nextauthjs/next-auth %}Star NextAuth if you can 🥰{% endcta %} 

![authjs.gif](https://nevdav2.dreamhosters.com/wp-content/uploads/2023/12/authjs.gif)

---

## 4. [Next-Sitemap](https://github.com/iamvishnusankar/next-sitemap)

Once you have deployed NextJS on your server, you need to help google index all the pages.

It's better if you can tell Google about all the pages on your website.

For that, you can create a sitemap.xml file listing all your pages.

You can easily use Next-Sitemap for that.

&nbsp;

{% cta https://github.com/iamvishnusankar/next-sitemap %}Star Next-Sitemap if you can 🥰{% endcta %} 

![sitemap.gif](https://nevdav2.dreamhosters.com/wp-content/uploads/2023/12/sitemap.gif)

---

## 5. [Next SEO](https://github.com/garmeeh/next-seo)

SEO is the process of making your website appear on the google feed for different queries by providing keywords, descriptions, and images to your website preview.

If you use the new NextJS app router, you might not need to use it.

You can use their `export metadata` approach or `generateMetadata`,
but if you use the old app router, that's the best way to add SEO to your website.

&nbsp;

{% cta https://github.com/garmeeh/next-seo %}Star Next SEO if you can 🥰{% endcta %} 

![seo.gif](https://nevdav2.dreamhosters.com/wp-content/uploads/2023/12/seo.gif)

---

## 6. [Zod](https://github.com/colinhacks/zod)

Zod is an object validator (both server and client).
You can put different rules on an object and validate it later, such as username and password, or more complex things like the array length or conditions on other keys. *Zod is not NextJS specific.*

Over the years, I have seen a lot of object validators, such as [Yup](https://github.com/jquense/yup) and [class-validator](https://github.com/typestack/class-validator).

Yup, it looks not as maintained as Zod, and the class-validator is powerful when using things like NestJS - so you best go with Zod.

&nbsp;

{% cta https://github.com/colinhacks/zod %}Star Zod if you can 🥰{% endcta %} 

![zod.gif](https://nevdav2.dreamhosters.com/wp-content/uploads/2023/12/zod.gif)

---

## 7. [React-hook-form](https://github.com/react-hook-form/react-hook-form)

While Zod can validate objects, it will not affect your client and backend without customized logic.

React-hook-form is an excellent project for client validation (showing errors on inputs, managing the input state, and submitting).

Of course, you can use Zod as a validator for React-hook-form.

&nbsp;

{% cta https://github.com/react-hook-form/react-hook-form %}Star React Hook Form if you can 🥰{% endcta %} 

![hookform.gif](https://nevdav2.dreamhosters.com/wp-content/uploads/2023/12/hookform.gif)

---

## 8. [tRPC](https://github.com/trpc/trpc)

I would admit that I have never used tRPC before, but it looks like it's getting a lot of eyes today.

It has a similar concept as Prisma; they generate an interface for your request and response, so when you use frontend calls, you get that autocomplete.

That's great because it reduces the chance of bugs - let's say you modified a backend route, you won't be able to compile the project - the client will return an error of nonexisting parameters or response keys.

&nbsp;

{% cta https://github.com/trpc/trpc %}Star tRPC if you can 🥰{% endcta %} 

![trpc.gif](https://nevdav2.dreamhosters.com/wp-content/uploads/2023/12/trpc.gif)

---

## 9. [SWR](https://swr.vercel.app) and [React-Query](https://github.com/TanStack/query)

I have used Axios and fetch as base libraries for sending requests for years.

SWR and React-Query enhance those libraries and offer hooks, caching, transformation, etc.

Highly recommended for every project. Pay attention that those libraries are for client components (`use client`), not server components.

&nbsp;

{% cta https://github.com/TanStack/query %}Star React Query if you can 🥰{% endcta %} 

![query.gif](https://nevdav2.dreamhosters.com/wp-content/uploads/2023/12/query.gif)

---

## 10. [lodash](https://lodash.com)

This is not a NextJS-specific library.
It's a library for mutating data, and while JavaScript progressed a lot during the years with excellent native functions like flatMap, there are still things that are missing, such as unique array by key or chunking and array.

I find myself using lodash for almost any project.

&nbsp;

{% cta https://github.com/lodash/lodash %}Star lodash if you can 🥰{% endcta %} 

![lodash.gif](https://nevdav2.dreamhosters.com/wp-content/uploads/2023/12/lodash.gif)

---

## 11. [dayjs](https://day.js.org/)

day.js is a library for everything related to dates, formatting, timezones, etc.

I might get roasted for that one. I have been working with `moment.js` for years.

Now that it's not maintained anymore, dayjs is a good alternative.

Some people prefer the new JS functions to deal with dates, but I still feel a significant gap exists between the dayjs options and the native JS date functions.

&nbsp;

{% cta https://github.com/iamkun/dayjs %}Star dayjs if you can 🥰{% endcta %} 

![scrolldown.gif](https://nevdav2.dreamhosters.com/wp-content/uploads/2023/12/scrolldown.gif)

---

## 12. [jsdom](https://github.com/jsdom/jsdom)

This is not a must, but I have been using it lately for many projects as an alternative to [cheerio](https://github.com/cheeriojs/cheerio).

You can take an entire page content (`<html><body>….</html>)` and turn it into an object you can manipulate later with the “native” javascript dom functions `querySelector`, `innerHTML`, etc…

Great for projects that require some scraping.

&nbsp;

{% cta https://github.com/jsdom/jsdom %}Star jsdom if you can 🥰{% endcta %} 

![jsdomer.gif](https://nevdav2.dreamhosters.com/wp-content/uploads/2023/12/jsdomer.gif)

---

Let's connect on X? :)
[I'm here](https://twitter.com/nevodavid)

Do you use some other cool libraries for NextJS?

Let me know about them in the comments :)