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.


CSharpRepl Brings REPL Superpowers To C#

REPL, once an inherent property of the interpreted languages, has now found its way into compiled languages too. Tools like CSharpRepl for C# and Jshell for Java make it happen.

Forward Planning For Google Summer of Code 2023

November might seem somewhat soon to be thinking about next year's Google Summer of Code - but if you want to participate, either as a new contributor or as a new open source organization then its cer [ ... ]

More News





or email your comment to: