Deploying to Vercel

Vercel is a hosting and automation platform that allows developers to deploy static web applications quickly and easily.

Additionally, Vercel offers a free plan that includes:

Hosting for static websites.
SSL certificates.
Continuous integration.
Etc.

In this example, we’ll see how to deploy the "Get Started Next.js" project from Content Island to Vercel.

Step 1: Create a Repository

The first thing we need to deploy this project is a GitHub repository:

Go to GitHub and create a new repository.
Name it get-started-deploy-vercel.
You can make it public or private—your choice. Later, we’ll give Vercel permission to access the repo.
Click create without adding any files.

Copy the URL of the new repository and clone it to your local machine in an empty folder using this command:

git clone <URL of the repository> .

We add a dot at the end so Git doesn’t create an extra folder with the repo name.

Now that the Next.js project is cloned, simply copy all the content into this new repo and push it using the following commands:

git add .
git commit -m "Initial commit"
git push

Check to make sure the project is now uploaded to your GitHub repository.

Step 2: Configure Deployment

To deploy on Vercel, you’ll need an account on the platform.

Once logged in, on the main page, click Add new and select Project.

Add new Vercel project

If this is your first time, you’ll need to give Vercel permission to access your GitHub account (or choose another Git provider).

Configure Vercel with GitHub

You can allow access to all repos or only specific ones. In this case, select the one you just created.

Once configured, you can now select the repo you want to deploy and a configuration screen will appear.

Vercel will automatically use the same name as your repo for the app. You can rename it if you like:

App name

By default, it will detect the framework being used. You can change the build settings if needed, but for this example, the defaults work fine.

Build options

We need to add a new environment variable—remember that when the project builds, it connects to our Content Island project to fetch the data for each Post.

Add new environment variable

So we need to configure the CONTENT_ISLAND_SECRET_TOKEN environment variable with the value provided by Content Island in the General tab.

Add Content Island Token

Then click Deploy.

And that’s it! Your project using Content Island and Next.js is now deployed on Vercel.