Using Prisma, MongoDB, and Next.js

In this guide, we will explore how to use Prisma, MongoDB, and Next.js together to build a modern web application. Prisma is an open-source database toolkit that provides an ORM (Object-Relational Mapping) and query builder, making it easier to work with databases. MongoDB is a NoSQL document database that offers flexibility and scalability. Next.js is a popular React framework for building server-side rendered and statically generated applications.

Prerequisites

Before getting started, ensure that you have the following installed:

Node.js and npm (Node Package Manager) MongoDB installed and running Basic knowledge of JavaScript, React, and Next.js

Step 1: Setting up a Next.js project

Create a new directory for your project:

mkdir my-prisma-project
cd my-prisma-project
Initialize a new Next.js project:

npx create-next-app .
Start the Next.js development server:

npm run dev

Step 2: Installing and configuring Prisma

Install Prisma CLI globally:

npm install -g prisma

Initialize Prisma within your project directory:

npx prisma init

Configure your database connection in the .env file generated by Prisma. Replace the placeholders with your MongoDB connection string:

DATABASE_URL="mongodb://<username>:<password>@<host>:<port>/<database>"

Step 3: Defining your data model

Create a new file prisma/schema.prisma and define your data model using Prisma's schema language. For example, let's create a User model with id, name, and email fields:

model User {
  id    Int    @id @default(autoincrement())
  name  String
  email String @unique
}

Apply the schema to your database by running the following command:

npx prisma db push

Step 4: Generating Prisma Client

Generate Prisma Client by running the following command:

npx prisma generate

This will create a @prisma/client package in the node_modules directory.

Import and use Prisma Client in your Next.js application. For example, create a file pages/index.js:

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

export async function getServerSideProps() {
  const prisma = new PrismaClient();
  const users = await prisma.user.findMany();

  return {
    props: { users },
  };
}

export default function Home({ users }) {
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

This example fetches the list of users from the database using Prisma Client and displays them on the homepage.

Restart the Next.js development server if it's already running to reflect the changes.

Step 5: Performing CRUD operations with Prisma

You can now use Prisma to perform CRUD operations (Create, Read, Update, Delete) on your MongoDB database.

To create a new user, add the following code to your Next.js page component:

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

// ...

export default function Home({ users }) {
  // ...

  const createUser = async () => {
    const prisma = new PrismaClient();
    await prisma.user.create({
      data: {
        name: "John Doe",
        email: "john@example.com",
      },
    });
  };

  return (
    <div>
      {/* ... */}
      <button onClick={createUser}>Create User</button>
    </div>
  );
}

This will create a new user in the database when the "Create User" button is clicked.

To update or delete a user, you can use similar code by calling the appropriate methods provided by Prisma Client.

That's it! You have successfully set up and used Prisma, MongoDB, and Next.js together to build a web application. This guide covers the basics, and you can explore the Prisma documentation for more advanced features and usage patterns. Happy coding!