Next.js Adds Turbopack Bundler
Written by Kay Ewbank   
Thursday, 27 October 2022

Next.js has been released with a preview of new bundler for JavaScript and TypeScript codebases, written in Rust. Next.js is an open-source toolkit for universal, server-rendered (or statically pre-rendered) React.js applications.

The new version was announced at the online Next.js Conf 2022 this week. Next.js is a page-based routing system with support for dynamic routes. It automatically statically optimizes pages when possible, and carries out server-side rendering of  pages with blocking data requirements.


The first change to the new release is the inclusion of Turbopack, the new Rust-based successor to Webpack. Webpack is an open-source module bundler for JavaScript that takes modules with dependencies and generates a static version. The Next.js team say that while Webpack has been an integral part of previous releases, they wanted a faster alternative to using JavaScript-based tooling.

"In Next.js 12, we began our transition to native Rust-powered tooling. We started by migrating away from Babel, which resulted in 17x faster transpilation. Then, we replaced Terser, which resulted in 6x faster minification. It's time to go all-in on native for bundling."

The team says that using the Turbopack alpha with Next.js 13 results in 700x faster updates than Webpack.

In terms of functionality, the main change is the inclusion of a new app/directory beta that the team says should result in easier, faster JavaScript that has less client code. The beta has been developed based on the feedback from the earlier Layouts RFC. The beta includes an improvement to the Layouts feature that means you can share the UI while preserving state and avoiding re-renders. It also has support for React's new server components architecture, and the aim is that most dynamic applications will be able to use the server components for preference, so sending less JavaScript to the client and loading pages faster.

The new feature also introduces the ability to progressively render and incrementally stream rendered units of the UI to the client, and there's a new way to fetch data built on top of React Suspense for Data Fetching.

Away from the directory improvements, Next.js also adds a new Image component that the team says allows you to easily display images without layout shift and optimize files on-demand for increased performance.

Next.js 13 is available now.


More Information

Next.JS Site

Next.JS On GitHub

Related Articles

Next.js Updates Runtime

Next.js Improves Data Fetching

Next.js 5 Improves Webpack Support

TypeScript 2.7 Improves Type Inference 

React 16 Adds Fragments

React 15.5 Gets Ready For Rewrite

React 15 Released


To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.


Google Releases Home APIs

Google has announced a set of Home APIs and a Home runtime that can be used to access over 600M devices, Google's hubs and Matter infrastructure, along with an automation engine.

Raspberry Pi To Go Public - Are We Worried?

Raspberry Pi used to be the enthusiast's enthusiasm and this provided a base to expand into commercial applications. For some time now, some of the enthusiasts have been expressing concern that the co [ ... ]

More News

C book



or email your comment to: