How-to
3 min read

Vercel CMS Integrations

Learn how to integrate Vercel with CMS platforms, including Contentful, Sanity, and Sitecore XM Cloud.
Table of Contents

Vercel Content Management System (CMS) Integrations allow you to connect your projects with CMS platforms, including Contentful, Sanity, Sitecore XM Cloud and more. These integrations provide a direct path to incorporating CMS into your applications, enabling you to build, deploy, and leverage CMS-powered features with minimal hassle.

You can use the following methods to integrate your CMS with Vercel:

The most common way to setup a CMS with Vercel is by installing an integration through the Integrations Marketplace. This method allows you to quickly setup your Vercel project with environment variables from your CMS.

Once a CMS has been installed, and a project linked you can pull in environment variables from the CMS to your Vercel project using the Vercel CLI.

  1. To pull in environment variables from your CMS to your Vercel project, you need to install the Vercel CLI. Run the following command in your terminal:

    pnpm
    yarn
    npm
    pnpm i -g vercel@latest
  2. Navigate to the CMS integration you want to install into your project, and follow the steps to install the integration.

  3. Once you've installed the CMS integration, you can pull in environment variables from the CMS to your Vercel project. In your terminal, run:

    vercel env pull .env.development.local

See your installed CMSs documentation for next steps on how to use the integration.

When editable content is detected on a page, the toolbar shows an pencil icon to indicate there are elements on the page matched to fields in the CMS.

The Vercel Toolbar on a deployment
The Vercel Toolbar on a deployment

Selecting the pencil icon activates Edit Mode, which highlights the editable fields as Content Links in blue as you hover near them.

The following CMS integrations support Content Link:

See the Edit Mode documentation for information on setup and configuration.

Draft mode allows you to view unpublished content from your CMS within a Vercel preview, and works with Next.js and SvelteKit. See the Draft Mode documentation for information and setup and configuration.

This method is generally setup through webhooks or APIs that trigger a deployment when content is updated in the CMS. See your CMSs documentation for information on how to set this up.

Last updated on June 22, 2024