With Next.js, Vercel, and Sanity, Loom empowers every team to iterate
Learn more about how Loom's decision to go headless enabled them to collaborate better and ship faster.
Loom, a video communication platform, helps teams create easy-to-use screen recordings to support seamless collaboration. Loom places high value on developer experience, but never wants to sacrifice user experience. Going headless with Next.js on Vercel, they can achieve both. By leaning on best-of-breed tools, all seamlessly embedded in their frontend, Loom's developers empower stakeholders, while the engineering team continues to bring new features to market.
Loom’s company mission is centered on empowering teams to do their best work. “With Next.js as the helm of our headless tech stack, our developers can create features with velocity and speed, ultimately enabling users to create whatever, whenever they want to,”says Tatiana Mac, a senior software engineer at Loom.
Next.js allows the team at Loom to scale quickly. Frontend tooling is never over-engineered for a smaller project, and engineering resources aren’t wasted when experimenting.
While monolithic architecture is slow and difficult to scale, out-of-the-box code on headless solutions is quick and creates a lighter workload for developers.
Vercel enables the entire Loom team to iterate and ship with the features they each need to ship the highest quality work. While marketers are self-serving content creation and updates in Sanity, the team's CMS, “the engineering team can work on a completely separate feature or implement new designs using Next.js—all while sharing our work throughout the process,” says Mac.
Preview Deployments allow you to preview changes to your app in a live deployment without merging those changes to your Git project's production branch.
Features like Preview Deployments empower content creators and stakeholders to get into the build, edit their content, and have it deploy seamlessly—with no additional engineering work. At the same time, it also ensures that engineers and designers don't lose control over things like design systems and visual guidelines.
“Whether it’s the marketing team or the legal team, we know that we're not going to step on each other, and it's all part of the same ecosystem. When we're ready to pull it all together, it's seamless and fast,” Mac explains.
Deploying our Next.js sites onto Vercel is so helpful because I can test what my site will look like in production and solicit feedback through comments from my team every step of the way. I can know at a specific moment in time: "what did that UI look like?" And when you're debugging, I can have a link from a month ago, two weeks ago. That is such a valuable tool to have at my disposal.
Loom doesn’t just value the developer experience that Next.js provides—they also know their end-user experience is just as important, and the two go hand-in-hand.
The Next.js Image Component coupled with Image Optimization on Vercel helps optimize images at the Edge and dynamically serve different variations of your image, while reducing the file size, and optimizing the images quality.
After reviewing their Analytics in the Vercel Dashboard, Mac’s team found an opportunity to optimize some of their images. They realized that they could leverage the Next.js Image Component (instead of a native one) to serve users more efficiently. Because of this, their users experience much shorter page load times and device-specific image loading.
“Tools like Next.js make it so we are never sacrificing the user experience for the developer experience,” says Mac. “We care about the users that are most marginalized and at the fringes. With Next.js, we are creating great experiences for them, and building an amazing future Web.”
