Libraries, frameworks, and services that will take your project to the next level.
Next.js is a great technology by itself, as it offers many great features that makes creating fast and versatile React apps and websites easily. However, the beauty of the Javascript ecosystem is that there is an abundance of hidden (and not-so-hidden) gems that will enhance your experience as a developer and the experience for the end user. In this article, I will present 9 technologies that can enhance the frontend, backend, and full-stack development and experience for your next project with Next.js.
Frontend
goober: a smaller option for CSS-in-JS
The React ecosystem has become bloated with different styling options, with arguably the most popular being CSS Modules, emotion, and styled-components. However, a lesser-known competitor to these options has the same core capabilities as other CSS-in-JS libraries, with the differentiating feature being its size: compared to 11kB and 12kB for emotion and styled-components respectively, goober comes in at less than 1kB! This will drastically reduce the bundle size of your web app and will ultimately lead to faster loading times and a better user experience all around.
Check out the project at https://github.com/cristianbote/goober.
Preact: a fast, tiny alternative to React
Preact offers the same advantages as the aforementioned library: it offers the same core capabilities as its more popular competitor, with an immensely smaller footprint. Together, React and React-DOM have a bundle size of 42.2kB (!), while Preact is about a 10th of a size at ~4kB. Preact offers direct compatibility with React and React-DOM, so you can easibly substitute React for Preact in your Next.js app.
Learn more about Preact at https://preactjs.com.
Chakra-UI: predesigned and highly-customizable UI components
Pre-made CSS frameworks and component libraries are growing increasingly popular in the world of web and mobile design, and rightfully so. You no longer have to hire a designer to create visually-appealing and attention-grabbing apps and websites. There are many component libraries available for React that come with pre-designed components and styles with which you can design and code your app, including Ant Design, Evergreen, and React-Bootstrap built on top of the bootstrap.css library. However, Chakra-UI is making a name for itself amongst all of the other component libraries because of its infinite modularity and customizability. Its components take inspiration from the likes of TailwindCSS and TailwindUI, and you can customize and tweak them to match your envisioned design.
See documentation and examples at https://chakra-ui.com.
Backend
Nest.js: a versatile web framework for Node.js
By itself, Next.js offers great options for writing lambda functions to power the backend of your application. However, the default offerings can be limiting, especially if your backend involves more complex logic than what is allowed by straightforward lambda functions. Nest.js is a popular framework made to be used for building complex server-side applications, and can be integrated into Next.js to combine the powers of both. Nest.js is inspired by the modularity of Angular, and they offer great documentation that helps with overcome the learning curve that comes with any new framework.
Visit their official website at https://nestjs.com. Bonus: for an example of how to integrate Nest.js into Next.js, follow Simon Knott’s great tutorial at https://simonknott.de/articles/Integrating-NextJS-with-NestJS.html.
Prisma: future-proof ORM and database client
The features offered by Prisma dramatically improve the developer experience of working with SQL databases. Prisma offers a schema language that allows you to easily define models that will be represented in your database, as well as the Prisma database client. Because the schema you create integrates with the Prisma Client, you can pragmatically make type-safe queries and mutations. Additionally, Prisma offers a database migration service that will automatically generate schemas for your database based on pre-existing data, and a database browser to view and manipulate your database.
Learn more about the features offered by Prisma at https://www.prisma.io.
Supabase: an open-source alternative to Firebase
Firebase is one of the most popular options for backend-as-a-service because of its great feature set and its large community and ecosystem. However, by using Firebase or its main competitor AWS Amplify, you can unknowingly fall victim to vendor lock-in, which will restrict your ability to grow and utilize other services later on. Supabase, on the other hand, is a completely open-source alternative to Firebase. The advantages of Supabase being open-source software is that it is constantly audited by the community for security flaws and vulnerabilities, in addition to not being locked into the ecosystem of Google Cloud or AWS.
Check out the Supabase project at https://supabase.io.
Full-stack
Blitz.js: a full-stack React framework built on-top of Next.js
As previously discussed, the options provided by Next.js in terms of backend development are pretty limited. Nest.js can certainly solve this problem solely on the server-side, but if you are looking for a more comprehensive solution that integrates both the frontend and backend, consider Blitz.js. As described by the official project website, “Blitz is a batteries-included framework that’s inspired by Ruby on Rails, is built on Next.js, and features a “Zero-API” data layer abstraction that eliminates the need for REST/GraphQL.” The purpose of Blitz.js was to be able to seamlessly integrate complex backend logic into your frontend React app. Blitz.js is a relatively opinionated framework, which means that much of the file and folder structure of your app is dictated by the requirements of the framework; that being said, the structure that Blitz.js incorporates will make your code organized and easy to understand.
Watch introductory videos and read about the features of Blitz.js at https://blitzjs.com.
SWR: real-time updates without sacrificing UX
As the famous quote by Phil Karlton goes, “There are only two hard things in Computer Science: cache invalidation and naming things.” Stale-while-revalidate, or SWR for short, attempts to solve the first of those two challenges. This term originated in HTTP RFC 5861, which describes a strategy to manage cache invalidation and revalidation. The React SWR library, developed by the team behind Next.js, describes the advantages of using SWR: “With SWR, components will get a stream of data updates constantly and automatically. And the UI will be always fast and reactive.” Using SWR in your Next.js app, you can implement a real-time experience to your app with automatic updates.
Learn more about SWR and the React SWR library at https://github.com/vercel/swr.
GraphQL + Apollo: improve DX and UX
By now, you have probably heard of the advantages offered by implementing GraphQL into your backend API. GraphQL allows you to easily query and mutate data by calling a single endpoint on your API. With GraphQL, you only receive the data you need, reducing the size of the HTTP response sent from your API, thereby making your app quicker. Using Next.js API routes in addition to apollo-server-micro, you can easily implement a GraphQL backend to your Next.js app that integrates with Apollo client.
View the Next.js api-routes-graphql example at https://github.com/vercel/next.js/tree/canary/examples/api-routes-graphql
Conclusion
Each of these technologies can help to improve a different aspect of your Next.js app or website, and hopefully you found some of interest and will consider using them in your next project! If you have any other suggestions, please feel free to leave them in the comments of this article.
Top comments (1)
This was extremely useful! Thank you.