Atlas
MongoDB Developer Center
chevron-right
Developer Topics
chevron-right
Products
chevron-right
Atlas
chevron-right

How to Connect MongoDB Atlas to Vercel Using the New Integration

Jesse HallPublished Jun 07, 2022 • Updated Jun 14, 2022
VercelNodejsAtlasJavaScript
facebook icontwitter iconlinkedin icon
random alt
Rate this quickstart
star-empty
star-empty
star-empty
star-empty
star-empty
Getting a MongoDB Atlas database created and linked to your Vercel project has never been easier. In this tutorial, we’ll get everything set up—including a starter Next.js application—in just minutes.

Prerequisites

For this tutorial, you’ll need:
This tutorial will work with any frontend framework if Next.js isn’t your preference.

What is Vercel?

Vercel is a cloud platform for hosting websites and web applications. Deployment is seamless and scaling is automatic.
Many web frameworks will work on Vercel, but the one most notable is Vercel’s own Next.js. Next.js is a React-based framework and has many cool features, like built-in routing, image optimization, and serverless and
Edge Functions
.

Create a starter project

For our example, we are going to use Next.js. However, you can use any web framework you would like.
We’ll use the with-mongodb example app to get us started. This will give us a Next.js app with MongoDB Atlas integration already set up for us.
We are using the standard npx create-next-app command along with the --example with-mongodb parameter which will give us our fully integrated MongoDB application. Then, vercel-demo is the name of our application. You can name yours whatever you would like.
After that completes, navigate to your application directory:
At this point, we need to configure our MongoDB Atlas database connection. Instead of manually setting up our database and connection within the MongoDB Atlas dashboard, we are going to do it all through Vercel!
Before we move over to Vercel, let’s publish this project to GitHub. Using the built-in Version Control within VS Code, if you are logged into your GitHub account, it’s as easy as pressing one button in the Source Control tab.
Image of the "Publish Branch" button in VS Code
I’m going to press Publish Branch and name my new repo vercel-integration.

Create a Vercel project and integrate MongoDB

From your
Vercel dashboard
, create a new project and then choose to import a GitHub repository by clicking Continue with GitHub.
Illustration with choices of import methods including GitHub
Choose the repo that you just created, and then click Deploy. This deployment will actually fail because we have not set up our MongoDB integration yet.
Go back to the main Vercel dashboard and select the Integrations tab. From here, you can browse the marketplace and select the
MongoDB Atlas integration
.
Page showing the MongoDB Atlas Vercel Integration
Click Add Integration, select your account from the dropdown, and then click continue.
Next, you can either add this integration to all projects or select a specific project. I’m going to select the project I just created, and then click Add Integration.
Illustration showing Vercel account selection
If you do not already have a MongoDB Atlas account, you can sign up for one at this step. If you already have one, click “Log in now.”
Sign up for MongoDB or Sign in
The next step will allow you to select which Atlas Organization you would like to connect to Vercel. Either create a new one or select an existing one. Click Continue, and then I Acknowledge.
Select your existing organization or create a new one
The final step allows you to select an Atlas Project and Cluster to connect to. Again, you can either create new ones or select existing ones.
Vercel integration details
After you have completed those steps, you should end up back in Vercel and see that the MongoDB integration has been completed.
If you go to your project in Vercel, then select the Environment Variables section of the Settings page, you’ll see that there is a new variable called MONGODB_URI. This can now be used in our Next.js application.
For more information on how to connect MongoDB Atlas with Vercel, see our
documentation
.

Sync Vercel settings to local environment

All we have to do now is sync our environment variables to our local environment.
You can either manually copy/paste your MONGODB_URI into your local .env file, or you can use the Vercel CLI to automate that.
Let’s add the Vercel CLI to our project by running the following command:
In order to link our local project with our Vercel project, run the following command:
Choose a login method and use the browser pop-up to authenticate.
Answer yes to set up and deploy.
Select the appropriate scope for your project.
When asked to link to an existing project, type Y and press enter.
Now, type the name of your Vercel project. This will link the local project and run another build. Notice that this build works. That is because the environment variable with our MongoDB connection string is already in production.
Successful connection to MongoDB
But if you run the project locally, you will get an error message.
Server error when running the project locally
We need to pull the environment variables into our project. To do that, run the following:
Now, every time you update your repo, Vercel will automatically redeploy your changes to production!

Conclusion

In this tutorial, we set up a Vercel project, linked it to a MongoDB Atlas project and cluster, and linked our local environment to these.
These same steps will work with any framework and will provide you with the local and production environment variables you need to connect to your MongoDB Atlas database.
For an in-depth tutorial on Next.js and MongoDB, check out
How to Integrate MongoDB Into Your Next.js App
.
If you have any questions or feedback, check out our
MongoDB Community forums
and let us know what you think.

Copy Link
facebook icontwitter iconlinkedin icon
Rate this quickstart
star-empty
star-empty
star-empty
star-empty
star-empty
Related
Article
Building Service-Based Atlas Cluster Management

May 09, 2022
Article
Auto Pausing Inactive Clusters

May 13, 2022
Tutorial
CIDR Subnet Selection for MongoDB Atlas

May 13, 2022
Tutorial
Influence Search Result Ranking with Function Scores in Atlas Search

May 16, 2022
Table of Contents