February 2023 Summaries

A headless commerce architecture is a decoupled approach where the frontend and backend of an ecommerce storefront are separated, using an API to connect them. This allows for a more modern tech stack, faster build times, improved performance, and enhanced user experiences. Monolithic commerce has limitations such as vendor lock-in, legacy applications, slow site performance, and high maintenance costs. In contrast, headless commerce offers benefits like improved developer velocity, cost savings, the ability to use cutting-edge technologies, empowering collaborators, increasing site performance, enabling omnichannel experiences, and creating content at scale. To adopt a headless commerce architecture, companies can take an incremental approach, leveraging tools like Next.js, Vercel, and headless CMS solutions, and prioritize the developer experience to create faster and more efficient development workflows.

Cruise Critic, a subsidiary of Tripadvisor, was facing challenges scaling their tightly coupled and monolithic PHP application. To address this, they turned to Vercel to improve the delivery of high-performing web experiences at a faster pace. By adopting Next.js and Vercel, the team made significant improvements to the developer experience, enabling them to build software more efficiently. The adoption of Vercel resulted in reduced engineering build times from 30 minutes to under eight minutes, allowing for multiple daily shipments to production. Furthermore, Cruise Critic saw an 85% decrease in page download time and a nearly 100% decrease in page size, thanks to Vercel's superior developer workflow. As a result, the team can now focus on building products rather than worrying about infrastructure, enabling Cruise Critic to perform at a new level of scale.

Plenti, a technology-led consumer lending and investment company, has successfully rebranded and launched an IPO by migrating to a composable Next.js frontend on Vercel. The company's software engineer, Matt Milburn, managed the tech stack migration with ease using Next.js as the cornerstone of their new tech stack. With Next.js, Plenti gained total flexibility and was able to optimize everything with the Vercel API and Analytics. The company's successful composable frontend is a testament to the power of zero-configuration development tools like Next.js and Strapi. Milburn managed to harness the power of both platforms on his own, making it possible for a single developer team to achieve this impressive feat.

Improving an application's SEO can be a challenging and opaque process, but with Next.js on Vercel as your foundation, you can build up best practices to see exponential gains. Rendering is a critical aspect of SEO, with prerendering being the best practice for SEO, as it makes the crawler willing to reindex your site more frequently. Next.js offers Incremental Static Regeneration (ISR), which pre-renders all your pages like SSG but also allows you to update specific pages as needed, without redeploying your app. Speed is also crucial in SEO, with faster websites keeping users engaged and ranking higher in search engine results. Image optimization, code splitting, font optimization, and consistent linking are also important aspects of SEO. Next.js provides tools such as the App Router, layouts, dynamic routing, and Link component to help structure your site and improve navigation. Fixing dead ends by implementing smarter navigation is also essential, and Next.js provides sensible defaults and best practices for errors. Internationalization (i18n) and localization can also help climb search engine rankings across the globe, with Vercel Analytics providing a Real Experience Score and Next.js Analytics enabling analysis and measurement of page performance.

The new features in Next.js 13.2 include the Next.js Cache (beta) and the Vercel Cache API (beta), which enable caching only part of a page as static data while fully dynamically rendering the rest of the application, including accessing real-time and personalized data. This allows for better performance, improved security, and faster build times. The Next.js Cache is designed to work with any frontend or full-stack framework and provides granular cache invalidation by tag. It also includes a new API for allowing revalidation of content by tag. The Vercel Cache API is designed for usage with the App Router and provides native integration into the Next.js Cache with 13.2. The features aim to evolve Incremental Static Regeneration (ISR) and provide a progressive, durable cache that's granular at the data fetching level.

Vercel Cron Jobs allow developers to automate repetitive tasks using a specific syntax called cron expressions, which determine when a task should run. The initial release of Vercel Cron Jobs is a generalized solution that works with any framework or website without native integration, but framework authors can add native support in the future. The limits of Cron Jobs and Vercel Functions include hobby, pro, and enterprise plans with varying numbers of cron jobs and usage per day. Cron jobs are free on all plans during beta, but will be a paid feature for general availability. Developers can get started by deploying an example or reading the documentation, including frequently asked questions about cron job limitations and security.

Globacore, a Toronto-based digital agency, specialized in creating interactive experiences for physical spaces like trade shows and offices for global brands. With the pandemic forcing an overnight shift to the digital world, Globacore leveraged Next.js and Vercel to create web-based projects within just two months. They built a workflow optimized for performance, prioritizing fast response times and 99.99% uptime service level agreements for larger brands. The agency's developers relied on Next.js' fast refresh feature and Vercel's enterprise plan for scale and support, enabling them to build and iterate faster with hundreds of changes daily. With Vercel's interactive Preview Deployments, clients could be involved in the review process, tightening the feedback loop. As a result, Globacore transformed into a hybrid agency delivering omnichannel experiences for any space, reflecting their new tagline "digital experiences for any space."

Makeswift, a company that provides easy visual or no-code Next.js site builders, adopted Turborepo to improve their build times and development experience. Prior to adopting Turborepo, Makeswift used a custom build process with Kubernetes and Bazel, but found it difficult to maintain and optimize. After switching to Turborepo, they improved their overall CI pipeline time by 65% and reduced the time from commit to deploy from around 20 minutes to less than one minute. Turborepo has enabled Makeswift's developers to iterate quickly, with an average of 50 builds a day, and has also improved their local development experience, allowing them to spin up an end-to-end stack using just one command. Makeswift is now looking forward to exploring more features offered by Turborepo and Vercel, such as multi-tenancy and publishing to npm in their open-source repo.

Indent is a security company that enables teams to perform critical business operations faster and more securely by providing an easy-to-use experience for requesting, approving, and revoking access to cloud infrastructure through its application and public-facing website built on Next.js and Vercel. The use of Vercel Preview Deployments allows for real-time feedback from stakeholders, enabling faster time-to-feedback with previews, resulting in a 80% speedup compared to traditional development processes. This enables the engineering team to save countless hours by leveraging smart defaults and staying up-to-date on the latest software versions with ease. Additionally, running Next.js on Vercel allows Indent to take full advantage of modern CMS like Sanity, enabling non-technical team members to contribute to marketing content without touching code.

The new app directory in Next.js 13 allows developers to fetch data directly inside relevant components, reducing duplicate code and improving performance. With Server Components, all components are now fetching data on the server by default, providing a more responsive user experience through smarter caching and deduping. The Loading UI also enables custom loading skeletons for even server-side fetches, reducing time to Largest Contentful Paint (LCP) and interaction, while improving Core Web Vitals for higher search engine rankings.

Runway is an applied AI research company that prioritizes speed and innovation in its technology stack. The team deployed six sites using a combination of Netlify, GitHub Pages, and their own custom build process, but after growth, they needed a faster tech stack to manage all sites and scale with them. Migrating to Vercel reduced build times from 5-8 minutes to just 40 seconds, sped up feedback cycles with Preview Deployments, and improved confidence in site performance using Analytics. With Vercel, Runway's team can now comment directly on staging links without leaving Figma, resulting in smoother review processes and higher Lighthouse scores for performance.

The Morning Brew collective of media brands grew rapidly, generating $50 million in revenue in 2021 and expanding into new lines of business with mediums like YouTube, live events, and podcasts. To support their growth, they upgraded their infrastructure to a headless tech stack optimized for content delivery using Next.js on Vercel. This allowed them to achieve a flexible and customizable frontend, enabling instant launching of new websites and platforms. They also leveraged features such as Incremental Static Regeneration (ISR), Serverless Functions, and Preview Deployments to boost their developer experience, iterate quickly, and provide the best user experience possible.

The client's website was experiencing long build times, with 35-minute build cycles that were slowing down iteration cycles. The migration to Next.js on Vercel allowed for a hybrid approach of generating most important pages at build time and not generating less frequently visited pages or localized ones. This resulted in a significant reduction in build times from 35 minutes to just five minutes. Additionally, the use of Incremental Static Regeneration (ISR) enabled fast page loading without sacrificing performance. The migration also improved developer experience with better APIs, easier testing and QA, and faster iteration cycles. The client saw an 85% reduction in build times, a 14% increase in their Real Experience Score, and a significant reduction in lines of code. Overall, the migration was a success, allowing the team to continue using headless tools without disruption and empowering them to iterate on new features with Vercel's safety net.

Turborepo is a high-performance build system for JavaScript and TypeScript codebases that offers fast incremental builds, intelligent caching, and scheduling tasks to streamline workflows. When connected to Vercel Remote Cache, Turborepo's local caching behavior becomes shared among teammates, CI/CD systems, and other laptops, significantly reducing deployment times. By leveraging the shared cache, developers can iterate faster, and teams can save up to 85% of their CI time. Turborepo integrates seamlessly with Vercel, enabling zero-configuration distributed caching solutions in under five minutes, making it easy to incorporate other CI providers into a robust pipeline.

Building GPT-3 powered applications with OpenAI and Next.js can be done using either serverless functions or Edge Functions. The former has limitations such as long response times, which can lead to poor user experience and timeout issues on certain Vercel plans. In contrast, Edge Functions offer a more lightweight runtime, faster execution, and longer timeouts, making them ideal for applications that require real-time data streaming. By using Edge Functions with streaming, developers can improve the user experience by incrementally displaying generated data as it comes in, rather than waiting for the entire response. This approach also enables the use of OpenAI's GPT-3 model without hitting serverless function timeouts, making it a more cost-effective and efficient solution for building high-performance AI-powered applications.

Super, a website creation platform built using Notion, has partnered with Vercel for hosting and deployment. CEO Jason Werner switched to Next.js and Vercel from Gatsby and Netlify due to its seamless integration and features. With Vercel's Domains API, Super can manage thousands of custom domains, detect configuration changes in real-time, and automatically update domains without coding. The platform leverages Vercel's GitHub integrations, Incremental Static Regeneration (ISR), Edge Middleware, and Domains API to provide a fast, globally distributed site with speed and personalization. By using Next.js and Vercel, Super has built a multi-tenant app that gives its customers the benefits of Next.js without requiring any coding knowledge.