Module 6: Database Access

Setting up Prisma

npm install prisma --save-dev
npm install @prisma/client
npx prisma init

Define your schema in prisma/schema.prisma:

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

generator client {
  provider = "prisma-client-js"
}

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  published Boolean  @default(false)
}

Prisma Client Singleton

To prevent multiple instances of Prisma Client in development (due to hot reloading), use a singleton pattern.

// lib/prisma.js
import { PrismaClient } from '@prisma/client'

const prismaClientSingleton = () => {
  return new PrismaClient()
}

const globalForPrisma = globalThis

const prisma = globalForPrisma.prisma ?? prismaClientSingleton()

export default prisma

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

Fetching Data

Fetch data directly in Server Components. No useEffect needed.

// app/page.js
import prisma from '@/lib/prisma'

export default async function Home() {
  const posts = await prisma.post.findMany({
    where: { published: true },
    orderBy: { id: 'desc' }
  })

  return (
    

      {posts.map(post => (
        
{post.title}
      ))}
    
  )
}

Mutations

Combine Prisma with Server Actions to mutate data.

// app/actions.js
'use server'
import prisma from '@/lib/prisma'
import { revalidatePath } from 'next/cache'

export async function createPost(formData) {
  const title = formData.get('title')
  
  await prisma.post.create({
    data: { title }
  })
  
  revalidatePath('/')
}