cloudflare pages + Prisma

[drowsy igloo]

Hi I'm trying to build a Next.js Full stack application with Cloudflare pages
thus can you please share steps to configure the Prisma along with Postgres in cloudflare next on pages
I had referred this documentation https://www.prisma.io/docs/orm/prisma-client/deployment/edge/deploy-to-cloudflare but was unable to understand the exact steps to be taken
Thus please try to help me with this

[winter hedge]

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

[full robin]

Hi @drowsy igloo

1. The first thing you would need to do is to setup your Nextjs project and install Prisma

npm install prisma --save-dev
npx prisma init

2. You would then need to configure your Prisma schema with the driverAdapters preview feature.

generator client {
  provider        = "prisma-client-js"
  previewFeatures = ["driverAdapters"]
}

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

3. Install the required dependencies:

npm install @prisma/adapter-neon
npm install @neondatabase/serverless

4. Set up your database connection: Create a .dev.vars file in your project root and add your Postgres connection string:

DATABASE_URL="postgresql://username:password@your-postgres-host:5432/your-database"

5. Update your package.json to include a script for loading environment variables:

{
  "scripts": {
    "env": "dotenv -e .dev.vars"
  }
}

Note that you would need to install dotenv dependency.
6. Use Prisma Client in your Next.js API routes or server components:

import { PrismaClient } from '@prisma/client'
import { PrismaNeon } from '@prisma/adapter-neon'
import { Pool } from '@neondatabase/serverless'

export default async function handler(req, res) {
  const neon = new Pool({ connectionString: process.env.DATABASE_URL })
  const adapter = new PrismaNeon(neon)
  const prisma = new PrismaClient({ adapter })

  const users = await prisma.user.findMany()

  res.status(200).json(users)
}

7. For local development, you can use wrangler to run your Next.js app:

npx wrangler dev

8. To deploy, first set the DATABASE_URL as a secret in Cloudflare:

npx wrangler secret put DATABASE_URL

9. Deploy your Next.js app to Cloudflare Pages using their deployment process.

[drowsy igloo]

Thanks a ton for the help @full robin