Next.js 12: Middleware, ECMAScript modules, and lessening use of Node.js

Vercel boss Guillermo Rauch speaks to The Reg about Rust, WebAssembly, Node TypeScript, and more


Interview Next.js 12 is out with a range of new features including built-in middleware and support for ECMAScript (ES) modules.

"Next.js 12 reimagines the infrastructure of how we build for the web," says Guillermo Rauch, CEO of Vercel, the company maintaining the Next.js MIT-licensed open-source project, and owner of the copyright. Rauch is not one to understate his case, but there is plenty new in this update, launched at the virtual Next.js Conf yesterday.

"It's on two levels," Rauch tells The Register. "One is developer experience, and the other is the global execution model for compute."

The basis for these claims is, first, improvements to the Next.js tools including a new Rust compiler, and second, the addition of middleware to the framework, which Vercel hopes developers will run on the company's Edge Functions (now in beta), a content delivery network.

Next.js is based on React with the addition of options for both server-side rendering with Node.js and static site generation. Here is what is new in version 12 – though much is still in preview:

  • Middleware (now in beta) which runs between the user's request and the main application code.
  • Rust compiler which replaces Babel for compiling Next.js application, and improves build time by 5 times according to Vercel.
  • Support for React 18 (even though React 18 is still in alpha), including the Suspense feature, which delays component state transitions until requested data has resolved. This is under an Experimental flag.
  • Support for React server components (also in alpha). "There's zero client-side JavaScript needed, making page rendering faster," says the team.
  • Support for AVIF images which have 20 per cent better compression than WebP.
  • Native support for ES modules as the default, though old-style CommonJS modules are still supported. This also means that Node.js 12.22 or higher is required.
  • Experimental support for importing ES modules directly through an URL, rather than via a build process.
  • Removal of webpack 4 in favour of webpack 5 (a breaking change).

Why the new compiler? "It's primarily motivated by the pace at which the size of front-end codebases have been growing," says Rauch. "It's not unusual to hear of companies with hundreds of Next.js developers with codebases with tens of thousands of components, if not hundreds of thousands of components."

Guillermo Rauch, CEO of Vercel, introduces Next.js 12

Guillermo Rauch, CEO of Vercel, introduces Next.js 12

When Next.js was first developed, "the syntax of JavaScript was changing rapidly, TypeScript wasn't the de-facto standard that it is today. So a lot of the tools were written in JavaScript itself. Now things are becoming more stable, the React JSX syntax is also a de-facto standard, so we're at the point where it makes sense to take advantage of native code. It makes some of the processes developers rely on every day 100 times faster."

Node has served us well until now, but it's starting to show its age when it comes to the performance needs of today

Next.js Middleware does not run on Node but more directly on the V8 JavaScript engine itself (which is also used by Node). "Node as the primitive for the cloud is too bulky. In the context of serverless it's created the cold start problem, so by simplifying the code that developers can use, both on the edge side and on the dev side, we can get a lot of performance and security wins, by constraining the API surface."

Rauch is referring to the Edge Runtime used by Middleware, which does not support Node.js APIs. Node modules can be used "as long as they implement ES Modules and do not use any native Node.js APIs," the docs say.

According to Rauch, developers can "eliminate entire categories of issues" by not using Node.js for these serverless functions. "Node has served us well until now, but it's starting to show its age when it comes to the performance needs of today."

The potential uses for Middleware are extensive, including authentication, bot protection, feature flags and A/B testing, server side analytics, logging, and any case where redirects and rewrites are required. At Next.js Conf an example showed how using a region-specific database server could improve latency.

Rauch observes that JAMStack, using static websites with dynamic data from microservices, has pros and cons. "The good part was the focus on pre-rendering. The bad part is that it was so static that sometimes we couldn't pre-render anything.

"What we're seeing now, especially with the introduction of React server components that we're announcing in beta form, we can move the vast majority of the code back to the server, but instead of that server being monolithic at a particular place in the world, we're making the code globally distributed. With that comes greater performance, and no single point of failure."

How is this different from just using a CDN with a conventional web application? "When CDNs looked at speeding up, their hammer was the cache," Rauch tells us. "They go to the origin, take the page, cache it. At that point they've already made it too static, especially for what we're seeing in media, ecommerce... we're seeing that you want to personalize everything, from the language to the currency to variations of components. In that world, the top-level cache of the legacy CDN vendors doesn’t work any more."

Rauch also believes that the web-centric development model of Next.js is a benefit. "There's nothing about Next.js that is not native to a web browser," he says. "When you look at designers, how they work today, they just open the web browser and point it to Figma. We asked ourselves, can we do the same, open the browser, point it to a Next.js project, and run the entire compiler and machinery inside the browser?"

This idea ended up as Next.js Live, a web-based development platform. "In our private beta we've been able to load production-grade applications directly in the web browser," Rauch says. The concept is similar to GitHub Codespaces or Gitpod, except that with Next.js Live everything is in the browser, there is no container back-end.

"Next.js is fundamentally a front-end framework," says Rauch. "The Next.js runtime is fundamentally serverless, so we don't need all that additional machinery to run and render a project. The web was designed from the outset to allow both reading and editing. We want to bring more people into the world of contributing to the web."

The editor in Next.js Live is based on Monaco, as in Microsoft's Visual Studio Code project.

Next.js Live uses WebAssembly in the browser for the compiler. "WebAssembly is now the new universal way of distributing applications," Rauch says. "We can take code written in Rust and make it entirely universal." However, he believes that it is "early days for WebAssembly in production" so this is currently only used for development – though it is something the team is looking at for the future.

Next.js 12 also improves the performance and stability of Hot Module Reload (HMR), Rauch tells us. This is where "you type, you save your file, and you see your change instantly without refreshing the web browser... It used to be the case that developers had to second guess and sometimes just hit refresh out of muscle memory as they wouldn't fully trust the technology. We've refined it a lot... we're seeing up to five times faster repaints on the screen, from what you're typing."

The technology behind the faster refresh is in part a benefit of ES modules because "we can become smart about only giving the web browser the specific change. We only load the part of the page that you are working on."

Why not just use React rather than Next.js? "I like to think of [React] as the engine," says Rauch. "What this engine does is on the one hand power rendering, and on the other hand supply the primitive abstractions that the developers are going to use. The component model is provided by React and the rendering engine is provided by React. But with Next.js folks are building websites and applications, and that's the layer of abstraction that Next.js introduced on top. We've raised the abstraction from component to page."

Is TypeScript taking over from JavaScript? "The ecosystem is maturing. The everyday developer wants fewer bugs, a higher level of correctness, more and better documentation, types and not just code. That has driven TypeScript to be the default for Next.js projects, especially for teams in companies." ®


Other stories you might like

  • Prisons transcribe private phone calls with inmates using speech-to-text AI

    Plus: A drug designed by machine learning algorithms to treat liver disease reaches human clinical trials and more

    In brief Prisons around the US are installing AI speech-to-text models to automatically transcribe conversations with inmates during their phone calls.

    A series of contracts and emails from eight different states revealed how Verus, an AI application developed by LEO Technologies and based on a speech-to-text system offered by Amazon, was used to eavesdrop on prisoners’ phone calls.

    In a sales pitch, LEO’s CEO James Sexton told officials working for a jail in Cook County, Illinois, that one of its customers in Calhoun County, Alabama, uses the software to protect prisons from getting sued, according to an investigation by the Thomson Reuters Foundation.

    Continue reading
  • Battlefield 2042: Please don't be the death knell of the franchise, please don't be the death knell of the franchise

    Another terrible launch, but DICE is already working on improvements

    The RPG Greetings, traveller, and welcome back to The Register Plays Games, our monthly gaming column. Since the last edition on New World, we hit level cap and the "endgame". Around this time, item duping exploits became rife and every attempt Amazon Games made to fix it just broke something else. The post-level 60 "watermark" system for gear drops is also infuriating and tedious, but not something we were able to address in the column. So bear these things in mind if you were ever tempted. On that note, it's time to look at another newly released shit show – Battlefield 2042.

    I wanted to love Battlefield 2042, I really did. After the bum note of the first-person shooter (FPS) franchise's return to Second World War theatres with Battlefield V (2018), I stupidly assumed the next entry from EA-owned Swedish developer DICE would be a return to form. I was wrong.

    The multiplayer military FPS market is dominated by two forces: Activision's Call of Duty (COD) series and EA's Battlefield. Fans of each franchise are loyal to the point of zealotry with little crossover between player bases. Here's where I stand: COD jumped the shark with Modern Warfare 2 in 2009. It's flip-flopped from WW2 to present-day combat and back again, tried sci-fi, and even the Battle Royale trend with the free-to-play Call of Duty: Warzone (2020), which has been thoroughly ruined by hackers and developer inaction.

    Continue reading
  • American diplomats' iPhones reportedly compromised by NSO Group intrusion software

    Reuters claims nine State Department employees outside the US had their devices hacked

    The Apple iPhones of at least nine US State Department officials were compromised by an unidentified entity using NSO Group's Pegasus spyware, according to a report published Friday by Reuters.

    NSO Group in an email to The Register said it has blocked an unnamed customers' access to its system upon receiving an inquiry about the incident but has yet to confirm whether its software was involved.

    "Once the inquiry was received, and before any investigation under our compliance policy, we have decided to immediately terminate relevant customers’ access to the system, due to the severity of the allegations," an NSO spokesperson told The Register in an email. "To this point, we haven’t received any information nor the phone numbers, nor any indication that NSO’s tools were used in this case."

    Continue reading

Biting the hand that feeds IT © 1998–2021