The popular open-source web development framework Next.js is coming up on its sixth anniversary — and a much-anticipated version 13.
Gearing up for that, Vercel today announced the release of Next.js version 12.3. It is the last update before the rollout of version 13.
“Next.js is one of the fastest growing JavaScript libraries and tools for building on the web,” said Lydia Hallie, staff developer advocate with Vercel, a platform for frontend developers and creator of Next.js.
“It gained popularity by embracing tools developers are choosing — React, Node.js — making it easier to set up and create a fast web application, and enabling development teams to iterate faster.”
Gaining in popularity
Released in 2016, Next.js is a popular open-source web development framework created by Vercel and used by roughly 40% of developers. A React framework built on top of the Node.js JavaScript runtime environment, it enables developers to build performant web applications and fast static websites.
Developers choose it for its security, adaptability, search engine optimization (SEO) and overall experience, according to Devin Dickerson, Forrester principal analyst. “Next.js is gaining in popularity among React developers primarily because of its enhanced, streamlined developer experience,” he said.
According to a recent survey, it 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 Fast Refresh function
Next.js Fast Refresh gives developers instant feedback on edits they make to applications. Vercel has extended Fast Refresh capabilities by hot reloading .env, .jsconfig and .tsconfig files.
“Whereas developers previously had to restart their dev server to see changes to such crucial files reflected in their application, they can now see the changes instantly,” said Hallie.
TypeScript auto-install
Next.js now automatically configures and installs dependencies necessary to support TypeScript. Previously, adding TypeScript to existing projects required manually installing necessary dependencies.
New image components
Next.js 12.2 introduced an experimental new image component that allowed users to simply style images and improve their performance. This component is now stable in Next.js 12.3, and Vercel has made enhancements that further simplify the process and extend support for blur-up placeholders. They have also improved accessibility by requiring the “alt” attribute (which provides alternative information for an image if a user is unable to view it).
Also, developers are now able to use wildcard matching to specify domains when working with external images. As Hallie explained, this means that instead of having to supply all exact domains and subdomains to fetch images from, developers can configure a pattern with the expected protocol and hostname. This feature allows for remote image fetching in a “more powerful and flexible way,” 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 the SWC compiler will make it easier for developers to migrate their application and upgrade to the new version of Next.js,” said Hallie.
‘Drastic change’ in architecting
The release also includes updates on Next.js router and layouts based on its recent Layouts Request for Comment (RFC). Upcoming features will include:
- Route groups
- Instant loading states
- Error handling
- Templates
- Intercepting routes, parallel routes and conditional routes
Furthermore, Vercel is exploring adding support for global CSS imports in the app directory. This would allow developers to use packages that import their own .css files without requiring additional configuration, explained Hallie.
As she put it, the new routing system covered in the RFC will “drastically change” the way developers architect their Next.js applications.
Room for growth
Hallie pointed out that incremental adoptions in Next.js allow teams to try out new features while still maintaining support for existing architecture. For instance: changing compilers, minifiers, bundlers and image optimization tools.
Ultimately, “version 12.3 is preparing developers for future versions by enabling features that were on by default to be stable and ready for adoption,” said Hallie.
Vercel — which was founded in 2015 and competes 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 didn’t reveal specific details, she did say that the upcoming Next.js 13 will introduce:
- Features that leverage React server components, streaming and suspense.
- Conventions that make it easier for developers to optimize and scale applications.
- Open-source tooling that speeds up local development and production builds.
“Looking at the adoption curve of React on the web, there’s a lot more room for React and Next.js to grow,” said Hallie. “The future is very bright for Next.js; this is only the beginning.”
VentureBeat’s mission is to be a digital town square for technical decision-makers to gain knowledge about transformative enterprise technology and transact. Discover our Briefings.