How Next.js 12 Connects to Low-Code and Visual Design Tools – InApps is an article under the topic Software Development Many of you are most interested in today !! Today, let’s learn How Next.js 12 Connects to Low-Code and Visual Design Tools – InApps in today’s post !

Read more about How Next.js 12 Connects to Low-Code and Visual Design Tools – InApps at Wikipedia

You can find content about How Next.js 12 Connects to Low-Code and Visual Design Tools – InApps from the Wikipedia website

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.”

Read More:   How to Read Text from a File – InApps 2022

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.

Next.js image component

Source: Google’s

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:

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.

Read More:   The Node.js User’s Tech Stack – InApps Technology 2022

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.”

Read More:   Node.js, JVM and the Surprising Results About Docker Swarm – InApps 2022

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.


Rate this post
As a Senior Tech Enthusiast, I bring a decade of experience to the realm of tech writing, blending deep industry knowledge with a passion for storytelling. With expertise in software development to emerging tech trends like AI and IoT—my articles not only inform but also inspire. My journey in tech writing has been marked by a commitment to accuracy, clarity, and engaging storytelling, making me a trusted voice in the tech community.

Let’s create the next big thing together!

Coming together is a beginning. Keeping together is progress. Working together is success.

Let’s talk

Get a custom Proposal

Please fill in your information and your need to get a suitable solution.

    You need to enter your email to download


      Success. Downloading...