Deploying a Next.js Tigris Application to Vercel

This guide demonstrates two approaches to deploying an existing Next.js + Tigris application to Vercel.

In order for Tigris to work within a Next.js application (or any other type of application) on Vercel, the Tigris environment variables must be set.

Prerequisites

This guide assumes you have the following:

• A Vercel account
• A GitHub account and your application source code in a GitHub repository
• A Tigris account and a Tigris project created for your application running in development
• A Next.js application built using Tigris running in your development environment and your credentials stored in a .env.local file

If you haven't already created a project in Vercel and configured it to use your application source from your GitHub repo, you'll need to do that before proceeding.

Create a new Vercel Project

On your Vercel dashboard, click on **Add New > Project** button on the right-hand side to create a new Vercel site for your project.

Then enter the Git repo name corresponding to the project in the search box and click on the Import button next to the project listed in the results.

info

The build for a Next.js codebase deployed to Vercel configured to use Tigris will initially fail. This is because the required Tigris project environment variables need to be added to the Vercel project.

There are two methods to deploying your Next.js and Tigris application to Vercel:

1. Use the Tigris Vercel integration with your Vercel project
2. Manually add the Tigris project configuration as Vercel project environment variables

Use the Tigris Vercel integration with your Vercel project

Within the Vercel dashboard, find your project and navigate to the configuration > Integrations page.

Click on the Browse Marketplace button, then search for Tigris in the input field. Next, locate and select the Vercel integration for Tigris.

For your Tigris project to be integrated with Vercel, you must authorize Vercel to access it. To begin, click on the Add Integration button.

Then choose a Vercel account to authorize the integration and click on the CONTINUE button.

Next, select the Vercel project you want to integrate with Tigris and click on the CONTINUE button.

On the next screen, click on the ADD INTEGRATION button. Then, choose the Tigris project you want to connect the Vercel project with.

Once the Integration process is completed, you will be redirected to the success page.

Head back to your Vercel project, and navigate to the Deployments section, where you will find the failed build. Click on it to view the deployment details, and then select the Redeploy button to redeploy your project.

With the Tigris environment variables now in place via the integration flow, your Tigris project will build and deploy successfully. Click on Continue to Dashboard > Visit button to preview your application.

Manually add the Tigris project configuration as Vercel project environment variables

A Next.js Tigris application needs the following environment variables:

• TIGRIS_URI - the URI to your Tigris platform deployment. If you are using Tigris Cloud, this is one of the Tigris regions.
• TIGRIS_PROJECT - the name of your project in Tigris. Do not confuse this with the name of your application key.
• TIGRIS_CLIENT_ID - an application key client ID.
• TIGRIS_CLIENT_SECRET - an application key client secret.
• TIGRIS_DB_BRANCH - The name of the database branch. Locally you may use develop, and we recommend main for production. However, you can set this to any name you like, as you do with Git branches.

You can get your Tigris project configuration for your environment variables from two places:

1. The Application Keys section of your Tigris project within the Tigris Console (recommended)
2. The .env.local file in your local development environment (not recommended for a production app)

Getting Tigris project configuration from the Tigris Console

To get the configuration from the Tigris console, navigate to your project and select Application Keys.

Tigris database branching streamlines your developer experience and reduces the likelihood of you accidentally making changes to any data or schema in production. However, we still recommend you create a different application key development and production environments.

With an application key created, click on the eye icon on the right of a key to open a dialog. You can then copy the following:

• URL for the TIGRIS_URI
• Client ID for the TIGRIS_CLIENT_ID
• Client Secret for the TIGRIS_CLIENT_SECRET
• Name for the TIGRIS_PROJECT

The value for TIGRIS_DB_BRANCH isn't listed here since the branch name is up to you. We'll cover this further in the Setting the Vercel Environment Variables section.

Getting your environment variables from your development .env.local file

caution

We recommend that you use different application keys for local development and production. This means you will have different values for TIGRIS_CLIENT_ID and TIGRIS_CLIENT_SECRET. So, this approach is not recommended for production apps.

Within your local development environment, you will have a .env.local file. It will look as follows:

.env

TIGRIS_URI=tigris_uri
TIGRIS_PROJECT=nextjs_blog_starter_comments
TIGRIS_CLIENT_ID=ftSxxx
TIGRIS_CLIENT_SECRET=DOxxx
TIGRIS_DB_BRANCH=main

These are the environment variables you need to set in your Vercel project.

See Next.js environment variables for more general information and other available file naming conventions.

Setting the Vercel Environment Variables

Now that you have your Tigris project configuration, you can add them to your project in Vercel.

If you are within the Vercel project set up flow, you can set environment variables there.

If your project has already been set up, then go to your project, select the Settings tab and then select Environment Variables. You can then set the required environment variables for the different Vercel environments.

We recommend the following:

Environment variable name	Value	Environment(s)
TIGRIS_URI	The URI to your Tigris deployment. For Tigris Cloud this is one of the Tigris regions	Production, Preview
TIGRIS_PROJECT	your project name	Production, Preview
TIGRIS_CLIENT_ID	your production app key client ID	Production, Preview
TIGRIS_CLIENT_SECRET	your production app key client secret	Production, Preview
TIGRIS_DB_BRANCH	preview_${VERCEL_GIT_COMMIT_REF}	Preview
TIGRIS_DB_BRANCH	main	Production

For TIGRIS_DB_BRANCH, the convention is to use main for your Vercel Production environment. We recommend a dynamic value for the Preview environment. For example, preview_${VERCEL_GIT_COMMIT_REF} for a database branch per Git commit or preview_${GIT_BRANCH} for one per Git branch.

tip

You can also set environment variables in Vercel using the Vercel CLI and the vercel env command.

When complete, the Vercel environmental variable configuration will look as follows:

After you have added all the necessary environment variables, you will need to trigger a deployment.

If you are in the Vercel project set up flow, click the Deploy button.

Otherwise, head to the Deployments section of your project within the Vercel dashboard, select a deployment, and then click Redeploy. The new deployment will pick up the newly set environment variables.

And that's it. You have successfully deployed your Next.js + Tigris application to Vercel. Head over to the How to create a new Next.js project with Tigris using create-next-app blog to get started on a new Next.js + Tigris application.