January 2023 Summaries

Vercel's platform provides speed, reliability, and the convenience of not having to worry about setting up and maintaining your own infrastructure. Deployments start with code written in one of the over 35 frameworks supported by Vercel or using the Build Output API. The deployment process triggered from the CLI starts with two API requests: uploading project files to a scalable data storage service and creating the deployment. Before the deployment can be created, Vercel authenticates the user and inspects the request to confirm its authenticity and the user's permission. If everything checks out, the deployment gets scheduled for building, which transforms the project into a Vercel deployment by executing a "builder" on the source code. The build container creates a build output that runs on one of Vercel's supported runtimes, provisions resources such as Serverless Functions and optimized images, and updates the deployment's status. Once the necessary resources have been provisioned, a Deployment database document is created and the deployment metadata is uploaded to static storage. When a user requests a website hosted on Vercel, it first performs a DNS lookup to find the IP address, which always resolves with an anycast IP address owned by Vercel. The request then enters Vercel's Kubernetes cluster, where it is inspected and filtered for malicious users, routed to a virtual machine serving as a reverse proxy, and modified if Vercel Edge Middleware is enabled. The response phase serves static resources, triggers Serverless Function execution for dynamic content, invokes Edge Function execution at the edge, and optimizes images on-the-fly. By deploying to Vercel, developers can streamline and simplify their deployment process without worrying about setting up and maintaining their own infrastructure, optimizing deployments for global performance and accessibility, and improving the developer experience and iteration speed of their product.

Plex, a TV platform, leveraged Next.js for their web experiences to prioritize user experience and improve performance. By refactoring their site to Next.js on Vercel, they decreased the number of lines in their codebase by 40% and improved developer experience. They used Edge Middleware to serve different content based on geographical availability and ran A/B tests without Cumulative Layout Shift or increased page load times. With Vercel's Checkly integration, they could run end-to-end tests and monitor crawl requests immediately. Additionally, they utilized on-demand Incremental Static Regeneration (ISR) to balance the revalidate time of their static pages while allowing backend changes to be picked up quickly. This improved their Google search ranking and delivered a fast user experience.

Vercel is a platform that enables developers to build, deploy, and manage AI-powered applications. The company is exploring new projects such as a stable diffusion search engine, AI-powered visual editing tools, and rejection generators. Vercel also provides a suite of tools for building and deploying headless stacks with AI features like natural language processing and image recognition. OpenAI's GPT-3 models, including DaVinci, Curie, Babbage, and Ada, are available on the platform, along with Whisper, which can accurately identify spoken words in multiple languages. DALL·E 2 is another model that generates realistic images or art from natural language. Vercel Edge Functions enable developers to run AI models in the cloud and stream responses for faster user experiences. The company also provides a managed global infrastructure for shipping products worldwide. Viable uses AI to analyze customer feedback and present insights to businesses, while Jasper helps generate engaging content with its AI Writing Assistant. Replicate allows teams to experiment at scale without spinning up their own server farms. Next.js and SvelteKit are popular frameworks for building AI-driven applications on Vercel, offering features like API routes, code splitting, and TypeScript integration. The platform also provides streamlined collaboration tools, including comments on Preview Deployments, to help developers iterate faster while staying committed to a product everyone loves.

Supabase is an open-source alternative to Firebase that provides all the backend features needed to ship a project quickly. The company's development team has been using Next.js on Vercel since its beginning and has seen improvements in their developer experience with Turborepo, which simplifies changes to the UI and allows for faster deployment. With Turborepo, developers can make changes locally without needing to manage configuration files, and the entire system can be run locally with a single terminal command. The team also uses Vercel Preview Deployments with commenting capabilities to enable collaboration with external teams, which has streamlined their deployment process.

The concept of text wrapping is crucial in improving readability on websites, particularly for titles and headings. To address this issue, several projects have been developed to balance text, including Adobe's `balance-text` project, the New York Times' `text-balancer`, and a proposal from the CSS Working Group for balanced text as a native CSS feature. React Wrap Balancer, a lightweight tool, builds upon these efforts with an efficient algorithm that minimizes content wrapper width to match line lengths, reducing legibility issues and layout shifts. By using React Wrap Balancer, developers can improve readability on their websites, especially in client-side and server-side rendered apps, and even integrate it into Svelte projects.

Viable, an AI company, uses customer feedback analysis to improve products and services for businesses like Latch, Uber, and AngelList. They've processed 3.8 million data points with just six engineers and have been using Vercel since its beginning. However, slow feedback cycles were creating a bottleneck until they leveraged comments for feedback in Vercel Preview Deployments, reducing back and forths by 80%. This allowed them to provide game-changing insights more efficiently, saving time previously wasted on Slack DMs, emails, and Zoom calls. With comments available directly on designs, the team can preserve context and ship insights faster, enabling scaling as more businesses realize the value of their analyses.

Wunderman Thompson has partnered with Vercel to improve the agency's digital-led growth through strategic web development. By leveraging Vercel's edge-ready network, integrations for popular stacks, and live on-page collaboration, Wunderman Thompson can focus on its core strengths while maintaining a consistent foundation for dynamic websites. The agency uses Vercel's seamless Git push workflow to deploy live sites in seconds, allowing for rapid iteration and client feedback. Vercel's comments section enables fluid collaboration on live sites, while the platform's serverless architecture eliminates the need for costly server development. With Vercel, Wunderman Thompson can manage multiple projects simultaneously without requiring specialized skills or knowledge, making it an ideal choice for globally serving ambitious brands.

The Read.cv platform was facing scalability issues with custom domains, but switching to Vercel allowed them to adopt Next.js and Edge Functions, enabling better performance and increased flexibility. With Vercel's support for wildcard domains and automatic SSL certificate management, users can now bring their own personal domains without requiring custom infrastructure. This has improved the site's performance and made it accessible globally, with users being served content from an edge near them regardless of location.

Hashnode, a blogging platform for developers built using Next.js, chose Vercel as its infrastructure provider due to the ability to manage custom domains at scale and a smooth developer experience. With Vercel, Hashnode's engineering team saves time by previewing deployments and testing changes in a production-like environment without configuring staging. Migrating to Vercel also enhanced how Hashnode monitors and optimizes speed, with Vercel's Edge Network guaranteeing fast and delightful blogging experiences that rank higher in search results due to lightning-fast load times and automatically optimized images.

Swell, a platform on Vercel, enables anyone to spin up their own ecommerce website using its headless, API-first backend, providing flexibility and accessibility for merchants to power their users' storefronts around the world. The benefits of using Vercel and Next.js include fast site creation, seamless onboarding, unlimited SKUs without impacting speed, and a developer-friendly experience with excellent ergonomics and user interface. Merchants can market more effectively without slowing down their sites, thanks to Vercel's Incremental Static Regeneration (ISR) and hybrid rendering capabilities, which allow for quick and easy deployment of ecommerce sites, often in just a month. The Swell team appreciates the ease of use and minimal stress involved in switching to Vercel and Next.js from their previous solution.

Sanity, a company specializing in composable content, has leveraged Vercel to improve the efficiency of their developer team and enhance user experience. By utilizing Vercel's Edge Middleware for stress-free experimentation, Sanity can run A/B tests without disrupting the client experience. The company also credits Vercel's ease of integration with tools like Checkly for end-to-end testing, which has saved them several times. With a seamless transition from Google Cloud Platform to Vercel, Sanity's developers can now focus on building unique features rather than managing operational overhead. This partnership has improved both the developer experience and user experience, allowing users to get the most out of Sanity while their developers continue to experiment and innovate.

Sitecore has announced a strategic partnership with Vercel to deliver an end-to-end composable solution for building and deploying dynamic web experiences. This partnership combines Sitecore's Digital Experience Platform (DXP) and Content Hub with Vercel's frontend platform, Next.js, Turborepo, and interactive preview capabilities, offering improved performance, collaborative content editing, lower infrastructure costs, omnichannel compatibility, and better developer talent and productivity. The integration of Sitecore's DXP with OrderCloud makes full-stack development faster and easier, while the partnership with leading digital agencies ensures seamless implementation and migration to composable application stacks. With this partnership, Sitecore and Vercel aim to provide global brands with an end-to-end solution for all their digital needs, driving digital differentiation and creating a fully composable stack.

Turbopack is an open-source tool designed to improve the developer experience for next.js developers. It was built by combining learnings from optimization work in the Next.js ecosystem, leveraging Rust-based SWC and creating two layers of interoperability: a core engine for common tasks like caching and invalidation, and a bundler handling CSS, static assets, Wasm, images, fonts, and more. Turbopack's alpha release aims to provide faster build times, hot reload, and remote caching capabilities, allowing developers to rebuild large sites in seconds for minor changes. The tool is designed to be purpose-built with improving the developer experience, and its future plans include supporting other frameworks through a plug-in architecture and providing deeper insights into build optimization opportunities.

KidSuper, a Brooklyn-based streetwear label and hybrid art brand, needed a tech solution that could keep up with their creativity after going viral in 2011. They experimented with various frameworks like Ember and Create React App before settling on Next.js for its flexibility to build sites and apps that reflect the brand's creativity. With Vercel, they can deploy interactive sites faster than competitors, enabling limitless creativity and seamless collaboration. The duo can now focus on building new ideas without delays, thanks to zero-configuration deployments that allow them to spin up sites instantly.

The Next.js Conference, held in October 2022, was the largest ever with over 110,000 registered developers and 55,000 online attendees. To showcase the photos taken by photographers on site, a custom image gallery was built using Cloudinary as the CDN to store high-quality images. The gallery displayed hundreds of large images quickly and efficiently. The main screen displayed images in a grid, while a modal showed a larger version with a carousel of smaller images. Individual dynamic routes displayed standalone photos in high resolution. To improve performance, images were fetched at different sizes for each area of the application. Image placeholders were used to instantly show users something as the images loaded, and lazy loading was implemented to load only the necessary images. Framer Motion was used for smooth animations, and Headless UI provided accessible components. AI-generated alt tags improved accessibility. The gallery also included features like restoring scroll when navigating back to the grid.