Integrate Vercel and Contentstack for your Headless CMS

Contentstack, a headless CMS, enables content creators to efficiently manage and deliver content across multiple channels. Its API-first approach ensures flexibility and simplifies integration with other services. By integrating Contentstack with Vercel, developers can build web applications that leverage Vercel's fast, secure frontend cloud along with Contentstack's robust content management capabilities.

Integrating Vercel and Contentstack provides a comprehensive solution for developers aiming to create dynamic, high-performance web applications. By leveraging Vercel's global edge network and Contentstack's scalable infrastructure, developers can deliver a seamless, engaging user experience across multiple devices and platforms.

This guide will take you through the step-by-step process of configuring Contentstack and deploying a new Next.js web application to Vercel.

If you already have a Contentstack account and Vercel deployment, you can install the Contentstack Integration to connect with your Vercel project.

Before you configure and integrate Vercel with Contentstack, ensure that you have a Vercel account, a GitHub account, and the Contentstack CLI installed. If you haven't already, you can sign up for these services at the following pages:

• Create your Vercel account
• Create your Contentstack account
• Install and configure the Contentstack CLI

Once you have these ready, you can proceed with the integration process.

In this section, you'll learn how to set up your app in Contentstack to prepare it for integration with Vercel. We'll guide you through steps, such as selecting your region, logging in via the CLI, and importing content, ensuring your app is ready for deployment.

To use the North America, Europe, Azure North America, Azure Europe, or Google North America endpoint, run the following command in your terminal:

csdx config:set:region <<region>>

Be sure to use the appropriate region code for your region:

• NA for North America
• EU for Europe
• AZURE-NA for Azure North America
• AZURE-EU for Azure Europe
• GCP-NA for Google North America.

To import content to your stack, you need to log in to your Contentstack account via the CLI by running the following command in your terminal:

csdx auth:login

This command requests you to provide your Contentstack’s account credentials (i.e., email and password).

The seed command lets you import content to your stack in a few steps. To do so, run the following command in your terminal:

csdx cm:stacks:seed --repo "contentstack/stack-starter-app"

This command prompts the following options:

• Organization name: You will get a list of organizations to which you have access. Select the one from the list where you want to create a new stack.
• Stack preference: Next, you have to create a new stack. You will see two options: New and Existing. Click New, provide a name, and proceed.

Once finished, you will have content imported into your stack!

A delivery token lets you fetch published content from an environment. To create a delivery token, log in to your Contentstack account, and perform the following:

• Go to Stack Settings, click Tokens from the left navigation panel, and then click the + Delivery Token button to generate a new Delivery token.

• In the Create New Delivery Token page, provide the Name and Description.

• Scroll down, and set the Scope. Select Branches and Publishing Environments from the available options.

• Now, click the Generate Token button to generate the delivery token.

• Copy the Delivery Token to clipboard and save the entry.

You can create a delivery token for the development environment to run the website on localhost, and later, generate tokens for other environments when deploying your site.

Clone the website code from the Contentstack GitHub repository, navigate to the project directory, and create a copy of the .env.local.sample file, renaming it to .env.local.

The .env.local file contains all the necessary config parameters. Open it in any code editor or IDE of your choice, provide your Stack credentials as shown below, and save the file.

CONTENTSTACK_API_KEY=<api_key_of_your_stack>  

CONTENTSTACK_DELIVERY_TOKEN= <delivery_token_of_the_environment>  

CONTENTSTACK_ENVIRONMENT=<environment_name>  

CONTENTSTACK_REGION=<region>  

CONTENTSTACK_API_HOST= cdn.contentstack.io  

# By default branch=main, if a branch is not provided  

# CONTENTSTACK_BRANCH=<your_branch_name>  

# By default region=us, if a region is not provided   

# CONTENTSTACK_REGION= NA  

CONTENTSTACK_PREVIEW_TOKEN = <preview_token_linked_with_delivery_token>  

CONTENTSTACK_PREVIEW_HOST= rest-preview.contentstack.com  

CONTENTSTACK_APP_HOST= app.contentstack.com   

CONTENTSTACK_LIVE_PREVIEW= true   

# By default the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".  

CONTENTSTACK_LIVE_EDIT_TAGS= false   

# By default live editing tags are disabled for this project. To enable it, set “CONTENTSTACK_LIVE_EDIT_TAGS= true”.

Details to note:

• The default CONTENTSTACK_API_HOST URL is set to cdn.contentstack.io. You can also specify a custom host URL if needed.
• For Europe (EU), set CONTENTSTACK_API_HOST to eu-api.contentstack.com.
• For Azure North America (AZURE-NA), use azure-na-api.contentstack.com.
• For Azure Europe (AZURE-EU), use azure-eu-api.contentstack.com.
• For Google North America (GCP-NA), set CONTENTSTACK_API_HOST to gcp-na-api.contentstack.com.

Run the following commands in your terminal:

1. Install the dependencies of the project using the following command: npm install
2. Start the development server of the project using the following command: npm run dev

You can now view the website at http://localhost:3000/. The stack contains all the website content and resources. Try experimenting by creating new entries and publishing them in the development environment—you should see the changes reflected on the website at localhost.

Now that you have your Contentstack application, you can deploy it to Vercel. You can choose to use the Vercel CLI or the Git integrations to deploy your code. For this guide, let’s use the Git integration by following these steps:

1. Push your code to your Git repository (e.g. GitHub, GitLab, or BitBucket).
2. Import your Git repository into Vercel.
3. Vercel will automatically detect that you are using Next.js and enable the correct settings for your deployment.
4. Add the environment variables from your .env.local file by copying and pasting it under the Environment Variables section.
5. Click Deploy and wait for your application to build and deploy!

By following this guide, you’ve successfully configured Contentstack and deployed a Next.js web application to Vercel. This powerful integration allows you to manage content seamlessly while taking advantage of Vercel’s fast, secure hosting platform. Now, you can continue to enhance and scale your application with ease, delivering exceptional user experiences across multiple devices and platforms.