Top 10 Libraries and Tools for Next.js
Posted on: August 08 2024
There is no doubt that the Next.js framework has gained steady popularity within the React community and with it, new tools and libraries are emerging that are essential for any Next.js project.
In this article I'll be covering some of the top libraries and tools that have become really useful for any Next.js project large or small.
I've limited this list to ten items and I could have probably named at least twenty but I think these are some key tools that have helped me and I hope they will help you too.
What should I look for in a Next.js library?
The Next.js framework supports some of the latest specifications of React with advanced server side rendering, so some libraries you might be considering using might not be compatible yet. Here's a couple things to look for:
- Should support Node.js 18 or greater
- Should be at React 18 or greater
- Should support server side rendering that can be used in React Server Components (RSC)?
If any library references the browser DOM elements like document, it can only be used in the client side only scope, so try to find libraries that can be used on the client or server side if possible.
What libraries are best for Next.js?
There is definitely a shift away from the SPA strategy of development we were focused on the last several years. Here's a few key differences:
- No need for centralized state management, use RSC, caching, providers and hooks.
- No libraries needed for code splitting, even if using workspaces.
- Off-load the heavy lifting of data fetching to RSC.
- Focus on more streamlined client components without using fetch if possible, data should cascade from RSC or providers.
- Close the gap between client and server components without too much abstraction in design patterns.
- Move to more of a Jamstack development approach.
So on that note, here's some libraries that are quickly becoming part of the everyday Next.js stack.
1. Payload CMS
Payload CMS
Headless CMS Built with TypeScript and React
Payload is one of the fastest growing open source headless CMS solutions and worth showcasing here since they have just released their latest version 3.0 with full native support for Next.js.
More and more companies are leveraging an external headless CMS to manage backend database content, however, Payload brings a powerful CMS directly inside of your Next.js application, including:
- Full admin interface for managing content collections.
- Flexible content collection relationships.
- Authentication and authorization support for signin/signout and content collections.
- Block-based layout and form building
- Custom Block development
- Access collections using a Node API, REST API or GraphQL in a consistent manner across your app.
- Currently supports MongoDB and Postgres
- And much more
Payload 3.0 builds together with your Next.js app into a single bundle and is easily deployable to cloud hosting environments or any Node.js supported provider.
The Payload team is really doing great things these days and this is definitely one of the top tools to keep an eye on in the future.
2. Drizzle ORM
Drizzle ORM
Drizzle ORM is a lightweight and performant TypeScript ORM.
No application would be complete without a database ORM mapping tool these days. There are many great ORM's out there but Drizzle definitely weighs in as a great companion to Next.js
Drizzle offers some really good benefits and flexibilities, such as:
- Schema definitions are strongly typed using TypeScript.
- Schemas are flexible and can be separated and combined anyway you need.
- Simple configuration and setup.
- Comes with Drizzle Kit for migrations, push and pull support.
- Building queries, selects, inserts, updates and deletes have a strong similarity to SQL.
- Batch processing support.
- Drizzle suports Next.js edge and is serverless ready for fast performance.
- Drizzle has zero dependencies and a 31KB zipped footprint.
This has quickly become one of my favorite ORM tools and can really make development easier.
3. Tailwind CSS
Talwind CSS
A utility-first CSS framework that can be composed to build any design, directly in your markup.
Even though Next.js ships with Tailwind CSS, it's definitely a tool to consider in your stack. There are many benefits to using it, including:
- It's a zero runtime CSS framework and ideal for SSR.
- Greatly reduces the need to write CSS classes but can do so if needed.
- PostCSS supports nested sytnax like Sass or you can even use Sass together.
- Great plugin support.
- Custom plugins support CSS-in-JS syntax for complex nested selectors.
- Comes with default color palette and easy to create custom themes.
- Has an excellent grid system.
- Has typography plugin
- Has form field plugin
Tailwind CSS also has extensive community support in blogs and video channels.
I think overall Next.js users will benefit the most from using a CSS framework that is server side friendly, whether that's just using plain old CSS, Sass or Tailwind CSS.
Here's some recent articles that go into much more detail on how to use Tailwind CSS for various frontend design approaches.
Best Practices Tailwind CSS Typography Plugin
Tailwind Plugins Index
Tailwind CSS Variants and Composition
How to Style Form Inputs with Tailwind Form Plugin
4. MDX Remote
MDX
MDX lets you use JSX in your markdown content
There is no doubt that MDX has emerged in the React community as an excellent way to blend Markdown with React JSX. They have currently reached an MDX 3.0 release.
It's quite impressive in the many ways how MDX can be applied and used to create page content or even interactive documentation.
Next.js has really great support for Local MDX markdown rendering but in order to load MDX from remote sources like content saved in a database or even local file content, you'll need a library to compile the MDX code.
There are some significant difference between Local and Remote MDX and each has their proper use case. Click here for more information on Getting Started with MDX which will cover setup and examples using both techniques.
Some of the benefits include:
- Import existing or create custom React JSX components into Markdown.
- Import Rehype or Remark plugins to enhance Markdown.
- Create custom layouts (Local only but worth mentioning here).
- Layout wrapper support for both
- Override and customize HTML tags.
- Utilize Tailwind Typography
prose to beautify your rendered HTML.
- Meta data using YAML based Front Matter.
Here's an article where I cover how to Build a Blog with MDX and Next.js from start to finish using Remote MDX.
The possibilities are really endless and we're sure to see new ways to use this technology as it progresses.
React Hook Form
Performant, flexible and extensible forms with easy-to-use validation.
Forms are the cornerstone of every application and when React started out most developers found it hard to validate forms since React didn't provide a consistent way to validate.
React Hook Form has definitely taken center stage when it comes to form vaidation making it easier than ever before, including such features as:
- Uses a simple React hook to manage form inputs.
- Utililizes built-in input form validation attributes.
- Can add inline validation, centralized or even schema type validation.
- Can support more complex components from various UI libraries using the
Controller component.
- Great support for customized error handling.
- TypeScript support.
This is definitely one of those libraries I wish I had when I first started using React. Even though there are others like Formik, these other libraries don't seem to be maintained at the present moment.
React Hook Form has a large following and seems to be the most viable option.
6. Zod Typescript Schema
Zod
TypeScript-first schema validation with static type inference
The Zod schema validation library has gained a lot of traction over the past couple years and supports the following:
- Build simple or complex TypeScript type schemas that can be used to validate object values.
- Use schema resolver adapters to validate form field values with
@hookform/resolvers using react-hook-form.
- Generate Zod types from imported JSON schema using
json-schema-to-zod.
This is a great library for validating form input and can be used with react-hook-form by using @hookform/resolvers/zod resolver.
The @hookform/resolvers package also has great support for other schema validation tools like Yup, Joi and io-ts to name a few.
7. Tanstack Datatable
Tanstack Datatable
Headless UI for building powerful tables & datagrids
The Tanstack Datatable is basically an alternative datatable grid to the very popular Ag Grid. In fact they are working closely together to ensure thorough support for the same features.
The Tanstack Datatable is a headless UI and supports the following:
- Complete control over HTML markup and styling.
- Component based approach to build datatables.
- Supports all types of CSS frameworks including Tailwind CSS.
- Has a smaller bundle size since it doesn't need extra themed CSS.
- Provides full control and flexibility.
I have always found that data grids that provided a component based way of building datatables, were always easier to customize.
In addition, you can have more variations for different types of grids rather than trying to customize a themed CSS file to fit all use cases.
Both datatable grid options are available and both are definitely top shelf tools for building large scale data driven Next.js apps.
8. React Icons
React Icons
All of the popular free font based icons
Every web application needs some icons once in a while and the React Icons library provides just about all of the icons you'll need to build apps.
Since the library uses ES6 imports to load icons, only the icons you import will be bundled to keep your deployment bundle size smaller.
The React Icons website also has an excellent way of selecting icons and provides the import path and also a component example to easily insert the icon on your pages.
9. Iron Session Authentication
Iron Session
iron-session is a secure, stateless, and cookie-based session library for JavaScript.
Iron Session is a simple way to add HTTP Only, stateless session cookies for authentication to secure your Next.js app. Most applications like Wordpress utilize a simple stateless cookie session for basic authentication.
By using Next.js middleware, an authentication and authorization layer could be added to declaritively control access to pages and api routes.
You can also apply authorization security measures in the following ways:
- Server Actions
- Route Handlers
- Data Access Layer
Overall, having a simple and easy way to secure your Next.js is essential.
If you need to authenticate with other providers, you can use an OIDC OAuth flow with a library like Auth.js.
This will allow users to authenticate with just about any major sites like Google, GitHub and Okta to name a few.
Using Auth.js will require more database setup and will require databases to use a UUID or CUID primary keys. So if your database use Integers you could face some issues.
Sometimes, using 3rd party services might be a better option in these cases.
10. Class Variance Authority (CVA)
CVA
CSS-in-TS library for building type-safe UI components
The CVA library is primarily something that can be used for Tailwind CSS but could be used with standard CSS as well.
This library provides a TypeScript way of building variant styles for components similiar to the Vanilla Extract approach except more class driven than block styles.
This library can really take a lot of the complexity out of applying variants based on React props and makes adding variants simple with cleaner code. Some of the benefits of CVA include:
- Strong interface typing for variant options.
- Can create reusable type interfaces that can be used in multiple components.
- Uses CLSX for safely merging Tailwind utility classes.
- Support for compound variants.
- Full support CLSX conditional logic.
Here's a more in-depth article on how to use CVA.
Building React Component Variants with Tailwind CSS .
In Conclusion
Maybe next time I'll write a more extensive post and I'll include the other ten libraries but I think for now we've seen some really good libraries and tools for Next.js development.
There are so many packages out there to choose from and hopefully this article will have provided some idea of how to decide on the best tools for your Next.js stack.