Next.js 13 Debuts a Faster, Rust-Based Bundler

Vercel is replacing Webpack in Next.js — which has been downloaded more than 3 billion times — with a new Rust-based bundler for JavaScript and TypeScript code in the latest release of Next.js.

Turbopack, which is currently in alpha, is said to be 700 times faster than Webpack and is designed for incremental builds, both for development and production — the first and only such build system for JS and Typescript, the company said in a statement. It was one of a slew of changes in Next.js 13 unveiled at the Next.js Conf 22 conference in San Francisco.

“You’ve wanted to be dynamic, but it’s meant juggling two sets of runtime APIs — Node.js on server and web-centered APIs in the browser. You’ve wanted to be dynamic, but often only in a single region origin depending on legacy, static CDN caching, to try to perform and scale,” Vercel CEO Guillermo Rauch told audiences Tuesday. “We’re ready for a new paradigm, today.”

NextJS 13 allows developers to achieve dynamic web pages, he said, thanks to innovations across three categories: Turbopack, a new routing and rendering infrastructure, and updates to the components and modules used within the Next.js developer toolkit.

Its speed boosts aren’t just for code updates but also for starting up from a low-data server, said Lee Robinson, vice president of developer experience. Robinson described the open source Turbo as “the new foundation of high performance bare metal tooling.”

“Turbo’s performance comes from its highly optimized machine code and a low-level incremental engine built with Rust. Once TurboPack performs a task, it never does it again to start,” he said. “Turbopack is focused on your local development experience, including React-fast refresh.”

Turbopack starts in 1.8 seconds when handling a large application with 3000 modules, which is faster than previous versions of Next.js and other popular tools, Robinson added.

Incremental Change

At least one developer expressed concern during the Q&A about the change from Webpack to Turbopack, noting that it “felt like a rug had been pulled out from under” her feet.

The changes will be incrementally adoptable for everybody and not a jarring transaction, Robinson responded, ceding the stage to Maia Teegarden, web tooling engineering manager at Vercel, to explain.

“We don’t want to leave this huge ecosystem behind, so we do plan to have some sort of migration path,” Teegarden said. “We might not be able to use the plugins that you’re already using, but there will be replacements that you can migrate over to.”

Repeatedly, the team at Vercel sought to ease developers’ concerns about migration by stressing that the new tools could be introduced incrementally to new pages without redoing sites wholesale.

New Routing and Rendering

Next.js 13 includes a new routing and rendering infrastructure with React Server Components, data fetching for Suspense — which manages asynchronous operations in React apps — and support for hybrid, nested layouts. It’s designed “in tandem” with advancements in Vercel’s infrastructure, including support for streaming and new caching strategies, the company said in its release.

“Building on React’s multi-year investments, we’re delivering a dream of shipping dramatically less client-side JavaScript, while making the most ambitious applications not just possible, but easy,” Rauch told audiences .

“We can make it easier to co-locate data fetching inside components, enabling global data fetching in your application,” said Delba de Oliveira, senior developer advocate for Vercel. “For example, when you have dynamic data requirements that are shared across pages, we can make it easier to co-locate your application code with your wraps, like components, text and stacks, so that you and your team don’t have to come up with your own conventions and configuration.”

That’s why, she added, Vercel is introducing a new router, which “starts with the introduction of the app directory.” The app directory can coexist with the existing pages directory for incremental adoption, she added. That will allow developers to do things like reuse navigation bars between pages without pre-rendering that portion of the screen. It also supports streaming, specifically “the ability to progressively render and incrementally stream rendered units of the UI to the client.”

“This isn’t a static page,” de Oliveira said, demoing the data fetching code, which leverages a new data fetching API. “So how do you fetch and stream data from the server while preventing a large amounts of JavaScript and waterfall on the client? We’ve worked with the React core team to deliver a new solution to simplify patching for all over React.”

What’s New in the Developer Toolkit

Finally, the third big announcement was upgrades to the web developer software kit.

“A true Web SDK would not be complete if it didn’t address the most common artifacts that you see on the web, like images fonts, scripts, and even social cards,” Rauch said.

The Next.js toolkit now includes:

• More support for working with custom and Google Fonts, developed with Google, but shares no information about website visitors with Google. Google Fonts helps generate fallback fonts, enabling developers to avoid 99 percent of layout shifts and removes any external network requests for improved privacy and performance, the company said.
• An update to the <Image> component, used by over 70 percent of the Next.js community. Leveraging updates to browser standards, the redesigned component is able “to delegate more to the browser for reduced overall costs due to the ability to store computed images at the edge,” the company said. When deployed to Vercel, the Image component is automatically stored and optimized on the Vercel Edge Network for better performance, it added.
• Instant Open Graph (OG) Image Generation. Another add is a new library for generating dynamic social card images. This approach is five times faster than existing solutions by using Vercel Edge Functions, WebAssembly, and a brand new core library for converting HTML/CSS into SVGs, the company said. The engagement rate of Tweets that embed a card is 40% higher, according to numbers by Agorapulse.

New Acquisition

Vercel also announced the acquisition of Splitbee, an Austrian-based data analytics and conversion platform company founded in 2020 by brothers Tobias and Timo Lins. Lara Greden, IDC research director over PaaS, said the acquisition “brings technology and talent to Vercel’s analytics strategy,” as well as building on Vercel’s existing tracking capabilities to add metric-based insights on user experience without third-party plugins or additional coding.

“Vercel is building a technology platform that is redefining how companies of all sizes build on the web,” Greden told The New Stack at the conference. “Vercel’s approach puts developers in the driver’s seat, yet also brings to the forefront an additional user base that includes marketing, product, design and execs.”

That’s particularly important for start-ups, which face more challenges with talent, she added.

“If a developer doesn’t have to go out and search for custom code or open source projects to achieve a given capability, and rather, if it can just work, they can bring the benefit to their company today, enabling their entire team to further focus and iterate on their core business-differentiating and business-building capabilities,” Greden said. “Vercel is creating that flywheel for developers and their wider product teams.”

Vercel paid for travel and accommodation for Loraine Lawson to attend the conference.