Definitions:
NextJs: A React framework that can be used to create full-stack web applications.
Supabase: Supabase is an open-source backend-as-a-service (BaaS) platform. It is built on top of Postgres and supports the SQL language. We will use supabase to store our data. That is the database.
Prisma: Prisma is an open-source database toolkit and object-relational mapping (ORM) tool for building scalable, type-safe, and performant database queries. We will use it to read and write data to the database.

To successfully do this, we will need to follow the following steps:
1. Create a NextJs application.
2. Start a supabase project.
3. Download Prisma and connect the application and database.

The first step is to create a NextJs app with npx create-next-app. For our tutorial, I am calling the project "tutorial" and using TypeScript.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677868174724/0d51bf05-53df-4904-acdc-e46870e3d9c2.jpeg align="center")

Once the installation is done, we have to cd into the folder [cd tutorial] and run "npm run dev" and it should start the development server on https://localhost:3000

The second step is to create a supabase project. For that, we have to do the following steps:

1. Go to supabase.com

2. Click on Start Your Project and then sign in or signup if you don't have an account.

3. A dashboard will appear where you should have a button called "New Project", click on that button.

   ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677869678594/f471e4a9-f736-431e-94b7-02219f424c8c.jpeg align="center")

4. Provide a name for the project, and a password, and then click on "Create new project". In case you used the password generator, copy and paste the password somewhere safe since we will need to use it soon.

   ![Creating a new project named tutorial](https://cdn.hashnode.com/res/hashnode/image/upload/v1677869802991/369716c1-1986-4a19-8f38-ae5e5b4958d7.jpeg align="center")

5. We can also get the database URL now which we will use to connect our application with the help of Prisma. To get the URL we need to go to "Settings [It is on the left side bar] -->Database --> Scroll down to Connection Pooling --> Connection String. [Look at the image below if you have any questions]

   ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677871468706/81f56824-4e87-443e-93ff-4faaa9fcffd3.jpeg align="center")

To connect our NextJs application to supabase we will use Prisma. For that, we will follow the following steps:
1. In our terminal, we will start another instance, run "npm install prisma", and then execute "npx prisma init" to create a prisma project inside our NextJs application.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677870656057/a052625c-d9b7-4aae-b752-f9402fba34e8.jpeg align="center")

1. Once our project has been initialized inside our application, we will go to prisma --> schema.prisma

   ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677870928756/d7750037-b53c-47a3-9e75-1fd855fa2a76.jpeg align="center")

2. Now we need to go back to our supabase project site to get the DATABASE_URL.

3. Once we have the URL we need to go to the .env file and paste it there with our password.

   ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677871753314/dc8c8164-3b01-42ce-ad0b-171da71b27ec.jpeg align="center")

That's all there is to it; your supabase database is now linked to your NextJs application via Prisma.

I hope this article helped you.

Happy hacking!