Integration roundup: The Vercel App and Contentful Content Link for Vercel

Each month, our Ecosystem team and Technology Partners collaborate to bring platform users exciting new integrations, opening up new opportunities to customize and extend their Contentful use cases.

In this post, we’re excited to share the launch of two new integrations with Vercel: the Vercel App (available in the Contentful Marketplace) and the Contentful Content Link for Vercel Edit Mode. 

With the proliferation of Next.js, it’s no wonder that many Contentful customers are using Vercel to build, run, and deploy dynamic digital experiences. 

While developers can now pair Contentful and Vercel to deploy modern, powerful web applications with ease, setting up preview environments and last-minute edits was once a time-consuming task for developers to tackle – now remedied by these applications.

The Vercel App

The Vercel App streamlines how Contentful live previews are set up and shared within Vercel deployment environments. You can take care of both in just a single click within the entry sidebar. 

This enables Contentful users to preview the changes they make to content in Contentful in near real-time as reflected on their Vercel site. 

Previously, developers had to implement custom API endpoints and code to set up such previews. 

How does it work?

To begin using the Vercel App, you’ll need admin access to the Vercel project where your Next.js application is connected with your Contentful space. If you don’t have an application deployed to Vercel that’s connected to Contentful just yet, use this Vercel guide to get started. 

Next, you’ll need to ensure that your application supports Vercel’s Draft Mode, which allows your team to switch between production and preview mode in Vercel. For information on setting this up, consult our guide for implementing Draft Mode. 

Once you install the app in your Contentful space, you’ll need to configure it to your Vercel project. 

With setup complete, users will be able to open Live Preview with side-by-side editing in the entry editor, or in a new tab from the “Open Live Preview” button (without side-by-side editing). 

From here on out, content editors will be able to see any changes they make in Contentful reflected in your connected Vercel environment. 

Contentful Content Link for Vercel

So, we covered how to use the new Vercel App to preview content deployed to Vercel from Contentful. But, what about viewing and navigating that content from the Vercel platform? 

Last year, Contentful launched live preview, which offers a more efficient way for nontechnical teams and stakeholders to assess the look and feel of a page or test small design and content changes for optimization, and inspector mode, which enables teams to access a related entry with a single click of the content being previewed.

Vercel’s Edit Mode offers a similar experience, allowing users to edit and visualize content from headless CMSes, supporting last-minute updates without the need for developer support. 

Content Link — available in Edit Mode and now supported by Contentful — enables users to more easily navigate and edit content stored within their CMS. Instead of searching through entries to find an issue, a content editor can click a specific piece of visual content in Edit Mode to find the entry and correct the issue. Previously, this required more time and effort to accomplish, especially for larger, more complex pages. 

How does it work?

This integration leverages a new feature called Content Source Maps, which simplifies how you configure Content Link by automatically tagging simple text fields, rich text fields, and assets. Through this feature, users can utilize Vercel’s Edit Mode to navigate connected Contentful entries.

Our APIs return source maps for visual fields that correspond to those in the Contentful Entry, which the SDK then transforms into hidden metadata in the results of the query. Using an approach called “steganography,” which conceals hidden information inside other data, we embed that metadata into invisible unicode characters incorporated into the existing strings. Finally, you can use Contentful Live Preview or, in this case, Vercel Edit Mode, to detect and decipher that metadata in the final HTML, which then displays the Content Link. 

Note that a Vercel Pro or Enterprise plan and Enterprise Contentful Plan are required to use Contentful Content Link for Vercel. 

Wrapping up

Together, Contentful and Vercel empower developers to build modern web experiences that push the boundaries of creativity and innovation. 

By pairing the composability and content management power of Contentful with the deployment prowess of Vercel, you can deliver compelling, captivating digital content that inspires a global audience.

Dive into the world of Contentful and Vercel by visiting the Contentful Marketplace and trying out the Vercel App today!

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.