Next.JS, Supabase, and Prisma are a pretty commonly recommended tech stack, using Next.JS as a Fullstack framework, Supabase as a database, and Prisma as an ORM (Object Relational Mapper) that translates the data from the Supabase into objects.
When I was trying to get them all working together it was surprisingly hard to find accurate integration steps. Most blog posts I could find were out of date, and even Google’s AI overview and Supabase’s documentation had outdated information. So here’s the steps I took to get everything working as of April, 2026.
1. Install your Next.JS app. Customize your settings as you see fit.
npm install prisma @prisma/client
2. Install Prisma in your project directory and then initialize Prisma.
npm install prisma @prisma/client
npx prisma init
3. Sign up for a Supabase account and create a new project if you haven’t already. Make sure you save your database password somewhere safe - you’ll need that later.
4. Find the Connections section in Supabase and select ORM connections and make sure Prisma is selected.
5. Copy the DATABASE_URL and DIRECT_URL into the .env file in your project folder, replacing [YOUR-PASSWORD] with your Supabase password.
6. Go to your prisma.config.ts file and change datasource from DATABASE_URL to DIRECT_URL. Note that this was a change in Prisma ORM v7. In older versions of Prisma you could add both your database and direct URLs.
7. Create your Prisma schema in the schema.prisma file.
8. Upload your schema to Supabase.
npx prisma migrate dev --name init
You should now see your tables updated in Supabase!
If you want to make any changes or updates to your Prisma schema run
npx prisma db push
9. Generate the client API
npx prisma generate
10. Once you’re ready to start sending or querying data through the API you’ll want to change your datasource back to “DATABASE_URL”
Now you should be all set to start interacting with your new database!
Top comments (0)