Looking into another React extension

Next.js is a popular open-source JavaScript framework for developing server-side rendered React applications. It’s simple, lightweight, and efficient, making it an ideal choice for small- to medium-sized projects.

In a nutshell, the framework enables you to get up and running with React quickly and easily. It provides a number of powerful features and components that make developing React applications simpler and more efficient. These include automatic code-splitting, hot module reloading, and routing.

It’s used in production by a number of companies, including Facebook, Netflix, and Tuenti. Next.js gained popularity in the React community for its simplicity and ability to handle the creation of universal JavaScript applications.

The good things about next.js

No need for a separate frontend or backend framework

Next.js is a minimalistic framework that helps you create server-rendered React applications. In traditional web development, the frontend and backend parts of an application were two separate things. The frontend was responsible for the user interface, while the backend handled all the business logic and stored data.

However, with the rise of single-page applications (SPAs), the distinction between frontend and backend has become less clear. In a SPA, the entire application is loaded in the user’s browser, and the backend is handled by a server-side framework like Node.js.

Next.js eliminates the need for a backend framework by taking it one step further. It allows you to create React applications that are completely server-rendered. This means that the user’s browser will download a complete HTML page, including all the necessary assets like JavaScript files, CSS files, and images. It also ships with built-in support for React components, so you can create sophisticated user interfaces without having to worry about routing, state management, and other common frontend concerns.

Server-side rendering

At a high level, Next.js works by using webpack to bundle your React app into a single file that can be run on the server.

When the app is loaded on the server, Next.js uses ReactDOMServer to render the app on the server. Next.js then sends the rendered HTML to the client, where the client-side React app takes over and renders the page.

This approach has a few benefits:

• The app is rendered on the server, so it’s available immediately to users without having to wait for the client-side React app to load.
• The client-side React app only needs to load once, even if the user visits multiple pages in the app.

Next.js also provides a number of features to make developing server-rendered apps easier, including automatic code splitting, hot module reloading, and pre-rendering.

Great for SEO

SEO, or search engine optimization, is the practice of improving the ranking of a website on search engines. This can be done through optimizing the website content, improving the website architecture, and improving off-page factors such as link building and social media presence.

Next.js is a great choice for SEO because it is a minimal, static-site generator. This means that there is no need for a server-side rendered application that would generate pages on the fly. Static pages are much easier to index and rank than dynamically generated pages.

Next.js also makes use of the pre-rendering plugin. This plugin pre-renders all of your pages on the server, so that when a user visits your website, they will get the fully rendered page, rather than a blank page that is still loading. This is another factor that can help with SEO.

Hot module reloading

Hot Module Reloading (HMR) is a process that allows you to reload changed modules in a running application without losing state. Next.js uses HMR to provide a smooth development experience.

Whenever you make a change to a Next.js module, Next.js will automatically reload the module. If the module is a web component, Next.js will also re-render the component. This makes it easy to develop Next.js applications. You can make changes to your code and see the results immediately, without having to restart the application.

So what’s the catch?

No JavaScript framework is ever perfect. Here are a few quirks of Next.js that I’ve encountered whilst working with it.

There is no standard way to do state management.

Next.js uses React’s built-in state management. React’s state management is flawed because it relies on setState() to manage component state. This can lead to inconsistencies and errors, especially for large applications where architecture and component size is not strictly enforced.

This is because setState() is that it's asynchronous. This means that the component state can change after the component has been rendered. The easy fix is to use componentDidUpdate() to monitor changes and update the component state accordingly.

Managing dependencies can be a pain over time

Yes, you can install packages using npm and Next.js will take care of ensuring that they are properly loaded and used in your application. However, dependency management can be difficult and a pain over time. This is especially true if you are using packages that are not explicitly compatible with Next.js.

One of the biggest problems with dependency management is that it can lead to the inclusion of unnecessary packages in your application. It is common for developers to use a package simply because it is popular, even if it is not actually needed for the task at hand. This can lead to bloated applications that include a lot of unnecessary code.

It is also possible for dependency conflicts to arise. This can happen when two different packages try to include conflicting versions of a library or when two packages rely on different versions of the same library. This can lead to errors and broken applications.

This, of course, is not just a Next.js problem but endemic in JavaScript projects that haven’t been cleaned up.

Handling errors and debugging can be challenging.

Developers who are new to Next.js may find the process of debugging errors and handling them a bit difficult and painful over time. This is due to the unique way Next.js handles errors.

When an error occurs in Next.js, the error is not displayed in the browser. Instead, the error is outputted to the console. This makes it difficult to determine where the error is occurring. In order to debug the error, you must open the console and scroll through the output to find the error.

In addition, the error message is not very descriptive. It usually just says "Error: Cannot find module 'xxx'". This makes it difficult to determine the cause of the error. To make matters worse, Next.js does not provide a way to handle errors gracefully. If an error occurs, the page will crash and the user will be redirected to the page's 404 page.

Is Next.js still worth it?

The perks of Next.js, overall, override the quirks. I’ve only been playing with Next.js for a little bit, so there is still a lot to uncover about the framework.

Nevertheless, in my short foray with it, the experience has been a positive one. If you want to extend your React knowledge and see it working in a different context, then give Next.js a try. It’s a good exercise in creating a cohesive app that works on the server-side and delivers a full-formed page to the front end with React.