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.


GameMaker Free For Non-Commercial Use

GameMaker, for creating 2D platform games and now part of the Opera family, has made a change to its prices and terms and it is good news. GameMaker is now free for non-commercial purposes on all [ ... ]

Eclipse Launches Dataspace Working Group

The Eclipse Foundation has launched a dataspace working group with the intention of 'fostering global innovation in trusted data sharing'.

More News




or email your comment to: