Next.js Lesson 11: Database with Prisma
Prisma is the modern ORM for TypeScript — type-safe database queries with an auto-generated client. Works perfectly with Next.js.
npm install prisma @prisma/client
npx prisma init
# Sets up prisma/schema.prisma and .env with DATABASE_URL
Schema
// prisma/schema.prisma
datasource db {
provider = "sqlite" // or "postgresql", "mysql"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
posts Post[]
createdAt DateTime @default(now())
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
author User @relation(fields: [authorId], references: [id])
authorId Int
}
Using Prisma
// lib/db.ts
import { PrismaClient } from "@prisma/client";
const db = new PrismaClient();
export default db;
// In Server Components / API routes:
const users = await db.user.findMany({ include: { posts: true } });
const post = await db.post.create({ data: { title, content, authorId } });
const updated = await db.post.update({ where: { id }, data: { published: true } });
await db.user.delete({ where: { id } });
Migrations
# Create and apply migration
npx prisma migrate dev --name init
# Generate client after schema changes
npx prisma generate
# View data in browser
npx prisma studio # opens at localhost:5555
🏋️ Practice Task
Build a Next.js blog with Prisma. Schema: Post (id, title, content, published, createdAt). API routes: GET /api/posts (all published), POST /api/posts (create). Page: /blog (list posts from DB), /blog/[id] (single post). Use SQLite for simplicity.
💡 Hint: DATABASE_URL=”file:./dev.db” in .env. Run: npx prisma migrate dev –name init