DEVOPSdigest

Vercel announced the release of Next.js 13.

The launch brings the latest innovations in JavaScript tooling and cloud infrastructure to the mainstream, where developers can create freely and execute new ideas that push everyone forward.

“Six years ago, we open-sourced Next.js with the goal of creating a zero-configuration React framework that simplified the developer experience. With over 2,400 contributors, over 200 million downloads, and a global community of developers—it's incredible to see what we've been able to accomplish together,” said Vercel CEO and Founder Guillermo Rauch. “Our goal at Vercel is to make the Web faster by giving developers the tooling they need to build experiences users love. We’re taking the lessons of giants and making them available to anyone building on the Web.”

Capabilities in Next.js 13:

Compiler Infrastructure: Turbopack

Vercel is introducing Turbopack, the 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.

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 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 the 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.

“Fully dynamic and personalized experiences without tons of client-side JavaScript used to be exclusive to a few big players in tech,” said Vercel’s CTO, Malte Ubl. “With Next.js 13, Vercel unlocks server-first data-driven personalization, enabling developers to build online experiences that are dynamic without limits.”