How Next.js 12 Connects to Low-Code and Visual Design Tools – InApps 2022

Richard MacManus

Richard is senior editor at InApps and writes a weekly column about web and application development trends. Previously he founded ReadWriteWeb in 2003 and built it into one of the world’s most influential technology news and analysis sites. Follow him on Twitter @ricmac.

Last week Vercel announced Next.js 12, the latest version of its JavaScript framework based on the React library. Guillermo Rauch, CEO of Vercel and creator of Next.js, positioned version 12 as “the first SDK for the Web” — presumably based on its ever-increasing set of functionalities, which I’ll get into during this column. Also notable, Rauch emphasized the increased speed of Next.js 12, which he said helps developers get better site rankings via Google’s Core Web Vitals. Google, along with Facebook, is a key supporter of Next.js.

I spoke with Rauch in a Zoom call before Next.js 12 was announced, to find out more about the latest version — including how it’s more appealing to non-developers.

Rauch began by telling me about the scaling issues of modern web development. Developers are “pushing the limits” with codebases, he said, that have “thousands of page entry points, and hundreds of thousands of components — or tens of thousands of components.” He thinks developers are “hitting the limits of what was possible with the JS-based tooling.”

For these reasons, Next.js has moved towards “native tooling” in this version — especially with the announcement of a compiler built using the trendy programming language Rust, which is known for its “super fast” performance.

“Next.js 12 combines a Rust-based engine for compilation with some of the existing JS infrastructure, that’s also optimized,” Rauch said. “It’s basically three times faster for development, five times faster for builds — and some specific processes have become ten times faster, like minification of bundles.”

Augmenting and Optimizing

The appeal of Next.js has always been that it not only abstracts away some of the complexity of developing with JavaScript and React, but that it augments the basic functionality of web standards. For example, it encourages developers to use a “React-based image component,” <Image>, as a kind of stand-in for the common <img> tag in HTML. The Next.js tag is an abstraction of the HTML tag, so it all boils down to web standards in the end. But the goal of Next.js is to optimize, behind the scenes, what that HTML tag can do — so that web developers don’t have to do this work themselves. Next.js 12 brings further improvements to the image functionality, including AVIF support.

Source: Google’s web.dev

Next.js 12 isn’t short of other new features. For example, ES modules and URL imports, instant Hot Module Replacement (HMR), and something called “Middleware” that enables you to “run code before a request is completed.”

Here’s a succinct explanation of Middleware:

2/7 – Middleware

– You have a page at pages/hello.tsx.
– You send a request to /hello.
– Before the request reaches /hello, pages/_middleware.ts says hold on I’ve got something to check, change or add to this request.

— shadcn (@shadcn) October 28, 2021

Collaborating with Designers and Business Users

So there is plenty in Next.js for hard-core web developers to sink their teeth into. But during our call, Rauch explained that there’s also a “merging of development with no-code and design tools” happening with Next.js. His implication is that even non-developers are being encouraged to use Next.js, even if they’re using the tools only to collaborate with developers.

The new URL import functionality is one aspect of this shift to include non-developers among its users. In his keynote address at Next.js Conf, held virtually last week, Rauch said that URL imports enable “new kinds of seamless integrations into no-code and design tools like Framer.”

Framer is a tool that designers use to prototype components or products. It has a visual user interface, so the code is hidden. In our discussion, Rauch explained how URL imports in Next.js 12 enable a user to import a component that was visually designed inside of a tool like Framer.

“You can design your component, visually, just like a sketch,” he told me, in regards to using Framer. After copying the URL of that sketch, he continued, “you come back to your codebase, you import that URL, and now you have a visually designed component tree.”

It’s still a stretch to think that non-developers can easily use Next.js to build an app, but URL import is a step towards that kind of ‘low-code’ functionality.

Next.js Live: The Developer is in Control

Rauch also pointed to Next.js Live, a web-based IDE (integrated development environment), as another way that non-developers can feel more involved in projects. Since there is no tooling set-up required — you just need to log-in using your browser — the theory is that designers and business users will feel more comfortable working with developers in this environment. They are able to chat with developers and draw things on the screen inside the Live tool. Rauch explained in his keynote that Next.js Live was built using modern web technologies like ES Modules (the web standard for JavaScript modules) and WebAssembly, together with its new Rust compiler infrastructure.

“Live is helping engineers be more productive,” said Rauch during the keynote, “but also brings designers, product managers, copywriters, and many others closer to the frontend.”

I asked how these new business collaboration features compare to other low-code tools on the market, many of which also encourage collaboration between developers and business users. Rauch replied that in Next.js, the developer always remains in control of the underlying code.

“The developer is still the one that is sort of controlling and puppeteering everything. And they have access to understand if the code is correct, if it’s performant, if it’s an abstraction that is going to be durable over time.”

He suggested that with existing low-code approaches, you have to “make this trade-off between, oh I can move really fast visually, but I don’t even know what that thing is outputting.” In other words, having developers in control of the code — including being aware of precisely what code is being output — is the key to making collaboration in Next.js Live successful.

Options Aplenty for Developers

Next.js turned five years old in October, and it has grown into a wide-ranging JavaScript framework since that time. When it was announced back in October 2016, it was “​​a small framework for server-rendered universal JavaScript web apps.” It’s certainly not a small framework now — heck, it even has middleware! Jokes aside, with new functionality like “React Server components” and “Edge functions,” there’s a lot of nuance in what Next.js can do for developers now.

Never mind that the visual designers and business users won’t necessarily understand this advanced functionality, because Next.js developers have it all under control.