September 2022 Summaries

This post explores the accessibility strategies and tools used to build a dynamic, inclusive experience for the Next.js Conf registration page. The team employed Fitts' Law to ensure that clickable elements were large enough for users with disabilities to interact with easily. They also improved their implementation of complex controls by using ARIA patterns, making sure that error messages notified assistive technology users, and reducing motion according to user preferences. Additionally, they made the word game Vordle accessible by providing keyboard, mouse, and touch support, visually describing the game state for screen reader users, and introducing iconography to indicate correct guesses. The team also highlighted various tools and documentation available to help developers build accessible applications, emphasizing the importance of empathy for assistive technology users and encouraging others to join them in making the web a more inclusive place.

The design and development of MrBeast's storefront required balancing performance, entertainment, and keeping "the buying flow" as the star of the show. The team at basement.studio used Vercel for hosting, Shopify for ecommerce, and Axiom for observability to ensure a seamless experience for 100 million subscribers. They created engaging mini-games like Lambo Jump and Slap to Win, which were later modified to prevent hacking, and implemented game rules to protect against tech-savvy users exploiting the system. The team's success was largely due to their collaboration with Revolt and the use of Vercel, Shopify, and Axiom to deliver a high-performance site that could handle unpredictable traffic.

Vercel aims to encourage innovation through collaboration by introducing new commenting capabilities to its Preview Deployments feature, now available in Public Beta. This update enables team members to comment on code and UI directly within the deployment environment, making it easier for everyone involved to collaborate and provide feedback. By integrating comments with live environments, Vercel's goal is to deliver expert work faster by reducing the need for separate code reviews and enhancing the overall software development experience. With this feature, developers can easily share links to preview deployments, receive timely feedback from their team members, and ensure everyone is on the same page throughout the development process.

The Next.js team has released a new feature called layouts, which allows developers to create nestable layouts that can be shared across pages, enabling a more modular and maintainable routing system. The new layout system uses a file-based approach, where each route segment is mapped to a corresponding segment in a URL path, allowing for incremental adoption of the app directory from the existing pages directory. Developers can create custom layouts for specific route segments using layout.js files, which can be shared across different pages, and even used to isolate errors to specific parts of an app. The new system also includes loading and error boundaries, such as loading.js and error.js, which provide a React Suspense boundary and React Error Boundary respectively, allowing for meaningful loading UI and error handling. Additionally, route groups can be used to organize routes without affecting the URL path, optimize segments out of layouts, or create multiple root layouts for sections of an app with different UI.

Next.js 12.3 has been released with several key features, including Fast Refresh for .env files, improvements to the Image Component, and updates to upcoming routing features. This release enhances developer experience on Vercel by providing built-in support for environment variables, image optimization, and better performance. Environment variables can be easily managed across teams and projects, while images are optimized automatically with the Image Component, including lazy loading and caching. The latest release also introduces new features and updates that will improve Next.js integration with Vercel's infrastructure primitives, such as Serverless Functions and Edge Functions.

When inspiration struck, Benjamin Td created a Next.js application on Vercel to visualize train routes across Europe, which surprisingly generated over a million views and went viral. He was able to enjoy his vacation while the site received attention from politicians, newspapers, and sparked debates about infrastructure and public policy. Using Next.js API Routes deployed as Vercel Functions, Benjamin cached data using Vercel's Edge Network for optimal response times, ensuring a seamless experience. The project uses Incremental Static Regeneration to reduce load on the Postgres database, allowing it to scale even with thousands of visitors. The code is now open source, and Benjamin credits Vercel for making it easy to start and scale new projects quickly.

Vercel, a platform for building, deploying, and scaling web applications, used Edge Middleware to run A/B tests on its new Templates page without sacrificing performance. The testing solution involved running code before serving requests from the edge cache, enabling developers to perform rewrites at the edge to show different variants of the same page to different users. This allowed Vercel to collect data and iterate through multiple release phases, including Early Access, Public Beta, and General Availability, without layout shift issues. Edge Middleware also helped avoid skeleton loaders on dynamic landing pages by detecting query parameters in the request URL and rewriting to a special route that shows a skeleton loader. The testing process involved collecting data points, tracking conversion rates with Heap, and using Algolia's Search Without Results feature to understand template search and filter usage.

The Vercel Analytics team has released improved accuracy for their charts, making it easier to visualize trends over time. The previous visualization method connected all data points as a line, which was noisy and difficult to read. A new approach uses a smooth curve to represent the overall trend of the data, reducing noise and improving readability. This involves using a best fit line to show the graph's trend at a glance. To achieve this, the team used curve fitting, specifically linear regression, to find the best fit for the data. They also implemented an adaptive approach, where they split the data into training and test sets, and calculated the error using the Mean Squared Error (MSE) value. This ensures that the curve is not overfitting or underfitting, providing a good fit for the entire dataset. The new change can be enabled by visiting the Analytics tab in the project dashboard or trying it free with a team on Vercel Pro.

Vercel has launched a new Templates Marketplace, which showcases various types of applications that can be built on the platform, including blogs and ecommerce storefronts. The marketplace features a wider selection of templates with added features such as fuzzy search and filters to facilitate discovery. This new feature aims to highlight Vercel-created templates and community content, making it easier for developers to get started with Vercel. The Templates Marketplace is now live and available for use, offering pre-built solutions to jumpstart app development.

The third annual Next.js Conf will take place on October 25, 2022, and attendees can claim their ticket now. Since its creation in 2016 as a server-rendered framework for React applications, Next.js has evolved into the industry's go-to fullstack React framework, with over 200 million downloads. The new logo unveiled by Next.js Core Team at Vercel is bolder and stronger than ever. This year's conference will feature a keynote presentation by Guillermo Rauch, the CEO of Vercel and co-creator of Next.js, and will provide attendees with tools to build better and scale faster. The event also invites speakers to share their stories, with the speaker lineup expected to be the best yet.