DEV Community

Cover image for It’s Happening! Vercel 🤝 MongoDB
MongoDB profile image Jesse Hall - codeSTACKr
Jesse Hall - codeSTACKr for MongoDB

Posted on

It’s Happening! Vercel 🤝 MongoDB

#webdev #javascript #vercel #mongodb

Setting up a MongoDB Atlas database for your Vercel projects just became incredibly easy. MongoDB and Vercel have partnered to bring native database integration directly into the Vercel ecosystem, eliminating the usual setup friction and configuration headaches.

In this tutorial, we'll walk through the complete process of creating a new Next.js application with MongoDB Atlas, deploying it to Vercel, and connecting everything together. The best part? The entire database setup takes just three clicks.

💡 Check out the MongoDB Atlas native integration in the Vercel Marketplace!

What you'll build

By the end of this tutorial, you'll have a fully functional Next.js application connected to a MongoDB Atlas database, deployed on Vercel, and ready for development.

Prerequisites

Before we start, make sure you have:

Creating your Next.js application with MongoDB

We'll use the official MongoDB example template to get started quickly. This template comes pre-configured with MongoDB connection logic.

Open your terminal and run:

npx create-next-app --example with-mongodb nextjs-mongodb -y
Enter fullscreen mode Exit fullscreen mode

This command does several things:

  • Creates a new Next.js application using the with-mongodb example
  • Names the project nextjs-mongodb (you can choose any name you prefer)
  • The -y flag automatically accepts all default options

Navigate to your new project directory:

cd nextjs-mongodb
Enter fullscreen mode Exit fullscreen mode

Setting up version control

Before we deploy, let's initialize a Git repository. This step is important because Vercel automatically redeploys your application when you push changes to your repository.

git init
git add .
git commit -m "Initial commit"
Enter fullscreen mode Exit fullscreen mode

If you want to push this to GitHub (recommended), create a new repository on GitHub and connect it:

git remote add origin https://github.com/yourusername/your-repo-name.git
git branch -M main
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

Connecting to Vercel

Now, we'll link this project to Vercel using the Vercel CLI. If you don't have it installed, run npm i -g vercel first.

vercel link
Enter fullscreen mode Exit fullscreen mode

Follow the prompts to:

  1. Log in to your Vercel account (if not already logged in).
  2. Link to an existing project or create a new one.
  3. Select your project directory.

Adding MongoDB Atlas through Vercel

Here's where the magic happens. You can add MongoDB to your project in two ways:

Option 1: Through your project dashboard

  1. Go to your Vercel project dashboard.
  2. Navigate to the "Storage" tab.
  3. Click "Create Database."
  4. Select "MongoDB Atlas."

Option 2: Through the Vercel Marketplace

  1. Go to the Vercel Marketplace.
  2. Search for "MongoDB."
  3. Select "MongoDB Atlas."

Both paths lead to the same integration process:

  1. Select "Install": This starts the integration process.
  2. Choose your configuration:
    • Cluster: Select the cluster tier (M0 Sandbox is free and perfect for development).
    • Region: Choose the region closest to your users.
    • Plan: The free tier gives you 512 MB of storage and is free forever.
    • Click "Continue."
  3. Enter Database Name: Give your database a descriptive name, or keep the auto-generated one, then click "Continue."
  4. Select "Done": This finalizes the database creation.
  5. Select "Connect Project": This connects the database to your Vercel project.

This process creates a complete MongoDB Atlas cluster, configures all necessary user permissions and network access, and automatically adds the connection environment variable to your Vercel project.

Syncing environment variables locally

Your Vercel project now has the MongoDB connection string, but your local development environment doesn't. The Vercel CLI makes this easy:

vercel env pull
Enter fullscreen mode Exit fullscreen mode

This command downloads all environment variables from your Vercel project and creates a .env.local file in your project root. You should see a MONGODB_URI variable added to this file.

Testing your application

Let's start the development server and see everything in action:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Navigate to http://localhost:3000 in your browser. You should see the MongoDB example application running, complete with database connectivity.

Quick deploy option

If you want to skip the manual setup and get started even faster, you can use this one-click deploy button:

Deploy with Vercel

This approach follows a similar process:

  1. Select "Create" to create a new repository in your Git provider.
  2. Select "Add" to add the MongoDB integration.
  3. Configure your database (Cluster, Region, Plan), then click "Continue."
  4. Enter Database Name and then click "Continue."
  5. Select "Done" to complete the database setup.
  6. Choose environments and then select "Connect" to link everything together.
  7. Wait for deployment and then click the preview link to see your live application.

A screenshot of the deployed MongoDB Starter template from the Vercel Marketplace

Understanding the integration

This native integration handles several complex tasks automatically:

Database provisioning: Creates a production-ready MongoDB Atlas cluster with proper security configurations.

Network security: Configures IP allowlisting to accept connections from Vercel's infrastructure.

User authentication: Creates database users with appropriate permissions for your application.

Environment management: Automatically provisions and manages connection strings across all your Vercel environments (development, preview, production).

Billing integration: Consolidates billing so you can manage both Vercel and MongoDB Atlas costs in one place.

Next steps

With your MongoDB Atlas database connected to Vercel, you're ready to build powerful applications. The example template provides a solid foundation, but here are some directions you might explore:

Data modeling: MongoDB's flexible document model lets you iterate quickly on your data structure without complex migrations.

Search capabilities: MongoDB Atlas includes built-in full-text search, vector search for AI applications, and hybrid search combining multiple approaches.

Performance optimization: Explore indexing strategies and query optimization as your application grows.

Additional integrations: The Vercel Marketplace includes many other services that complement MongoDB, from authentication providers to analytics tools.

Conclusion

The MongoDB Atlas and Vercel integration removes the traditional friction of setting up and configuring databases for web applications. Whether you're building your next side project or a production application, this streamlined workflow lets you focus on writing code instead of managing infrastructure.

The same steps we covered work with any framework supported by Vercel—you simply need to use the MONGODB_URI environment variable to connect your application to the database. The integration automatically handles the complexity of security, networking, and environment management across development, preview, and production environments.

Try building something with this setup and see how the combination of MongoDB's flexible data model and Vercel's deployment platform can accelerate your development workflow.

Say Hello! YouTube | Twitter | LinkedIn | Instagram | TikTok

Top comments (0)