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.
The SIGBOVIK conference has just finished and its proceedings can be downloaded, but only at your peril. You might never see computer science in the same way ever again.
