Explore Developer Center's New Chatbot! MongoDB AI Chatbot can be accessed at the top of your navigation to answer all your MongoDB questions.

Introducing MongoDB 8.0, the fastest MongoDB ever!
MongoDB Developer
Atlas
plus
Sign in to follow topics
MongoDB Developer Centerchevron-right
Developer Topicschevron-right
Productschevron-right
Atlaschevron-right

How to Connect MongoDB Atlas to Vercel Using the New Integration

Jesse Hall4 min read • Published Jun 07, 2022 • Updated Aug 05, 2024
VercelNode.jsAtlasJavaScript
Facebook Icontwitter iconlinkedin icon
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:
  • MongoDB Atlas (sign up for free).
  • Vercel account (sign up for free).
  • Node.js 14+.
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.
1npx create-next-app --example with-mongodb vercel-demo -y
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:
1cd vercel-demo
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:
1npm i vercel
In order to link our local project with our Vercel project, run the following command:
1vercel
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.
1npm run dev
Server error when running the project locally
We need to pull the environment variables into our project. To do that, run the following:
1vercel env pull
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.

Facebook Icontwitter iconlinkedin icon
Rate this quickstart
star-empty
star-empty
star-empty
star-empty
star-empty
Related
Article

Best Practices and a Tutorial for Using Google Cloud Functions with MongoDB Atlas


Jun 13, 2023 | 13 min read
Tutorial

Exploring Search Capabilities With Atlas Search


Aug 20, 2024 | 9 min read
Code Example

Introducing the Tour Planner With MongoDB Vector Search


Sep 24, 2024 | 5 min read
Tutorial

Getting Started with MongoDB Atlas, NodeJS, and Azure App Service


Apr 02, 2024 | 5 min read
Table of Contents