Next.js is getting a mini refresh before v13 is released next month

The popular open source web development framework Next.js is coming to its sixth anniversary — and a long-awaited version 13.

In preparation for this, Vercel today announced the release of Next.js version 12.3. It’s the last update before version 13, which will be presented at the Next.js Conference on October 25 in San Francisco.

“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 co-creator of Next.js.

“It gained popularity by embracing the tools of choice for developers — React, Node.js — making it easier to set up and build a fast web app 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 around 40% of developers. A React framework based on the Node.js JavaScript runtime environment, it allows developers to build efficient web applications and fast static websites.

Developers choose it for its security, adaptability, search engine optimization (SEO) and overall experience, according to Devin Dickerson, principal analyst at Forrester. “Next.js is gaining popularity among React developers primarily because of its streamlined, streamlined developer experience,” he said.

According to a recent survey, it is the fourth most popular framework in use 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 provides developers with immediate feedback on modifications they make to applications. Vercel has extended the Quick Refresh capabilities by reloading the .env, .jsconfig and .tsconfig files.

“Whereas developers previously had to restart their developer server to see changes to such critical files reflected in their application, they can now see the changes immediately,” Halli said.

Automatic installation of TypeScript

Next.js automatically configures and installs the dependencies necessary to support TypeScript. Previously, adding TypeScript to existing projects required manually installing the necessary dependencies.

New image elements

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 improvements that further simplify the process and extend support for position blur. They’ve also improved accessibility by requiring the “alt” attribute (which provides alternative information about an image if a user can’t see it).

Also, developers can now use wildcard matching to specify domains when working with external images. As Hallie explained, this means that instead of having to provide 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 remote image capture in a “more powerful and flexible way,” he said.

In addition, Next.js 12.3 introduces a stable version of the SWC widget, which was first released in version 12 as an experimental feature.

“Stable versions 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 architecture

The release also includes updates to the Next.js router and provisions based on the recent Request for Comments (RFC). Upcoming features will include:

  • Route groups
  • Instantaneous load states
  • Error handling
  • Standards
  • Intercept routes, parallel routes and conditional routes

In addition, Vercel is investigating adding support for global CSS imports to the application directory. This would allow developers to use packages that import their own .css files without requiring additional configuration, Hallie explained.

As he put it, the new routing system covered by 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 test new features while maintaining support for the existing architecture. For example: changing compilers, minifiers, bundlers and image optimizers.

Ultimately, “version 12.3 prepares developers for future releases by allowing features that were enabled by default to be stable and ready for adoption,” Hallie said.

Vercel — which was founded in 2015 and competes with Netlify, Cloudflare, Pantheon, HubSpot CMS, Contentful and Quest (among others) — will officially introduce Next.js 13 on its sixth anniversary at the Next.js web conference on October 25.

While Hallie didn’t reveal specific details, she did say that the upcoming Next.js 13 will feature:

  • Features leveraging React server components, flow and suspense.
  • Contracts that make it easier for developers to optimize and scale applications.
  • Open source tools that accelerate local development and production build.

“Looking at the adoption curve of React on the web, there’s a lot more room for React and Next.js to grow,” Hallie said. “The future is very bright for Next.js. this is just the beginning.”

VentureBeat’s mission is set to be a digital town square for technical decision makers to learn about and transact business-transformative technology. Discover our Updates.

Leave a Comment