Connecting MongoDB Atlas to Next.js with Prisma

Introduction

If you've built a Next.js website using Prisma and want to switch to MongoDB Atlas or want to harness the features and scalability of MongoDB Atlas without fully parting ways with Prisma, you're in the right place. Take this website, for example. I used MongoDB Atlas for storing views and reactions while maintaining the use of Prisma as my ORM. This setup allows me to benefit from MongoDB's flexible document-oriented database seamlessly.

Follow these steps to seamlessly integrate MongoDB Atlas into your Next.js project that utilizes Prisma.

Step 1: Set Up MongoDB Atlas

1.1 Create a MongoDB Atlas Account

If you don't have a MongoDB Atlas account, sign up at MongoDB Atlas.

1.2 Create a New Cluster

1. Log in to MongoDB Atlas.
2. Click on "Build a Cluster."
3. Choose your preferred cloud provider and region.
4. Select the cluster tier that fits your needs (e.g., M0 Sandbox for development).
5. Configure additional settings as needed and click "Create Cluster."

1.3 Get the Connection String

1. Once the cluster is deployed, click on "Connect" for your cluster.
2. Choose "Connect your application."
3. Copy the connection string. Replace <username>, <password>, and <database> in the connection string with your actual MongoDB Atlas credentials.

Step 2: Install Required Packages

Open your terminal and run the following command to install the necessary packages:

npm install @prisma/cli @prisma/client mongodb

Step 3: Set Up Prisma Configuration

Update your Prisma configuration to use the MongoDB provider. In your prisma/schema.prisma file, replace the existing provider with the MongoDB provider. Don't forget to import the env function:

// prisma/schema.prisma

import { env } from 'your-environment-library';

generator client {
  provider = "prisma-client-js"
  output   = "./generated/client"
}

// Other configurations...

// If you are using Postgresql
// provider = "postgresql"
// connection_url = env("DATABASE_URL")

// If you are using MongoDB
provider = "mongodb"
url      = env("DATABASE_URL")

Update your .env file with the MongoDB connection URL:

DATABASE_URL=mongodb+srv://<username>:<password>@cluster0.mongodb.net/<database>

Step 4: Database Migrations with Prisma

When working with databases, it's crucial to manage changes to the schema over time. Prisma provides a powerful migration system to help you version-control your database schema and apply changes seamlessly.

4.1 Initialize Migrations

To initialize migrations, run the following command in your terminal:

npx prisma migrate dev

This command creates a new migration in the prisma/migrations directory, capturing the changes made to your schema. Ensure that your .env file already contains the correct MongoDB connection URL in the DATABASE_URL variable.

4.2 Apply Migrations

To apply the migrations and update your database, run:

npx prisma migrate deploy

This command executes the pending migrations, applying the changes to the database.

Step 5: Update Prisma Client

Now, update your Prisma client instantiation in your Next.js project to use the MongoDB provider. Open your prisma/client.ts file (or wherever you initialize your Prisma client) and replace:

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

With:

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient({
  datasources: {
    db: {
      url: process.env.DATABASE_URL,
    },
  },
});

Step 6: Restart Your Next.js Application

Restart your Next.js development server to apply the changes:

npm run dev

Your Next.js application is now connected to MongoDB Atlas using Prisma. Enjoy the benefits of MongoDB's flexible and scalable database for your Next.js project!