Introduction
With the help of supabase and prisma it’s easier than ever before to host and manage my data in a database. In this article I will connect my Next.js project with a database.
Supabase
What is supabase?
Supabase is a open source backend platform that helps to store data secure and easy in a hosted postgres database. It offers tools for authentication, storage or real-time APIs, which allows me to build secure applications.
Create a new supabase project
First I need to login to supabase - thankfully it allows me to connect via my GitHub account which makes the login process extremely fast and convenient.
Then I need to create my own organization and once thats done, I can click on the Button + New Project. All I need to now is to fill out the necessarily information while I should pay attention to this pitfalls:
- The password should not contain special characters → Hint
- I should choose the location closest to my users, to increase the speed
Connect supabase with Next.js
In order to connect my supabase project with Next.js, I need to first open my supabase project and press the 🔌 Connect button. Then click on the register card ORMs and copy the .env.local into the .env file in Next.js.
.env // on root levelAfterwards I need to replace the [YOUR-PASSWORD] with my password.
Connect with Vercel
If the project is deployed on vercel, I do need to add these environment variables on their website to.
Vercel > Project settings > Environment variablesWhen copying and pasting, I can select the whole line of the variable and paste it into the Key input field, vercel will split the variable for me.
See Tables and Objects
Whenever I wanna see all object in my supabase database, I can do so when navigation on subabase to:
Organization/ProjectName/Databse/TablesPrisma
What is prisma?
Prisma is an ORM (Object-Relational Mapping) that allows me to query the database without having to write SQL-queries. It helps me to reduce the type duplications, since I can use my prisma table directly as a typescript type.
Setup prisma
Since prisma themself already document the setup process perfectly, I allow myself to just link the source here. All that has to be done for successfully setup prisma, is documented in 2.1. Install dependencies.
I also add a new script to package.json since this will be helpful later in the production.
"scripts": {
// ...
"postinstall": "prisma generate"
},When succsessfully installed, prisma should have created two new files:
prisma/schema.prisma
prisma.config.ts⚠️ Important: Since I decided to use the src folder, I need to make sure the prisma.schema generates the content within the /src/app folder and not only in the /app folder. Otherwise my application will break because app folder will be ignored.
// schema.prisma
generator client {
output = "../src/app/generated/prisma"
}
Connect prisma with supabase
In order to connect prisma with supabase, I need to change the DATABASE_URL to DIRECT_URL within the prisma.config.ts file
datasource: {
// url: process.env["DATABASE_URL"], // Default value
url: process.env["DIRECT_URL"], // Change to
},Prisma Client
The prisma client enables my application to talk to the database while checking the types. It’s necessarily for creating queries.
Prisma once again documented this process pretty well. But since I used a different folder structure (src), I will paste the commands that work for me, below.
Instead of the command of the doc, I should go with this one:
mkdir -p src/lib && touch src/lib/prisma.tsAnd also within the prisma.ts file, I need to change the import path:
import { PrismaClient } from "../generated/prisma/client";Else I can just copy and paste the code from the documentation:
Conclusion
Prisma and supabase enable me to easily integrate a database into my software without having to be an api engineer. It’s super fast and convenient and I love the easy setup process and the great documentations.