“The moment we’ve all been waiting for.” But let’s go over all the new features one by one.
Perhaps I’ll start this article by quoting the conclusion of the previous one:
“When version 10 was released, it seemed like we had already implemented everything we could possibly think of. However, Vercel went beyond my expectations and added real-time collaboration.
Hussein concluded his part with the phrase “We love working with great frameworks to help developers make the web faster.” The phrase “make the web faster” became the symbol of this presentation and collaboration with Google. I’m sure Aurora will bring us much more light.
Who would have thought that just four months later, these ideas would resurface and take on even greater significance?
Now, on to the heart of the conference. Yes, this time we didn’t receive an invitation to a new version release, as was the case with Next 11 (though for some reason they also called it a conference), but specifically to a conference.
“Tomorrow will transform your career” - not a bad headline for grabbing attention. Of course, Vercel hasn’t been the kind of company that needs that for a long time. Individual tickets, chat rooms, and virtual halls - all of this creates, albeit an illusion, the feel of a real conference, and quite successfully at that; few online conferences can provide such an immersive experience.
Introduction
Now let’s return to the conference, specifically to October 26 at 4:00 PM UTC. That’s exactly when the conference began, and we were greeted by Vercel CEO Guillermo Rauch, whom we already knew well from previous releases. The phrase “Let’s make the web faster” became more than just a symbol of the previous release; it became the very essence of Next, and Guillermo reminded us of this once again. It’s nice when such things aren’t just words and ideas, but are backed up by actions and releases - which they remind us of: bundle optimization, inline fonts, critical CSS, and special components with built-in optimizations. Features that not only speed up applications but also require no extra effort. And if you forget to use components where they can be useful - such as Image instead of the classic img, Script , or Link - then Conformance will remind you and provide recommendations for optimizing those elements.
All these innovations are largely focused on improving Web Vitals metrics, which have already become fundamental in the world of fast web and have recently become an important factor in search rankings [Vercel article].
Of course, Guillermo couldn’t help but touch on the importance of developer experience. That’s exactly what the next speaker told us about.
Improvements to the developer experience
Lee Robinson, Head of DevRel at Vercel, began with a feature many have long awaited:
ES modules, which are supported by all modern browsers and reduce bundle sizes. Due to this update, the minimum Node.js version has been raised from 12.0.0 to 12.22.0 (the first version to include native support for ES modules);
URL imports. And this isn’t just about importing packages - images, logic, modules, and even components can be imported via URL. It’s clear that microservices have been gaining significant popularity in recent years, and this is an attempt to create yet another alternative to standard approaches. A very interesting alternative with clear potential. For example: importing components via URL from Storybook (something tells me we’ll see this in the near future).
But the development experience consists not only of the components we use when building projects, but also of the infrastructure that comes with the tool. Key components of this infrastructure are the compiler and the debugging process. And while the debugging process has been accelerated with every subsequent release (and this one was no exception—rebuild time during development is now under 100 ms), project build times haven’t been accelerated in a long time (not counting the switch to Webpack 5 in version 10.2).
Therefore, as the next step, Lee Robinson introduced us to integration with a new compiler written in Rust - SWC. By using it, the Vercel team was able to speed up the build process by nearly 2x. Still, a caveat is in order here - of course, a Rust compiler speeds up the build, but such a significant acceleration can only be achieved in exceptional cases. (Moreover, it’s quite odd that different versions of Yarn were used when comparing builds across different compilers - it’s possible that different devices were used for this comparison.)
Of course, the presentation wouldn’t be complete without highlighting the special features available on the Vercel platform.
Development of the Vercel platform
Next, Becca Zandstein showed commercial examples of using Next.js Live, which was introduced with the previous release and is currently still in beta testing. One of the companies that has already tried this technology is monogram.io, which develops websites, including those built with Next.js. They use Next.js Live both for their own website and for their clients, including macstadium.com. It’s easy to verify that these services use this technology - just add _live to the end of the URL: https://www.macstadium.com/_live.
Another important feature of the Vercel platform is the analytics it collects on metrics. It’s a very useful feature, but it provides the full picture too late - after the application has been deployed and is in production. Another feature is integration with third-party tools such as Sentry, Slack, logging services, and many others. Now this list has been expanded with another useful tool called Checkly, which was created specifically to solve the problem described above (receiving metrics only after deployment to production). Now, using this tool, you can configure a performance budget and monitor it during the build phase [Vercel documentation].
Middleware and edge functions
And even with that, the release notes weren’t complete, so the next topic covered was middleware and edge functions. Middleware is a kind of “layer” between a request sent from the client and the rendering of the page on the server. In other words, within this layer, you can perform: rewrites, redirects, update cookies, or stream HTML. This functionality can be used for A/B testing, authentication, geolocation-based redirects, and more. Vercel has prepared a GitHub repository with a large number of examples.
The fruits of collaboration with React and Google Aurora
The final topic discussed was the collaboration with the React and Google Aurora teams and the result of this cooperation:
- React 18;
- Server-side streaming;
- React server components.
React server components are an experimental feature that, like many other React experiments, is being actively tested in Next.js before being released for general use in React itself. Another feature that has long been discussed and anticipated in the React community is the ability to generate components entirely on the server, without any client-side code. [Next.js documentation on React 18]
Conclusion
On that wonderful note, we reached the final stage of the presentation, and Guillermo summarized this release. We can confirm the words from the invitation - this is the biggest release yet, and together with the innovations from the previous release, it will win over quite a few people.
Results
The Series C funding ($102 million) secured by the Vercel team to continue building the web of the future, along with support from Google’s “Aurora” team and a large community, made it possible to launch such a major release just four months after the previous, equally exciting release.
To summarize the presentation of the new Next release, here is a list of features that have been completed or moved to open beta:
- Out-of-the-box support for ES Modules (available starting with version 11.1);
- Importing modules and files via URL (alpha);
- A new compiler written in Rust that has doubled build speed (available starting with version 11.1);
- Checkly service for Vercel, which allows monitoring metrics during the build phase;
- Middleware (beta) for testing, authentication, redirects, and much more. In other words, for most operations that previously required Nginx;
- Server-side streaming (alpha) - page streaming during SSR development;
- React server components (alpha), which allow you to generate components without client-side code.
Useful links
Previous article about the Next.js 11 release;
Guillermo Rauch, Forbes magazine;
React 18 and React Server Components;
Upgrade guide from previous versions;
Instructions for migrating
From Gatsby;
From an app using React Router;
From create-react-app - automatic experimental utility or manually.