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

Published on August 22, 2024

Integration Roundup

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

Open Live Preview

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

The journey has begun

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.

What is Contentful?

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.

Related articles

News

A beginner's guide to creating a static site using React, Gatsby, Contentful and Netlify

August 17, 2018

Spring Launch continues to unlock the power of composable content by empowering organizations to connect, collaborate, and scale digital experiences.
News

There’s something for everyone in the Contentful Spring Launch

May 4, 2023

Blog header dialog extensions
News

Customize your whole editorial experience with entry extensions

September 9, 2019

Contentful Logo 2.5 Dark

Ready to start building?

Put everything you learned into action. Create and publish your content with Contentful — no credit card required.

Get started