How to Connect MongoDB Atlas to Vercel Using the New Integration
.png&w=3840&q=75)
Rate this quickstart
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.
For this tutorial, you’ll need:
- Node.js 14+.
This tutorial will work with any frontend framework if Next.js isn’t your preference.
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.
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.1 npx 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:
1 cd 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.
I’m going to press Publish Branch and name my new repo
vercel-integration.From your Vercel dashboard, create a new project and then choose to import a GitHub repository by clicking Continue with 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.
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.
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.”
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.
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.
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.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:
1 npm i vercel
In order to link our local project with our Vercel project, run the following command:
1 vercel
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.
But if you run the project locally, you will get an error message.
1 npm run dev
We need to pull the environment variables into our project. To do that, run the following:
1 vercel env pull
Now, every time you update your repo, Vercel will automatically redeploy your changes to production!
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.