On October 25, the Next team will hold a presentation dedicated to the new, 13th version. As is tradition, this update is being called the biggest yet. It could affect literally everything—from further build speed improvements to changes in the application structure and new abstractions.
Next.js is the largest framework for web application development. It was created six years ago, on October 25, 2016. Since then, 12 major releases have been issued, making the web faster and faster. Despite the framework’s complexity, the size of each subsequent release did not decrease, though the pace of updates did slow down.
Three years ago, the Next.js team held its first release-focused conference and made it an annual event. The exception was the presentation of version 11, which took place in June 2021. This article will discuss what features were completed in the latest updates and what we can expect at tomorrow’s conference.
About the Conference and Release
This is the first conference that will also be held in person, in San Francisco. At the same time, over 90,000 users have registered for the online conference, eager to find out live what exactly the Vercel team has prepared.
Since the last major release, three minor versions have been released; the last time this happened was with version 9, for which a total of five minor versions were released. This is largely due to the fact that the previous version was particularly notable for the amount of unfinished features released in alpha and beta versions. In the minor updates, all features were gradually finalized and moved to the stable API section.
The main non-technical change is the new Next.js logo, which has become simpler and clearer. It is now shorter, making it more convenient to use on websites and in images. While the width remains the same, the height has been reduced by a factor of three.
Layout RFC
In May of this year, Next.js unexpectedly released an RFC (request for comments). It primarily discusses a new abstraction—layouts—as well as a host of related changes aimed at speeding up development, improving the developer experience (DX), and standardizing practices through new conventions.
This working proposal literally describes the future look of the framework and turned out to be so comprehensive and ambitious that I decided to write a separate article about it - Layout RFC.
Middleware
One of the biggest updates in the previous version was middleware. It was introduced as a beta feature. It was added to handle user requests in the edge runtime, including performing rewrites and redirects. Initially, the files were named with an underscore at the beginning (_middleware) and stored in the root directory of the pages.
Starting with version 12.2, the file is simply named middleware and is stored in a folder one level higher, with only one file per application (previously, there could be multiple such files). The file itself specifies the exact paths for which it should operate. This change is explained by performance improvements and support for the upcoming Layout RFC.
On-Demand Incremental Static Regeneration (Stable)
Incremental Static Regeneration is an approach to page generation that allows pages to be updated incrementally (i.e., after the application has been built and is already running).
Version 9.5 introduced ISR, which worked according to the following principle: a time interval was specified for a page, and the page was updated no more frequently than this interval after a user request.
That is, the page was generated → users see the generated page → after the time interval elapsed, the first request triggers a page rebuild, but that user receives the old version → after the rebuild is complete, users will receive the new version, and the interval starts over.
In version 12.1, a new approach to incremental regeneration was introduced as a beta feature. Now, in any API, you can trigger a page rebuild by calling a method on the response object (res.revalidate("/path/to/page/")). In version 12.2, this feature has been marked as stable.
Improved SWC Support
Build acceleration is an integral part of every Next.js release. This time, the build process has been accelerated by another 40%. Minification, meanwhile, is now 7 times faster.
Despite this significant speedup, minification with SWC is disabled by default, and a special flag - swcMinify - must be added to the config to enable it. Starting with the next release, this feature will be enabled by default.
Separate Folder
To run the application, a number of necessary files must be transferred to the server—packages, public files, and the built application. The latter, in turn, contains many files unnecessary for running the application, which take up a lot of valuable space.
The goal of the new feature is to create a standalone folder that contains all the files necessary for the application to run and nothing extra. It is enabled by adding anoutputkey with the valuestandalone to the config.
However, this folder is not entirely standalone, as you will subsequently need to move the modules and the public folder into it, as shown in the example from Next.js in the Dockerfile.
Images
Next.js uses its own component for images, which can dynamically compress images and apply the necessary styles to them. It has been constantly updated, sometimes improving workflows and developer experience, and other times speeding up the compression process.
A new component for working with images will be added in the next release. Currently, it is located atnext/future/image. In the next release, it will be moved tonext/image, while the old component will be available atnext/legacy/image.
This could work for all images, including those located outside the site, so it was possible to specify from which domains images could be loaded and, consequently, compressed. To do this, theimages.domains key was added to the config. In recent updates, theimages.remotePatterns key was added, which, unlike the previous option, checks for a match rather than an exact match.
It is now also possible to disable image optimization entirely by adding theimages.unoptimized flag to the config.
React Support Improvements
The Next.js team always prepares for future React.js releases in advance. For example, support for React v18 was available even before the official release, and server components began testing before their final design was finalized. In addition to Next.js functionality, the new release also describes server components, which will now be fully integrated into the process.
In the latest release, Next.js introduced a number of React-related updates available in the alpha version. These include Server-Side Suspense, Streaming SSR, and server components. In version 12.1, this functionality was moved to the beta version. In the next version, these features will likely be moved to the stable release alongside the release of the Layout RFC.
Other changes
Middleware running in the edge runtime has performed well, and the Next team has continued its development by porting its functionality to it. Thus, version 12.2 added support for API routes and page generation in the edge runtime, and edge SSR was also configured.
Another welcome change is that the<a>tag is no longer required as a child element for the links component. This feature can now be enabled in the config, and starting with the next release, it will be enabled by default.
Additional Utilities
A new utility has been created to generate OG images used for previewing links on social media and messengers when they are shared. Images are generated 5 times faster than alternatives and perform 40% better.
To enable this feature, a special API route is created that returns JSX with the markup for the future image.
This feature is already being used for all preview images on Vercel pages and in conference tickets.
You can read more in this article from Vercel.
Vercel Platform Updates
Changes to the Vercel platform are also noteworthy. One of the most interesting updates to the platform in recent years is Vercel Preview, which allows you to view sites in collaboration mode, edit their code, and write comments.
Since the latest release, the platform has improved the commenting process, making it more user-friendly, and has added screenshots, notifications, and full synchronization with Slack.
Community
Next always pays attention to its community, thanks to which it is growing and developing so actively. Every update includes words of gratitude to the community, and with each release, they like to share the community’s growth - and I think this release will be no exception, since the number of members has grown from 1,800 to 2,300 (a 30% increase).
Since the last release, the first Developer Survey has been conducted. The Discord Community has also been improved.
Conclusion
The latest version was released just 4.5 months after the previous one. It contained many changes, though most of them were in the alpha and beta testing stages. As a result, most of the subsequent updates focused specifically on refining existing features. Despite this, the Next.js team has prepared and released - or is preparing - many interesting new features.
The most interesting and promising innovation is the Layout RFC, which has the potential to significantly improve workflows and solve a number of development challenges.
On October 25 at 7:30 PM CET (8:30 PM Moscow Time), the Vercel team will host a conference to present the new Next.js release. At the event, we’ll learn exactly what features will be included in the new release as ready-to-use functionality, hear about the company’s plans, and watch presentations from developers at Vercel and other major companies.