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
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.
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:
- Use the Tigris Vercel integration with your Vercel project
- 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 recommendmain
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:
- The Application Keys section of your Tigris project within the Tigris Console (recommended)
- 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
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:
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.
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.