Next.js 11, the latest version of Vercel’s web application framework based on the React JavaScript library, offers faster startup and other performance enhancements. The company also released a preview of Next.js Live, a browser-based development server intended to foster collaboration.
Next.js startup time has been improved by as much as 24 percent. Processing time for changes from edit to screen has been reduced by 40 percent, Vercel said. A Next.js script component, meanwhile, enables developers to set the loading priority of third-party scripts to improve performance.
Now available in a preview release, Next.js Live combines a new dev server engine for Next.js with the Vercel collaboration platform to enable teams to share and edit from anywhere. While Next.js already could run anywhere via Node.js, Next.js Live adds a cloud-based collaboration layer. Static and dynamic Next.js applications are supported. ServiceWorker, WebAssembly and ES Modules are leveraged to support remote collaboration. Next.js Live also works offline, eliminating the need for remote virtual machines.
Next.js 11 was unveiled on June 15. Updating instructions and a migration guide can be found at nextjs.org. Other capabilities in Next.js 11 include:
- Real-time feedback, leveraging Webpack HMR (Hot Module Replacement) with no configuration. The browser reflects changes as soon as a file is saved. State is preserved as changes are made, thanks to Fast Refresh support. The Webpack 5 module bundler is now enabled by default for all Next.js applications.
- An experimental Create React App migration capability converts the Create React App capability to be Next.js-compatible.
- Image enhancements, with developers able to swap the HTML image tag for the Next.js image component, are offered to optimize images for each device viewport to which the image is delivered.
- Optimal loading is supported, with developers not having to memorize complicated rules for loading performance.
- Font enhancement automation, in which the CSS of custom fonts is now automatically inlined at build time to eliminate round-trip fetch font declarations. A pre-connect tag in Next.js establishes a connection with underlying font files, for speed.
Next.js 11 follows Next.js 10, which was released last October, followed by point releases.