Of course, the major news of the event was about the Next.js 13 release, which represents a redesigned approach to website layouts, data-fetching, and server-rendering. There was no shortage of exciting updates from the event that got us and all attendees buzzing. Turbopack was one of the most-talked about.
“See ya, WebPack. Hello TurboPack!”
As part of the Next.js 13 update announcement, our partners at Vercel introduced the new game-changing tool, “Turbopack,” a new Rust-based successor to Webpack. Webpack has been downloaded over 3 billion times and has become an integral part of the Web. Built with the creator of Webpack, Turbopack is a brand new bundler for JavaScript and TypeScript codebases, written in Rust. Designed alongside the team behind Turborepo, Turbopack is the first and only build system for JavaScript and TypeScript designed from the ground up for incremental builds—both for development and production.
Though everyone was buzzing about Turbopack, the developer community in attendance were the most hyped. They were excited about the promise of Turbopack making their daily lives so much easier.
Using the Turbopack + Next.js 13 results in:
- 700x faster updates than Webpack
- 10x faster updates than Vite
- 4x faster cold starts than Webpack
Other Key Next.js 13 Releases
Though TurboPack was an especially popular topic, not to be outdone, there were many other aspects of the new release that garnered buzz and excitement among fellow attendees.
Routing and Rendering Infrastructure
Introducing a redesigned approach to routing, data-fetching, and server-rendering, Next.js 13 delivers on the promise of shipping less client-side JavaScript while also delivering substantial developer experience improvements.
Next.js and Vercel are the first to bring React Server Components, data fetching for Suspense, and support for hybrid, nested layouts to a major JavaScript framework, leading the industry with their innovative approach to make the Web faster and more dynamic.
This new functionality has been designed in tandem with advancements in the Vercel infrastructure, including support for streaming across our entire serverless compute stack, Edge API Routes and Rendering, and new caching strategies.
Developer Toolkit
Next.js 13 also includes updates to components and modules within the Next.js toolkit that make some commonly used and necessary parts of websites faster, easier, and more reliable to get right for developers, including images, font, scripts, and social cards.
This will include:
Enhanced font support and functionality:
The new built-in Next.js Font module makes it easier to work with custom and Google Fonts, as well as provide support that makes third-party font content delivery networks (CDNs) a relic of the past. Developed in collaboration with Google, usage of Google Fonts through this mechanism now shares zero information about website visitors with Google. It also helps generate fallback fonts, enabling developers to avoid 99 percent of layout shifts and removes any external network requests for improved privacy and performance.
Enhanced image optimization:
Next.js 13 includes an update to the <Image> component, used by over 70 percent of the Next.js community. Building on updates to browser standards, the updated component is able to delegate more to the browser for reduced overall costs, due to its ability to store computed images at the edge. When deployed to Vercel, the Image component is automatically stored and optimized on the Vercel Edge Network for even better performance.
Instant Open Graph (OG) Image Generation: Vercel’s OG Image Generation is a new library for generating dynamic social card images. This approach is 5 times faster than existing solutions by using Vercel Edge Functions, WebAssembly, and a brand new core library for converting HTML/CSS into SVGs.
