October 2022 Summaries

Vercel is launching Turbopack, a Rust-based successor to Webpack, designed to provide the speed and reliability innovators need to create at the moment of inspiration. The new bundler is built on high-performance bare-metal tooling and features an incremental architecture that enables fast development experiences. Turbopack's architecture takes cues from tools like Turborepo and Google's Bazel, leveraging caching mechanisms to skip unnecessary work. The technology will initially be used for Next.js 13 development servers but plans to power both production builds locally and in the cloud. Turbopack aims to provide a fast and flexible development experience for apps of any size, helping developers iterate faster and create at the moment of inspiration.

Vercel has acquired Splitbee, an all-in-one analytics and conversion tool, to bring more analytics capabilities to its customers. The acquisition adds top pages, top referring sites, and demographics to Vercel Analytics, allowing users to go beyond performance tracking and gain insights tied to real metrics. With the addition of page views and visitor metrics, brands can access in-depth website analytics and take greater control of how they engage with their end-users. The new feature is privacy-friendly, GDPR-compliant, and tracks visitor count in real-time without requiring third-party scripts or cookies. Vercel Analytics aims to make insights accessible to entire teams, helping organizations adopt data-driven deployment methods and ship better work. The tool is available now as a free beta for existing users, enabling them to start seeing page views and visitor events.

The Next.js conference registration page is an immersive and interactive experience created using WebGL and React. The page features a 3D beam of light that bounces off objects, a prism, and a rainbow, all rendered in real-time within a web browser. To achieve this, developers used open-source tooling such as react-three-fiber, drei, and @react-three/postprocessing, which provide a set of convenient helpers for working with WebGL in React components. The page also includes adaptive performance monitoring using the PerformanceMonitor component from @react-three/drei to ensure smooth rendering on various devices. By leveraging WebGL and React, developers can create complex 3D graphics within a web browser, unlocking new possibilities for interactive and engaging experiences.

Regional Edge Functions are a new feature introduced by Vercel that allow developers to specify the region their Edge Function executes in, enabling them to run functions near their data sources to avoid high-latency waterfalls and ensure users have the best experience possible. This capability is particularly useful for rendering sites and avoiding "waterfalls" where multiple queries from a database add up to slow page loading times. By moving computing resources closer to data sources, edge computing reduces latency and provides faster cold start times. Regional Edge Functions can be configured to run globally or nearest to the user, providing users with the lowest latency and best experience on their site.

Next.js Conf 2022 promises to be a developer experience event where nearly 90,000 viewers will tune in virtually to hear from over 25 experts sharing how they use Next.js to iterate, scale and deliver amazing UX. The conference features keynotes on the future of the web, deploying and delivering content faster at scale, scaling Next.js with WordPress, data that scales, building great tech stacks with Next.js, its backend capabilities, and more.

Vercel OG Image Generation` is a new library that enables developers to generate dynamic social card images. This approach is 5x faster than existing solutions by using `Vercel Edge Functions`, `WebAssembly`, and a brand new core library for converting `HTML/CSS` into `SVGs`. The library provides an easy-to-use API, allowing developers to define their images using `HTML` and `CSS` and automatically generate dynamic images from the generated `SVGs`. With Vercel OG, images are 100x more lightweight than previous solutions, making them faster to generate and reducing costs. The library also supports basic `CSS` layout, styling, and typography, as well as use in any framework or frontend application. It can be used inside Edge environments through WebAssembly for easy creation of social card images. Additionally, Vercel OG automatically adds caching headers to ensure the image is cached at the Edge after it's been generated.