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.

nextjs

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.

nextjs

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.

Banner


JetBrains Improves Kubernetes Support In IDE Upgrades
12/11/2024

JetBrains has improved its IDEs with features to suggest the logical structure of code, to streamline the debugging experience for Kubernetes applications, and provide comprehensive cluster-wide Kuber [ ... ]



Go At Highest Rank Ever in TIOBE Index
20/11/2024

Go is currently in 7th place in the TIOBE Index for November 2024. Not only is this is the highest position it has ever had, it's percentage rating is almost equal to its all-time-high. Will Go contin [ ... ]


More News

espbook

 

Comments




or email your comment to: comments@i-programmer.info