The popular open-source web development framework Next.js is coming on its sixth anniversary – and a highly anticipated version 13.
prepare for that, Vercel today announced the release of Next.js version 12.3. It is the last update before the version 13 rollout.
“Next.js is one of the fastest growing JavaScript libraries and building tools on the web,” said Lydia Hallie, staff developer attorney at Vercel, a frontend developer platform and creator of Next.js.
“It became more popular by embracing tools developers choose — React, Node.js — making it easier to build and build a fast web application, and allowing development teams to iterate faster.”
Gaining popularity
Next.js, released in 2016, is a popular open-source web development framework created by Vercel and used by about 40% from developers. A React framework built on top of the Node.js JavaScript runtime environment allows developers to build high-performance web applications and fast static websites.
According to Forrester chief analyst Devin Dickerson, developers choose it for its security, adaptability, search engine optimization (SEO), and overall experience. “Next.js is gaining popularity among React developers, mainly because of its improved, streamlined developer experience,” he said.
According to an recent surveyit is the fourth most popular framework by usage and satisfaction, behind React, Express and jQuery.
Leveling up
Next.js 12.3 introduces new features and upgrades including:
Improved quick refresh feature
Next.js Fast Refresh gives developers instant feedback on edits they make to applications. Vercel has extended the Fast Refresh capabilities by reloading .env, .jsconfig, and .tsconfig files.
“While developers previously had to reboot their dev server to see changes to such critical files in their application, they can now see the changes instantly,” Hallie says.
Install TypeScript automatically
Next.js now automatically configures and installs dependencies needed to support TypeScript. Previously, adding TypeScript to existing projects required manually installing the necessary dependencies.
New Image Components
Next.js 12.2 introduced an experimental new image component that allowed users to easily style images and improve their performance. This component is now stable in Next.js 12.3 and Vercel has made improvements that further simplify the process and extend support for placeholder blurring. They’ve also improved accessibility by requiring the “alt” attribute (which provides alternative information for an image if a user can’t view it).
Also, developers can now use wildcards to specify domains when working with external images. As Hallie explained, this means that instead of having to specify all the exact domains and subdomains to get images from, developers can configure a pattern with the expected protocol and hostname. This feature allows for a “more powerful and flexible way” to retrieve images, she said.
Furthermore, Next.js 12.3 introduces a stable release of the SWC minifier, which was first rolled out in version 12 as an experimental feature.
“The stable releases of the image component and SWC compiler will make it easier for developers to migrate and upgrade their application to the new version of Next.js,” Hallie said.
‘Drastic change’ in architecture
The release also includes updates to the Next.js router and layouts based on the recent Layouts Request for Comment (RFC). Upcoming features include:
- Route groups
- Instant charging statuses
- Error Handling
- Templates
- Intercepting routes, parallel routes and conditional routes
Furthermore, Vercel is investigating adding support for global CSS import in the app directory. This would allow developers to use packages that import their own .css files without additional configuration, Hallie explains.
As she put it, the new routing system covered in the RFC will “dramatically change” the way developers design their Next.js applications.
Room for growth
Hallie pointed out that incremental adoptions in Next.js allow teams to try out new features while continuing to support the existing architecture. For example: changing compilers, minifiers, bundles and image optimization tools.
Ultimately, “version 12.3 prepares developers for future releases by making features that were enabled by default stable and ready for adoption,” Hallie said.
Vercel — founded in 2015 and competing with Netlify, Cloudflare, Pantheon, HubSpot CMS, Contentful, and Quest (among others) — will officially unveil Next.js 13 on its sixth anniversary at the Next.js online conference on October 25.
While Hallie hasn’t revealed any specific details, she did say that the upcoming Next.js will introduce 13:
- Features using React server components, streaming and spanning.
- Conventions that make it easier for developers to optimize and scale applications.
- Open-source tooling that accelerates local development and production.
“Looking at React’s adoption curve on the web, there’s a lot more room for React and Next.js to grow,” Hallie says. “The future is very bright for Next.js; this is just the beginning.”
The mission of VentureBeat is a digital city square for tech decision makers to learn about transformative business technology and transactions. Discover our briefings.
