React is considered as the most popular way to build web applications today. Although this is undeniably true, it was quickly realized that it's impossible to build a fully-featured production application with React alone. React is responsible for the view layer of an application. Still, developers have to make choices regarding other features needed for fully-featured production applications, such as routing, styling, optimizations, configurations, and more.

In this article, you learn about Next.js, a framework that many developers consider as the future of React. You'll see why it's beneficial and find out what features the latest version, Next.js 12, brings to the table.

What is Next.js?

Before diving into Next.js, you should remember a few things about React. React is a library that helps you create user interfaces. As previously stated, it is only responsible for an application's view layer, and from there, developers must make decisions about the app's other features. For example, you should consider how you would implement routing, data fetching, authentication, etc.

Next.js, on the other hand, is an open-source, JavaScript front-end web development framework based on the popular React library created by Facebook. Next.js is built on top of React and abstracts some of the complexity while at the same time allowing easy development of scalable React applications. It comes loaded with a lot more features that enable you to build full-fledged production-ready applications, including all the aforementioned features, plus many more. Furthermore, there is no need for configuration or to install additional packages because Next.js includes everything.

Next.js allows developers to create both static loading and dynamically rendered websites in a short amount of time. While React renders all content on the client side, Next.js enables applications to render on the server using its resources, which adds flexibility and resolves some of the common issues associated with React rendering on the client side. This is why Next.js has become one of the most recommended tools to extend the capabilities of React.

Why Next.js?

As mentioned above, Next.js is considered by many web developers and professionals as the future of React. But what sets it apart from other frameworks that justifies this bold prediction?

Performance

Developing high-performance React applications on a large scale is extremely difficult, and there are numerous factors to consider. With Next.js, you don't have to worry about the complexity of building a performant application because it abstracts a lot of it away for you. Features like minifying JavaScript, code splitting, pre-fetching assets, caching builds, and many other performance optimizations will make it easier for you to deliver a satisfying experience to your customers more efficiently.

Developer Experience 

With Next.js, you get a lot of features right out of the box. This saves you time and effort from having to set up multiple plugins each time you start a new application from scratch. For instance, if you want to use Typescript, you can rename the file, and it will set up your Typescript configuration for you. If you want to add images or other public assets, you can create a new folder and add files there. The same can be said for CSS and SASS support, which was built right into the framework.

Debugging within Next.js is also very convenient. A modal appears, which shows you exactly where the error is and includes source maps to aid your debugging efforts. In addition, Next.js has a feature called React fast refresh, which essentially allows the React state to be preserved when components are changed. So, even if you introduce an error and then fix it, the React state will still be present in your application.

All of the features mentioned here, as well as others integrated directly into the framework, like image optimization and internationalization, provide an excellent developer experience.

Deployment Options

Even though Vercel is most likely the best choice, other options exist to deploy your Next.js projects. Essentially, your Next.js project can be hosted anywhere with a Node server. You can, for example, deploy to AWS or even self-host, as Apple does.

There's also Next.js export, which lets you create a fully static site and host it on a platform like GitHub Pages. You also need to consider incremental adoption when it comes to deployment because it's very likely, that you are dealing with a legacy application that you are trying to rewrite in Next.js or React. With Next.js, you can directly implement redirects and rewrites, making it easy to incrementally adopt your application and send some traffic to your legacy project while other traffic goes to the new one.

Large and Active Community 

Google engineers, as well as the Facebook React team, have expressed enthusiasm for Next.js. Many Fortune 100 companies use Next.js in production, indicating that large organizations are developing applications with it, and this can be seen in community adoption as well. The Next.js GitHub discussions are very active, and the most recent conference in October 2021 was a huge success. Next.js has a fantastic thriving community that will help it grow even further as more people build hybrid React applications.

Vercel, the company behind Next.js, has become one of the fastest-growing SaaS companies in the tech industry largely because companies like McDonald's, Uber, Facebook, and many others deploy Next.js on their frontends. When Vercel announced in June 2021 that it secured $102M in Series C funding, experts foresaw Next.js taking a big step forward. CEO Guillermo Rauch did not want to waste much time. In October 2021, Rauch and the Vercel team launched Next.js 12.

What’s Next in Next.js 12?

The release of Next.js 12 was met with enthusiasm because of all the changes and new features that set the bar high for what a full-stack framework was expected to do. Let’s take a look at some of the most important.

Rust Compiler

Next.js 12 uses a Rust compiler rather than a JavaScript compiler, resulting in much faster builds. It doesn't require any knowledge of Rust to use; it makes Next.js faster by replacing Babel, which is important because large and complex applications take a long time to build. Developers who have used it have reported significantly faster refresh and build times, which is a significant improvement.

Middleware

Although middleware is a concept used by other frameworks, Next.js 12 takes it to the next level. Developers want both speed and dynamic content at the same time, and Next.js is leading the way in making that a reality. Edge Functions is a feature from Vercel. These are serverless functions, similar to AWS Lambda or Google Cloud Functions, but they're deployed like a CDN, ensuring that your end-users get lightning-fast execution with no delays.

This is where middleware comes in. Create a file called underscore middleware (_middleware) in your project's pages directory. From there, you can export a function called middleware. This function will provide you with access to the incoming request and allow you to modify it before it is rendered. If you only want the middleware to run on a subset of pages, you can scope it to subdirectories.

Assume you need to validate a user authentication credential on each page. If the user is not logged in, you want to redirect them to the home page; otherwise, you want to perform some other action. Rather than importing logic into each page, you can define it in the middleware, which will run on each page automatically, with the added benefit that the middleware is hosted on Edge Functions when you deploy. Instead of a single centralized node server, your backend code is deployed to the Edge, which is closer to the end-user and therefore faster.

React 18 Support

The team that developed Next.js 12 worked closely with React’s team from Facebook to support all the new features of the library’s latest stable release.  React 18 which was released in March 2022 includes features like automatic batching, concurrent rendering APIs, a new streaming server renderer that includes React.lazy support, and many more. Additionally React 18 has expanded the capabilities of Suspense that now go way beyond code splitting. Even though it’s still experimental and not fully adopted yet, with Next.js 12 you can use Suspense for data fetching or the Server Components feature which you’ll see right away.

React Server Components

React Server Components allow you to natively render HTML from a React component on the server and make page rendering a lot faster. When designing full-stack web applications with server components, HTML streams directly from an Edge function and shows updates progressively as data comes in.

By changing the name of a file or page to dot server.js (.server.js), you inform the framework that the file is a server component. When this component is rendered, zero client-side JavaScript is required, meaning the end-user downloads fewer data, resulting in a faster rendering.

In addition, the component is capable of directly fetching data, which makes it extremely efficient to build applications. You use react patterns from start to finish or server to client. Because you'll almost certainly need some interactive JavaScript for the client, you can also import regular client components, which will be rendered on both the server and the client. The combination of server components and middleware provides an incredible method for developing an app.

URL Imports

With Next.js 12, ES modules can be imported via URLs instead of npm. This is useful for importing JavaScript modules from a CDN, but you can also use remote URLs in your CSS or import images directly into your code. As a result, Next.js can process remote HTTP(S) resources similarly to how it handles local dependencies.

Conclusion

Next.js 12 is expected to drastically change the way you build React applications. Developers now have more tools available to improve their workflows. This groundbreaking release, along with the framework's existing performance and great developer experience, sets the Next.js framework apart from the competition.

At Solwey, we understand tech trends and can leverage innovative solutions to help your business grow. If you are interested in using Next.js 12, contact us to learn more!

‍