Within this article, you will learn about a few lesser-known but extremely handy packages that will make your NextJS web development efforts a little easier. Instead, of simply creating another generic best-of-list that only contains the most popular packages like Typescript, Tailwind, and Cypress I thought I'd focus on some of the lesser-known packages that will make your development life a little easier, are amazing, however, you may not have heard of. Stick around to the end and let me know if you agree with my list, or, not 🔥🔥🔥
Zod
The first extension that I want to review is Zod. No Zod isn't the bad dude from Superman, instead, Zod is a must-have tool if you use Typescript within your NextJS project and you need to call an API in order to get data.
When you need to call an external API, a big risk is that you have no control over what data is returned. Having no control over the data you process increases the chances of bugs occurring within your site. In a worst-case scenario, if the API fails to return the data in the way that you expect it to, your NextJS application will likely blow up.
The main benefit of using Typescript is that it provides you with improved type-checking support. Being able to define interfaces and schemas that allow you to define what data you expect to be passed into a page or component provides better guardrails to prevent mistakes from happening.
Type-checking has been proven to reduce the overall number of bugs that you find within your application. Wouldn't it be nice if you could extend this type-checking ability to the data returned by your API calls? This is where ZOD comes to the rescue.
Zod allows you to add Type checking support to the data returned from an API. Zod is highly extensible, with a wide range of built-in validators and transform functions. You can also build your own Zod validators to ensure you can type check and validate any bit of data that gets thrown at you. This makes Zod a powerful tool for working with many different types of data, including JSON, YAML, and more. To install Zod you can use this command:
Assuming we had a JSON file structured like this:
Using Zod, you could create a schema for it like this:
If you want to learn more about Zod you can from the link below:
Npm-check-updates
npm-check-updates will allow you to check for any updates to any of the NPM packages that you use within your NextJS project. If the npm-check-updates report contains out-of-date packages, you can then automatically update those packages with a different command. This makes npm-check-updates a very useful tool for keeping your dependencies up to date, which can help improve the security, stability, and performance of your NextJs projects.
Using npm-check-updates is very easy. Once you have installed it globally on your system, you can run it on your project directory using the command ncu or using the longer command npm-check-updates. Running this command will list all the outdated packages in your project and the available updates for them. You can then choose to manually update these packages using the -u.
npm-check-updates is also highly customizable, with a variety of options and flags available to tailor the update process to your needs. For example, you can exclude specific packages from being updated or set a minimum and maximum version range for updates. This is definitely a must-have extension for larger or more complex projects with many dependencies. You can install npm-check-updates using this command:
NProgress
The next package I want to tell you about will allow you to quickly and easily level up the aesthetics within your NextJS website, the package is called NProgress. NProgress will render a small progress bar whenever a page is loading. Enabling this progress bar your users will experience a smoother flow when navigating between pages on your site
In an ideal world, all your pages will be light, however in the real world sometimes you have more heavy-weight pages that take a little longer to load. Adding progress bar transitions to these pages will make them feel much more responsive.
The good news is that NProgress is easy to install within a Next website. All you need to do is include the NProgress CSS and JavaScript files within _app.js, add some event handers, and then call NProgress.start() and NProgress.done() methods respectively to show and hide the progress bar respectively.
One of the standout features of NProgress is its ability to automatically detect AJAX requests and update the progress within the bar accordingly, this all happens without you needing to do any additional coding.
Additionally, the package provides several customization options, such as changing the colour and thickness of the progress bar, as well as the ability to set custom easing and speed values. To install NProgress within your project you can use this command:
In order to enable it you will need to make a few tweaks within _App.ts. To configure NProgress you need to hook into the routeChangeStart and routeChangeComplete events emitted by Router. In the start event, you will call NProgress.start() which starts the animation. Within the complete event you will call NProgress.done() to stop the progress bar:
The only other thing to point out in this code is the include a reference to the NProgress CSS file. With this code installed, when you switch pages within your app you should now see a cool-looking progress bar!
Zustand
Zustand in German means state and if you want to manage state within your NextJs application, you should consider using this package. The first question you might ask is why should consider Zustand over something like Redux or context? As you would expect there are a few reasons. First Zustand has a simple API meaning that you do not need to mess around with reducers, actions, and dispatch to handle state. This is why using Zustand means less boilerplate code
Zustand uses hooks to provide you with easy access to the store. As you would expect store access is quick as Zustand makes effective use of memorization. Zustand supports async functions and is immutable to prevent side effects. Finally, Zustand renders components only on changes to the value of the state, and changes in the state can often be handled without having to re-render a component. The last thing to point out is that the package is pretty small, weight in at 2kb when gzipped. You can install Zustand with this command:
In order to build a new store, you can create it using code like this:
You can then implement this in code like this:
If you are looking for a lightweight and easy-to-use state management library for your React application, Zustand is definitely worth considering.
Next-sitemap
To allow a search engine to successfully crawl your NextJS site more efficiently, you should create a sitemap, A Sitemap.xml tells Google which pages and files you think are important in your site. On a NextJS website, you will not want to generate this sitemap manually you will want it to be generated automatically. Instead of you re-creating the wheel and building this capability yourself you should use up next-sitemap. One of the first things to point out is that the name is not 100% true. This package will generate a sitemap and a robots.txt file as well. robots.txt tells crawlers what not to index. This means this package is a must-have SEO tool!
As you would expect installing and configuring this package takes minutes and it's very extendable. To install this package you can use this command:
You can then configure this package by creating a file called next-sitemap.config.js within your project root. Within here you can set values like your website domain and if you would like a robots.txt file to be created. After adding this simple config, the next time you build your project a sitemap will now be created... job done!
Nookies
One of the amazing things about NextJS is that it offers both server-side rendering and client-side rendering. For me personally, this is one of the main reasons why I started to use NextJS way back when.
Having code that can execute either on a server using Node or within a browser has some gotchas. One of these areas of consideration is cookie handling. When you create a cookie it is created in the client's browser, however, sometimes you will want to access the values from your cookies on the server. In order to get the value of a cookie server-side you can use the request header. This differs from being able to access cookies directly when the code is run client-side.
For someone like me who has code OCD, I like my code to be as consistent as possible, regardless of where it is run. So instead of simply having to live with the trade-offs of using the native Javascript cookie API, Nookies offers you an alternative option.
The great thing about Nookies is that it has a simple and intuitive API that is easy to learn and use. Nookies has a single API that supports both client-side and server-side cookies. Nookies integrates with NextJS server-side rendering capabilities, meaning it is easy to retrieve cookies server-side in getServerSideProps using Nookies. Finally, in case you are worried that installing yet another package will simply bloat your bindle, the good news is that this package weighs in that less than 1KB when gzipped. To install Nookies you can use this command:
You can then set and get cookies either server-side or client-side, like this:
In summary, if you are building a Next.js application and need to work with cookies, Nookies is definitely worth considering. It provides a simple and intuitive API, good server-side rendering support, and is lightweight and easy to use.
Happy Coding 🤘
