# How to Connect MongoDB Atlas to Vercel Using the New Integration

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.

```bash
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:

```bash
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`.

## 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.

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. 

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:

```bash
npm i vercel
```

In order to link our local project with our Vercel project, run the following command:

```bash
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.

```bash
npm run dev
```

We need to pull the environment variables into our project. To do that, run the following:

```bash
vercel 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.