# Integrate Vercel and Contentstack for your Headless CMS **Author:** Alex Hawley --- 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](https://vercel.com/integrations/contentstack) to connect with your Vercel project. ## Getting started 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](https://vercel.com/signup) - [Create your Contentstack account](https://www.contentstack.com/try-for-free) - [Install and configure the Contentstack CLI](https://www.contentstack.com/docs/developers/cli#get-started-with-contentstack-command-line-interface-cli) Once you have these ready, you can proceed with the integration process. ## Setup your app in Contentstack 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. ### Set the region 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 <>` 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. ### Login to Contentstack 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). > Contentstack does not currently support strict SSO for CLI authentication. To enable CLI access for strict SSO-enabled organizations, adjust the SSO strict mode in Organization Settings to a user-by-user basis. This allows specific developers to use the CLI. For more details, refer to [CLI Authentication and Adding Tokens](https://www.contentstack.com/docs/developers/cli/cli-authentication/) documentation. ### Import Content into the Stack 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. > Refer to the [Stack Roles](https://www.contentstack.com/docs/developers/invite-users-and-assign-roles/types-of-roles/) documentation to learn about permissions. Once finished, you will have content imported into your stack! ### Create a delivery token A delivery token lets you fetch published content from an environment. To create a delivery token, log in to your [Contentstack account](https://www.contentstack.com/login), 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. > To learn more, refer to the [Create a Delivery Token](https://www.contentstack.com/docs/developers/create-tokens/create-a-delivery-token/) documentation. 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. ### Build and configure the website Clone the website code from the [Contentstack GitHub repository](https://github.com/contentstack/contentstack-nextjs-starter-app), 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=   CONTENTSTACK_DELIVERY_TOKEN=    CONTENTSTACK_ENVIRONMENT=   CONTENTSTACK_REGION=   CONTENTSTACK_API_HOST= cdn.contentstack.io   # By default branch=main, if a branch is not provided   # CONTENTSTACK_BRANCH=   # By default region=us, if a region is not provided    # CONTENTSTACK_REGION= NA   CONTENTSTACK_PREVIEW_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. ## Deploy to Vercel Now that you have your Contentstack application, you can deploy it to Vercel. You can choose to use the [Vercel CLI](https://vercel.com/docs/cli) or the [Git integrations](https://vercel.com/docs/deployments/git) 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](https://vercel.com/new) 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! ## Conclusion 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. --- [View full KB sitemap](/kb/sitemap.md)