Sonos cuts build times by 75% after moving to Next.js and Vercel

Sonos, the audio company behind more than 3,000 patents and a 20-year product history, knows its website has to match the quality of its hardware. But for a long time, the infrastructure underneath that site was working against the team. High costs and slow builds made even routine updates painful, so developers often avoided touching the frontend altogether.

The fix came in the form of a headless, composable architecture built on Next.js and deployed through Vercel. The result: a 75% improvement in build times, a 10% lift in performance scores, and mobile Lighthouse scores that now sit at 90.

Why Sonos chose a headless build

The original website ran on Salesforce Commerce Cloud, which the Brand team found too rigid when they started planning a redesign. The platform limited how much frontend control developers had and made it hard to keep performance and SEO metrics where they needed to be. What they wanted was the flexibility to build on the server or the client and to choose how each page was rendered—without fighting the platform underneath.

Next.js provided that flexibility, and pairing it with the Sanity CMS gave the team a setup that felt natural for ecommerce. Because Next.js is open source, the move also avoided lock-in with any single vendor. Sonos could build its own infrastructure around the framework, which is exactly what it initially tried to do.

Friction points that drove the migration

Sonos first attempted to self-host its refactored Next.js application on AWS, building its own CI/CD pipeline, global edge network, and caching layer. A proof-of-concept worked, but the maintenance burden became obvious quickly. The team was spending so much time on infrastructure that development velocity suffered.

The pain points were concrete:

  • Build times: Every environment took 20 minutes to build. Each preview and production build hit that delay, and developers paid for it repeatedly throughout the day.
  • Next.js support: The current infrastructure didn't support Next.js 12 or 13, which blocked the team from using Edge Middleware or Incremental Static Generation (ISR). Features like ISR had to be hand-rolled.
  • Cache management: Preview and production builds kept fighting over cache state, leading to recurring 307 redirect errors in AWS CloudFront as pages were constantly rebuilt.
  • Observability: Debugging was scattered across multiple monitoring products, so tracking down the source of an error was slow and tedious.

The cost was significant. The Sonos team estimated they lost the equivalent of an entire year of one developer's time to chasing constant errors and fixing them.

Moving to Vercel in stages

Sonos needed a unified frontend platform with strong monorepo support. After evaluating alternatives, the team chose Vercel because it's the platform that builds and maintains Next.js. As Jonathan Lemon, software engineering manager at Sonos, put it, "We wanted a quality product for a quality product."

The migration took three months and covered more than ten properties, including the homepage, subscription pages, help sheets, and product guides. Once the GitHub connection was set up, the move mostly involved transferring environment variables and switching DNS. Previews ran through Vercel's Preview Deployments, letting the team verify each site before going live.

The payoff came fast: build times dropped from 20 minutes to five—a 75% improvement. Contractors and new team members onboarded quicker thanks to preview builds tied to every git commit, and the team finally had decent visibility into site behavior. Built-in logs and Web Analytics made it easy to spot issues, and load testing during the holiday rush, including Black Friday, showed no performance degradation even under heavy traffic.

Development workflow transformed

Vercel's preview environment changed how code reviews worked. With every PR generating a deployed preview, developers compared to test comments and fixes in a live setting before merging. Reviewers got direct links to preview builds, making the feedback loop faster and more reliable.

The team reports that the change has improved code quality and speed to market. Instead of hoping a build works in production, they can verify it in a preview deployment that behaves like the real site. If it works there, the team has confidence it will work in production.

Sonos's only regret post-migration? Not making the switch sooner. The combination of Next.js and Vercel has given the team the frontend freedom it was missing and the operational stability to handle peak traffic without incident. The platform now supports a development workflow that lets the company ship site changes quickly and without constant firefighting.