While Next.js, by default, mostly focuses on helping developers build static sites, Next.js 12 introduces what Vercel calls “middleware” that makes it easier for developers to provide users with personalized content.
Next.js 12, which Vercel likes to call “the SDK for the Web,” also introduces support for ES modules and URL imports, instant HMR and builds, and significant workflow and collaboration innovations.
“Jamstack and static sites became popular because they were empowering front-end developers to push to the edge,” Vercel CEO Guillermo Rauch said. “But over the years, we started noticing that developers and consumers loved the speed of pre-rendered artifacts at the edge. But they didn’t love the constraints of static workloads, namely anything around user personalization, feature flags and A/B testing.”
Edge functions on the Vercel platform and the corresponding programming model enhancements to the Next.js framework will now give customers “the power of dynamic at the speed of static,” as Rauch put it. The combination of Middleware, as Vercel calls this new API, and Vercel’s Edge Functions allows developers to deploy this code globally with only a few lines of code at deploy time.
“When you’re running an A/B experiment, in the world before Middleware, your experiment would carry the bulk of both tests. I have the A test and the B test together. With Middleware, because we’re able to make these choices before that request gets served, we can say, ‘oh, here’s just A or here’s just B and C’ and you get that highly performant experiment,” Kevin Van Gundy, Vercel’s CRO, explained.