‘The SDK for the Web’ – InApps 2022

Vercel this week hosted its Next.js Conf and released Next.js 12, which the company refers to as the SDK for the Web.

Next.js 12 is the biggest release of technology Vercel has made yet, as it enables the development and delivery of dynamic websites at the speed of static, Guillermo Rauch, founder and CEO of Vercel said. The technology is the result of a collaboration between Vercel and more than 1800 contributors and thousands of companies and partners like Google Chrome and the React team at Facebook, he added.

Next.js, Rauch’s creation, is a React and JavaScript framework for frontend web development. The latest release brings in new middleware capabilities to enable developers to rapidly personalize content and delivery. Next.js 12 also adds ES modules and URL imports, instant Hot Module Replacement (HMR) and builds, and other workflow and collaboration innovations. ES Modules is the ECMAScript standard for working with modules.

ES Modules enables Next.js to ship smaller bundles to users. And the new URL Imports support enables new and varied integrations with no-code and design tools, Rauch said.

Improvements: Develop, Preview, Ship

Overall, Next.js 12 brings improvements across three dimensions: “develop, preview and ship,” Rauch told InApps. “We have made improvements to the developer experience, to the workflow and collaboration, and then to our edge network to deliver websites and applications at the fastest possible speed,” he said.

The new middleware support enables developers to run Next.js code before a request is completed. Based on users’ incoming requests, developers can modify the response by rewriting, redirecting, adding headers, or even streaming HTML, Rauch said. Further, he explained that the middleware can be used for anything that shares logic for a set of pages: authentication, bot protection, redirects, handling unsupported browsers, feature flags, a/b tests, server-side analytics, logging and more, the company said.

“I guess it all comes down to simplifying and accelerating web-based application development,” said Ittai Kidron, a senior equity research analyst at Oppenheimer & Co. “The web is now the engagement front for most digital businesses, and so the user experience (UI), the speed by which data, features, and website flow are updated and tuned is critical. Web developers don’t have time or the knowledge to deal with the ‘other parts’ of the application delivery process — dealing with security, ops, standing up infrastructure, etc. — and Next.js offers them a controlled environment for development, previewing, and shipping apps into live production.”

Basically, Next.js enables developers to separate the front end from the back end portion of the applications development process, Ittai said.

“Developers love this, it’s open source at its core, it eliminates layers of complexity and workflow, and it enables them to focus on what they need to do and get to better outcomes faster,” he said.

Close to the Edge

Vercel’s Edge Functions boot up instantly and deploy the middleware globally and support streaming.

According to Vercel: Edge Functions on Vercel eliminate lengthy routing configuration files and allow for powerful applications at the edge, with no burden on the client. This gives users the power of dynamic code with the speed guarantees of static.

Next.js Middleware and Vercel Edge Functions allow users to:

• Run JavaScript at the Edge before a request is processed
• Modify request responses by rewriting, redirecting, adding headers, and more
• Define the entire global infrastructure of their applications by adding a few pieces of code at deployment time

“What stands out the most is we’re sort of changing a lot of the infrastructure of the web,” Rauch said in an interview. “On the serving side, we’re going from serverless functions to edge functions. Edge functions, in a nutshell, give you dynamic power at the speed of static. And it’s a global primitive, the developer writes in Next.js, pushes code and gets global functions deployed that are instant to spin up — very, very cost-effective for the company.”

New Rust Compiler

Meanwhile, on the infrastructure side of the tooling, Vercel has introduced a Rust compiler. The new Next.js 12 Rust-based compiler enables three times faster Fast Refresh and five times faster production builds, with zero code changes, Rauch said.

“We’re making development and builds really fast by taking on a lot of the sort of experimentation that happened over the last decade, in tooling for the JS ecosystem,” he said. “As projects and teams have grown, on the front end, it sort of shows some of the limitations of the language and runtime. So, we’re also innovating on the tooling infrastructure side by rewriting the core pieces of it in a native language.”

In a demo at Next.js Conf, Vercel showed its new Rust compiler doing a build of vercel.com about 1.87 times faster than the previous build, as well as providing faster development-time refreshes.

“Vercel has said part of their roadmap is to enable non-developers to build websites, not just professional developers,” Andrew Cornwall, an analyst at Forrester Research, told InApps. “Their new Rust compiler has experimental support for URL imports — that’s one step towards building a low-code platform. They’re not at the point yet where non-developers are building websites, but they’re adding the foundations to do so.”

Meanwhile, on the workflow collaboration front, Vercel is lowering the barrier to entry to Next.js with Next.js Live. Next.js Live runs natively inside the web browser, boots up instantly and allows anyone with a link to collaborate, he said.

“We’re extending that product, and we’re sort of starting to blur the lines between that no-code, low-code and the front end [space] — and we’re helping a lot more folks contribute to front ends,” Rauch said.

Blurred Lines

How will they blur these lines?

“With our new tooling, we can run the entire next dev experience directly in the browser, by using a combination of Service Workers [serviceworkers.js] and WebAssembly, so you don’t need to run very sophisticated tooling on your local machine,” Rauch said. “Or you don’t need to, like you know, get a VM in the cloud. That means that we can turn Next.js into an experience where anybody in a company can just press a button and instantly make a change to their front end and then submitted for review. That goes back into the classic GitHub workflow. But that’s very important for companies, especially enterprises. So, it kind of brings you the best of both worlds like I can very easily, instantly edit the web, as if it was Google Docs collaboratively in real-time inside the web browser.”

Middleware Is Key

Back to the middleware innovations, however, when developers define Next.js Middleware as part of their Next.js applications, Vercel deploys each Edge Function globally by default, the company said. And, unlike Serverless Functions, Edge Functions have no cold boots and run automatically in every region of Vercel’s Edge Network without any configuration. Vercel automatically optimizes Next.js applications for the best performance, the company said.

“I’m really impressed with their development experience, especially how developers can quickly deploy updates to content and give stakeholders the ability to quickly review and approve changes,” said Jeffrey Hammond, an analyst at Forrester Research. “They essentially implement GitOps principles to do this. As a result, what they’ve really built is a web-focused platform-as-a-service that reduced cognitive overload for devs and accelerates performance of what the devs build.”

Unlocking the Edge

Edge computing solves a type of problem that multinational companies — and not just large multinationals — need to deal with: they’ve got customers worldwide, but their servers are in Virginia. But how do they ensure that someone in Australia gets the same sort of web performance as someone in Washington, said Andrew Cornwall in an interview with InApps.

“Vercel’s answer is to provide processing on the edge: in other words, rather than running code on your web server, you can run code on a server that’s near your customer,” he said. “When a customer requests something on your website, an Australian customer will end up running code on a server in Sydney, while someone in Ireland making the same request will end up running code in Dublin — and both might get a regionally-appropriate answer.”

That describes Rauch’s strategy in a nutshell. “We think the future is at the edge and we want every developer to enjoy access to the best possible infrastructure for their projects,” — via Vercel Edge Functions, he said.

“Vercel has exposed a V8 JavaScript/WebAssembly engine on their edge servers,” Cornwall said. “They’re not alone in this: I know Cloudflare has done something similar, Fastly has their Lucet runtime, and a lot of other providers allow compute on the edge. Those with JavaScript/WebAssembly runtimes have an advantage over containers and VMs: the code starts running a lot faster. Vercel has said they can start running in five milliseconds, while containers take hundreds of milliseconds. Rather than going across the ocean to the web server for an answer or downloading everything to the client and then having the client decide what to display, the edge server builds only what’s necessary and sends it to the client.”

So, what Vercel has delivered in Next.js 12 is a way to integrate the computation you’d do at the edge into Next.js, Cornwall said. “That makes it easier for web developers to write code that runs at the edge in the same way they’re currently writing code for React.js on the client,” he added.

As an example, Cornwall described a scenario of a global fast-food chain that wants its Australian customers to see a real-time menu based on price and availability in Australia, and also wants its U.S. customers to see the menu for the U.S.

“When an Australian customer goes to example.com/menu, I’ll build an Australian menu on the edge server — without having to make the long trip back to my servers in the U.S.,” he said. “My Australian customers see the menu as quickly as my U.S. customers do.”

Moreover, the fast-food chain might also be testing a new ordering process that it could make available to customers who’ve said they’re willing to be beta testers, but that the company doesn’t want to release to everyone just yet.

“The Next.js integration makes it easier for web developers to implement my new ordering process on the edge” Cornwall explained. “If I detect the user who’s asking for example.com/menu is in the beta program, the edge server will build a menu that includes the new ordering process — and that’s controlled by code that’s written in Next.js.”

Finally, other new features in Next.js 12 include:

• Checkly integration for Vercel Checks: Checks enable users to ensure correctness and Web Vitals performance right after a build, preventing mistakes and bad performance from making their way into production
• Granular caching and Incremental Static Regeneration (ISR) with React Server Components: Users can now fetch data on the server-side, and stream those results to the browser incrementally with zero client-side JavaScript.