Is Next.js 12 really a Beast?
Explore All The New Features and Updates
In October 2021, Next.js has celebrated its fifth anniversary in San Fransisco, USA. Next.js has announced at the conference that, by far, this is their biggest release. About five years ago, they have introduced Next.js to the public. When their main goal was to create a zero-configuration React framework to simplify the overall developers’ experience. Still, now the goal is just the same, but the technology has evolved like a giant.
It is an incredible achievement that how massive the community has grown over the years. This success took the hard work of Vercel, over 1800 individual contributor developers, companies from around the globe, and the support from industry partners like Google and the React team of Facebook.
In our opinion, Next.js 12 is the most impressive version of Next.js. And after finishing this post, you will see if they have done it or not. So, without further delay, let’s jump straight into the realm of NextJS 12.
Brief on Next.js
Next.js is an open-source framework for web and app development that is built on top of Node.js to improve React-based web and app development faster. It even includes server-side rendering and generating static websites. Next.js is perfect magic for your web or app as it is super fast plus gets easily scanned by robots, and thus, it gives the best user experience.
With Next.js, you can make API calls to your PHP backend. For that, you don’t need to set up a Node.js server for yourself, Next.js by default pre-renders your page, and this page is caught on a CDN. Whereas, React is used to build web apps rendered in the client’s browser with JS. Next.js, by default, renders the whole website beforehand it reaches the client’s side.
So, what do we get from this? Rendering in the client’s browser can cause various problems. One example can be extended page loading times which can harm the site’s overall SEO.
Now let’s look at what’s new in Next.js 12.
We will be discussing the subjects mentioned below
- Rust Compiler
- Middleware (beta)
- React 18 Support
- Server-side streaming
- React server components
- ES module support and URL Imports (alpha)
- Bot-Aware ISR Fallback
- Smaller images using AVIF
- Output File Tracing
and more.
Faster builds and Fast Refresh with Rust compiler
For faster application development, Next.js 12 includes a Rust compiler. It is a new addition to the Next.js framework. The Rust compiler takes advantage of native compilation. This is built on SWC, which is an open platform for next-generation fast tooling. Locally, it is now a 3x faster refresh, and for production, they made it 5x faster. Compared to Babel, this has 17x faster (in terms of compiling).
In the rust compiler, they are some more features added. You can check them out in detail on the blog section of Nextjs.org. Also, watch their demo from the Next.js Conf.
Introducing Middleware
Middleware allows you to use code over configuration. You can run code even before a request has been completed giving you complete flexibility in Next.js. And, depending on the incoming request from the user, you can respond in a variety of ways. Middleware also uses a strict run time. Which supports standard APIs. For example, fetch.
Here is a list of places where Middleware can be used. It can be used for anything that shares logic across multiple pages.
- Authentication
- Bot protection
- Redirects and rewrites
- Handling unsupported browsers
- Feature flags and A/B tests
- Server-side analytics
- Advanced i18n routing requirements
- Logging
etc.
Preparing for React 18
Next.js is working hand in hand with the React team of Facebook. So that React’s new version, React 18, can sync well with Next.js. Try these features by using the command.
npm install react@alpha react-dom@alpha
Server-Side Streaming
Next.js is working to improve the features for React 18. It includes SSR streaming support and built-in support for server-side Suspense. It will allow you to server-render pages by using HTTP streaming. It is an experimental feature. However, once enabled, SSR will use the same strict runtime as Middleware. To enable this, use the experimental flag - concurrentFeatures: true:
React Server Components
You can render anything with React Server Components. Which includes the components themselves on the server. Server components are different fundamentally from server-side rendering. You need zero client-side JavaScript, which will allow the page to render faster.
Next.js 12 allows you to do data-fetching at the component level, expressed as JSX. Now it is possible to simplify things by using React server components. Special functions like getStaticProps or getServerSideProps will be no longer required. Furthermore, this is consistent with the React Hooks model of collocating data fetching with your components.
You can also rename any Next.js page to server.js. It is for creating a server component and importing client components directly into it. You can add functionality like upvotes to these client components because they will hydrate and become interactive.
ES Modules Support and URL Imports
ES modules are supported by all important browsers and Node.js. Because this module brings a standardized and official module system to JavaScript. This pushes the web ecosystem forward by enabling JavaScript bundles and smaller package sizes. This results in a better user experience. Nextjs.12 includes another experiment. That is support for importing ES modules with URLs. For this, no separate build step or installation is required.
Bot-Aware ISR Fallback
According to nextjs.org, “ Incremental Static Regeneration with fallback: true renders a fallback state before rendering the page contents on the first request to a page that was not generated yet. To block the page from loading (server-rendering), you need to use a fallback, ‘blocking’.
Web crawlers aka, search bots will server-render ISR pages automatically by using fallback: true, in Nextjs 12. It will restrict crawlers from indexing loading states.”
Smaller images using AVIF
Now, the built-in image optimization API supports AVIF images. It enables 20 percent smaller images in comparison to WebP. Compared to WebP, AVIF images can take a longer time to optimize. For that reason, the team of Next.js made functionality opt-in for the new images property in next.config.js:
This list format is used to determine the optimized image format from the Accept header of the request. As because AVIF is first, it will be served if the browser supports AVIF. Otherwise, if the browser supports WebP, then WebP will be served. If neither format is supported, the original image format is used.
Output File Tracing
On the release of Nextjs 8, the Next.js organization introduced the target option. Which used to allow for outputting Next.js pages as standalone Javascript bundles. It is by bundling all dependencies using webpack during the build. But this wasn’t ideal. So, they created the @vercel/nft. Over two years on all deployments it has been used.
Now, they are making improvements to the Next.js framework by default for all deployment platforms. And providing a significant approach that is improved over the target option.
Wrapping Up
There is more to Next.js 12 than I described in this brief article on Nextjs 12 features and updates. So, if you guys are interested in this beast version of Nextjs, then make sure to visit their website and read and watch content regarding this topic.
In some of the templates of our company, we’ve already implemented Nextjs 12. There are products of ours that have other versions of Next.js that were implemented.
Author - Uttam Kumar Dash
Here is one of our Next. js 12-based eCommerce templates.