December 2022 Summaries

Next.js has surpassed 4 million npm downloads for the first time, with over 2,400 contributors on its core team. To keep up with this vast community, Next.js is continuously iterating and improving its developer experience. The project recently introduced Rust to its core, which brought improved performance but also increased CI time due to the prolonged process of building Rust binaries. However, implementing Turborepo Remote Caching reduced publish times by 80%, allowing for faster iterations and better quality of life for both the Next.js team and users. Turborepo addressed three key problems: task management for per-platform binaries, no more cache purges, and eagerly pre-seeding the Remote Cache to prevent slow publishes when code changes are made. With this improvement, Next.js can now iterate faster than ever before, enabling the addition of new features and bug fixes sooner.

Hassan El Mghari and Kiana Lewis discuss the importance of developer toolkits in optimizing performance and efficiency in Next.js sites, while experts from this year's Next.js Conf share their insights on using React Server Components, powerful layouts, design systems, web UI updates, nested layouts, authoring experiences, and more to create a world-class website. `>

Today, Vercel is bringing the capability to comment on Preview Deployments to all teams, enabling real-time feedback in the context of the product being built, dramatically faster iteration cycles and higher quality input from various stakeholders, with comments improving the feedback process both internally and externally. The addition of commenting capabilities removes fragmented reporting and allows pinpointing visual issues right in the browser, reducing time spent going back and forth by up to 80%. This feature is available for all Pro and Enterprise teams, by default, for free, enabling rapid iteration and big ideas to happen faster.

Today we're thrilled to announce added privacy controls across all plans, including the ability to secure their preview deployments behind Vercel Authentication with just one click. This allows teams and external collaborators to share protected previews without having to enter additional security credentials, using either Vercel Authentication or Shareable Links. We're also introducing Advanced Deployment Protection, which offers flexible ways to make Preview Deployments private and accessible with Vercel Authentication or Shareable Links, including end-to-end testing, private Production Deployments, and password protection. Additionally, we're adding a new feature called Shareable Links, which allows external collaborators to access Preview Deployments without the need to enter additional credentials by adding a query string to Preview URLs. Deployment Protection offers flexible ways to make Preview Deployments private and accessible with Vercel Authentication or Shareable Links, replacing the existing SSO Protection feature in Enterprise plans.

Vercel, a company that aims to give every developer the power to create at the moment of inspiration, sponsored AfroTech Conference 2022 as part of their mission to attract top talent and engage with the Black tech community. The company collaborated with local Austin arts alliance _OFCOLOR to produce an immersive experience called All Kinds of Black In Tech, featuring a photo exhibit of Black tech workers, interactive product demos, and a live DJ. This activation aimed to empower diverse tech professionals to tell their stories, build community, and lean into their own creative energy. Vercel's team at AfroTech 2022 included people from all areas of the business, including sales, data, engineering, marketing, and product, and they spent three days showcasing product demos, reviewing resumes, and performing interviews with over 1,500 attendees. The company also told its story to an important audience, aiming to be a place where anyone can contribute to their mission of making the Web faster.

We're excited to announce the public beta release of our new notification system at Vercel, made possible with the help of our integration partner Knock, their powerful API, and robust component library. We evaluated our technology options and chose Knock for its flexibility, reliability, and observability, meeting our needs for iteration speed, reliability, and scalability. With Knock's primitives, we built a custom notification system that leverages our design and component system, creates flexible notifications, and scales with our user base without added complexity or configuration. The out-of-the-box features of Knock provided an in-app feed demo working in under an hour, allowing us to create multi-channel notifications effortlessly. Knock's React library enabled us to create components simple, while leveraging a powerful notification tool in the backend. We built layouts and workflows for each alert using the Knock dashboard and its workflow editor with live previews, giving users a real-time notification feed powered by Websockets and packaged with React hooks. Knock allows you to build cross-channel notifications with easy-to-use workflows and provides a single API for all of your notifications code and observability tools. This release introduces new notification types, such as deployment failures and batched domain misconfiguration notifications, making it easier for teams to stay in the loop on their Vercel project.

Vercel has announced that its Edge Config, a ultra-low latency data store for near-instant reads of configuration data, is now generally available alongside integrations with Statsig and HappyKit for A/B testing and Feature Flags. This distributed data store optimizes for near-instant reads by pushing data to every region before requests are made, resulting in most lookups returning in 5 ms or less and 99% of reads under 15 ms. Edge Config is great for A/B testing, feature flags, complex redirects, request blocking rules, and experimentation with tools like Statsig and HappyKit, which can drastically improve performance and load experience by pushing data to the edge when it's changed. Vercel users can now leverage these integrations to get started with Edge Config today.

Edge Functions are JavaScript, TypeScript, or WebAssembly functions that operate within a leaner runtime, deployed globally by default, and run in the region closest to the request for lowest latency. They offer faster and more cost-effective compute capabilities compared to traditional Serverless functions. Vercel's Edge Functions now support regional deployment, allowing developers to specify a region preference close to their data source. This enables faster compute for tasks that don't require database queries, while maintaining the benefit of fast, global compute. The runtime is built on the V8 engine used by the Chrome browser and doesn't run within a MicroVM, making Edge Functions generally faster and more cost-effective than traditional serverless. With increased workload size limits and improved infrastructure, Edge Functions are now generally available for all customers, offering seamless interoperability with Serverless functions and a great developer experience.

SvelteKit Auth is a new authentication library built on top of the @auth/core decoupled library, marking the larger move to Auth.js, providing authentication for the Web with any framework you like. The package was created as an extension of NextAuth.js, which has almost 300,000 npm downloads per week and supports the entire ecosystem of frontend frameworks. SvelteKit Auth is designed to be a simple, low-configuration authentication solution that supports many popular OAuth platforms like Google, Facebook, GitHub, and more. It allows users to sign in and sign out on user actions, providing helpful methods for authentication management. The library is still experimental but has the potential to expand Auth.js into other frontend frameworks besides Next.js, with a growing community of contributors and sponsors supporting its development.

SvelteKit 1.0 has been officially launched, offering a new framework for building web applications that simplifies creating and deploying web apps with its simplicity and performance. Built on top of Svelte, it simplifies server-side rendering, routing, code-splitting, and adapters for different serverless platforms. The new version includes a directory-based router, layouts, load function, endpoints, and adapters, which provide an intuitive experience that takes care of tedious configuration and boilerplate code. With its improvements, SvelteKit is great for building applications of all sizes and offers out-of-the-box features such as SEO-friendly routing and performance optimization. The new version also includes changes to the layouts system, data fetching, and server routes, which provide a more streamlined development experience. Additionally, SvelteKit can be deployed on Vercel, a cloud platform that provides a zero-configuration platform for deploying and hosting web applications, making it easy to get your app up and running quickly. The community surrounding SvelteKit is also growing, with resources such as templates, starter kits, and other helpful tools available to use while building SvelteKit applications.

Instafest is a festival poster creation platform that utilizes Next.js and Vercel to rapidly scale its user base from 100-150 users per hour on the first day to 500,000 new users per hour within days. Anshay Saboo, the creator of Instafest, leveraged Vercel's features such as Functions, Monitoring, and Analytics to handle the enormous traffic and maintain high performance. By utilizing Next.js for its high-performance React sites, Vercel for easy deployment and global Edge Network caching, and built-in optimization features, Instafest was able to achieve viral growth, serving over 100 million page views in a week and peaking at 6 million users per day without downtime or latency issues.

The text discusses the migration of a large, open-source React application to use Next.js, with the goal of improving developer experience and performance. The BBC website is used as an example of such an application, which was initially built using a custom React solution. The authors aim to show how to incrementally adopt Next.js and Vercel, leveraging existing code and minimizing unnecessary changes. They start by setting up a new repository with two clones: one for the original application and another for testing Next.js changes. The process involves removing unnecessary dependencies, configuring Next.js, and deploying the changes to Vercel. Through this journey, they demonstrate how much code can be eliminated or replaced using Next.js, reducing maintenance efforts and improving developer experience. The authors conclude that Next.js enables teams to focus on their product and customers instead of application infrastructure, allowing them to do their best work at the moment of inspiration.

To accelerate innovation with serverless computing, Vercel has leveraged AWS Lambda to deliver world-class sites in production, optimizing developer productivity and performance. By turning lambda into an edge-first compute layer and adding globally distributed caching, Vercel enables customers to deploy code quickly, scale infinitely, and reduce costs. The platform's powerful DX and UX elements make serverless the easiest, fastest, and most effective way to modernize digital presence, as seen in successful deployments with The Washington Post, which handled high-traffic moments flawlessly, making it "the smoothest election night anyone could remember".