How Next.js 12 Connects to Low-Code and Visual Design Tools
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
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
– You send a request to
– Before the request reaches /hello,
pages/_middleware.tssays 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
“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
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.