P
Prisma•5w ago
Md.Sadiq

cloudflare pages + Prisma

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
Deploy to Cloudflare Workers & Pages | Prisma Documentation
Learn the things you need to know in order to deploy an app that uses Prisma Client for talking to a database to a Cloudflare Worker or to Cloudflare Pages.
2 Replies
RaphaelEtim
RaphaelEtim•5w ago
Hi @Md.Sadiq 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
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")
}
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
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"
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"
  }
}
{
  "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)
}
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
npx wrangler dev
8. To deploy, first set the DATABASE_URL as a secret in Cloudflare: 
npx wrangler secret put DATABASE_URL
npx wrangler secret put DATABASE_URL
9. Deploy your Next.js app to Cloudflare Pages using their deployment process.
Md.Sadiq
Md.SadiqOP•5w ago
Thanks a ton for the help @RaphaelEtim

Did you find this page helpful?