Vercel Unveils Visual Editing, Spaces, and Next.js 13.4
Click-to-edit feature for headless CMS gives business users more direct control over front-end content changes.
Vercel has unveiled a flurry of new features and upgrades involving content editing, storage, security, and code monitoring alongside the official release of Next.js 13.4.
“In the spirit of being the end-to-end solution for building on the web, we are introducing solutions that are open, easy to use, and scale as efficiently as our front-ends,” the company said in a blog post outlining some of its latest enhancements.
Here are highlights from the most recent announcements from Vercel.
Visual Editing for headless CMS
For CMS watchers, the biggest news is Visual Editing, which Vercel developed in partnership with Sanity.
In a headless CMS, Visual Editing allows business users to directly make content changes to web pages without involving a developer, filling in forms, or leaving their site.
“You can now visually edit content on your site, simplifying the editing process and allowing everyone to make edits quickly,” Greta Workman, Vercel’s Product Marketing Director, said during a streamed online keynote event.
Although early adopters of a headless tech stack lost that kind of hands-on, business user control over front-end design in their CMS, Visual Editing aims to give it back to them.
On its blog page, Vercel emphasized Visual Editing’s user-friendly, click-to-edit interface, saying it enables direct content editing by “anyone … from developers to marketing teams .. with zero code changes to your website, supporting any web framework.”
Visual Editing is still in limited private beta. Vercel is currently working on a version of it for non-headless CMSes, e-commerce systems, and content sources.
Vercel Spaces
Vercel Spaces is a new set of tools giving developers greater visibility and control over workflows, build logs, collaboration, and code health.
In the streamed keynote event, Lee Robinson, Vercel’s VP of DX, said Spaces “makes sure the right people review and approve the code” with the goal of “preventing errors before they happen.”
Vercel Spaces has four main components:
- Spaces Dashboard - a single place where developers can find at-a-glance information aboutcodebase, owners, and build logs
- Conformance - an automated system that detects critical code issues early in the dev cycle before they reach production
- Code Owners - makes it easier to find out who’s responsible for a piece of code and contact them; automatically ensures all code changes are reviewed by the appropriate people
- Vercel Runs - an easier way to store and find historical build logs; if there’s a build failure, this means developers don’t have to scroll endlessly through terminal logs to find the source for debugging purposes
Vercel says Conformance, Code Owners, and Vercel Runs are now available in early private beta for enterprise organizations, and “can be used with Vercel regardless of where you host your application.”
Next.js 13.4
This is the latest iteration of Next.js since Vercel released the original version in 2016.
13.4 features an improved App Router, tweaked to be compatible with app streaming and provide enhanced support for layouts.
In the App Router, server components allow a page to be modularized into different slices that can individually ‘stream in’ relevant page components and data. This new modularity provides more flexibility in how a site’s pages can be broken into smaller chunks. Those chunks can each have their own loading indicators, and still be rendered on the server instead of in the browser.
“Content can be instantly streamed from the server, improving the perceived loading performance of a page. With (Next.js 13.4), we’ve made the App Router even more powerful, yet easy to use,” Delba Oliveira, Developer Advocate at Vercel, said during the online keynote.
According to Vercel, data fetching in the 13.4 App Router is not only much faster, it also “happens securely on the server.”
Next.js 13.4 also includes:
- Turbopack - speeds up the local development process; now in beta testing
- Server Actions - Vercel designed this feature to be composable; allows developers to mutate data on the server by calling functions directly instead of creating an API layer first; now in alpha testing
Storage and security
Vercel also announced a trio of new tools for storage:
- KV - a serverless, Redis-compatible database solution created in partnership with Upstash
- Postgres - a serverless SQL database built for the front-end in conjunction with Neon; aimed at delivering low latency and high performance for web applications
- Blob - allows files to be stored in the cloud and uploaded and served at the edge; in private beta
Vercel said the three storage solutions “make it easier to fetch data from databases or other sources within the server component itself.”
Two new security features rounded out Vercel’s week of announcements:
- Vercel Secure Compute - places builds and deployments in a private network with dedicated IP addresses
- Vercel Firewall - defends applications and websites against DDoS attacks by blocking access from certain IP addresses
Vercel, a cloud-based platform for front-end development, joined the MACH Alliance as a member of the ‘enabler’ category in July 2022.
Christine Wong
Senior Technology Staff Writer, Orium
I've been telling enterprise technology stories for almost three decades in print, online, and on television. I started out in journalism, covering the telecom boom, the birth of social media and the emergence of digital commerce. I'm always looking for the human angle in every technology story I write.