Skip to main content

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.

create new vercel 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.

import git repository

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.

vercel project integrations

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

vercel tigris integration

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

tigris integration page

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

select vercel account

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

select vercel projec

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

integrating tigris project with vercel

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

vercel tigris integration successful

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 project application keys within the Tigris Console

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.

Tigris project application key dialog within the Tigris Console

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.

configure vercel project

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 nameValueEnvironment(s)
TIGRIS_URIThe URI to your Tigris deployment. For Tigris Cloud this is one of the Tigris regionsProduction, Preview
TIGRIS_PROJECTyour project nameProduction, Preview
TIGRIS_CLIENT_IDyour production app key client IDProduction, Preview
TIGRIS_CLIENT_SECRETyour production app key client secretProduction, Preview
TIGRIS_DB_BRANCHpreview_${VERCEL_GIT_COMMIT_REF}Preview
TIGRIS_DB_BRANCHmainProduction

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:

Vercel Tigris project environment variables configuration within the Vercel dashboard

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.