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 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.
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?
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.
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.
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.
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!