Setting Up CockroachDB in Next.js Projects with Prisma ORM

Hey everyone, welcome to the Devmaesters website. In this article, I will guide you through the steps of setting up CockroachDB in Next.js projects using Prisma ORM.

Before we dive in, please make sure you've watched our previous videos on CockroachDB database setup and usage guide and have read our earlier article on How to create a free CockroachDB database on CockroachLabs  These resources will help you learn how to set up an account and create a free cluster containing a CockroachDB database on CockroachLabs.

Now, let's get started with the main part of this article. Integrating and using CockroachDB in Next.js projects is a straightforward process. By following the steps listed below, you'll be able to accomplish this quickly and successfully.

Step 1: Installing required packages

Before you can use CockroachDB in Nextjs projects, you need to download the following  packages to help you use the CockroachDB connection string (if you followed the previous videos or article, you should already have this saved somewhere).

• Prisma: Prisma is a server-side library that facilitates reading and writing data to the database in an intuitive, efficient, and safe way. For this tutorial, Prisma serves as the ORM tool for interacting with our CockroachDB. Install it by running the following command:

Using npm

npm install prisma --save-dev

Using yarn

yarn add prisma --save-dev

Using pnpm

pnpm install prisma --save-dev

 Next, prefix the Prisma command with the package runner you selected above:

• For npm: npx prisma
• For yarn: yarn prisma
• For pnpm:  pnp dlx prisma

What this means is that if you used yarn above then all the commands below should be yarn prisma <command>. I used npm for this tutorial so moving forward i'll be using npx.

Step 2: Bootstrap a fresh Prisma project.

Execute the following command to initialize a new Prisma project within the current directory:

npx prisma init

This command will create a new directory named "prisma," containing a "schema.prisma" file. Additionally, a ".env" file will be created in the root directory, containing the startup codes for database environment variables. Below are the contents of both files:

schema.prisma file

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

Within this file is where we're going to create  database models that will be migrated to cockroachdb. so for the purpose of this article copy the simple model shown below and paste it into your schema.prisma file

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider      = "prisma-client-js"
}



datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
 }

//copy this
model Users {
  address String  @id @unique
  paid    Boolean @default(false)
}

.env file

# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema

# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings

DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"

Step 3: Update the DATABASE_URL:

Replace the "DATABASE_URL" string in the ".env" file with the connection string of your CockroachDB database, as shown below:

# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema

# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings

DATABASE_URL= "postgresql://abubakar:RE2i4I4UFJydxqkSRS_JOw@black-cyclops-10105.8nj.cockroachlabs.cloud:26257/defaultdb?sslmode=verify-full"

Step 4: Change the Prisma Provider:

In the "schema.prisma" file, change the provider from "postgresql" to "cockroachdb," as shown below:

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "cockroachdb" //here
  url      = env("DATABASE_URL")
}

model Users {
  address String  @id @unique
  paid    Boolean @default(false)
}

Step 5: Migrate the Models:

Migrate the models to the CockroachDB database by executing the following command:

npx prisma migrate dev

Give your migration a name; you can use something simple like "initial." Ensure that each migration has a different name.

And that's it! Your Next.js project is now synchronized with your CockroachDB database. You can confirm this by running the following command to start Prisma Studio, a dashboard-like environment where you can see your models and model objects. If everything worked successfully, you should see the "Users" model in Prisma Studio.

Concluson

This article demonstrates how to connect your Next.js project with a CockroachDB database using Prisma ORM. Thank you for reading. Please follow me on all my social media handles to stay updated on new content. Feel free to leave a comment below if you encounter any issues with the project.