Tutorial CRUD Nextjs 16 Prisma Postgresql

Pendahuluan

Membangun aplikasi modern tidak lepas dari operasi CRUD (Create, Read, Update, Delete).

Pada tutorial ini kita akan belajar membuat sistem CRUD menggunakan Next.js 16, Prisma ORM, dan PostgreSQL.

Stack ini populer karena:

- Next.js → framework React modern untuk fullstack

- Prisma → ORM modern yang type-safe

- PostgreSQL → database relational yang stabil dan powerful

Di akhir tutorial ini kamu akan bisa membuat API CRUD sederhana yang siap digunakan untuk production.

1. Persiapan Project Next.js

npx create-next-app@latest nextjs-crud-prisma

cd nextjs-crud-prisma

npm install prisma @prisma/client

2. Inisialisasi Prisma

npx prisma init

3. Konfigurasi Database PostgreSQL (.env)

DATABASE_URL="postgresql://postgres:123456@localhost:5432/nextcrud"

4. Schema Prisma (prisma/schema.prisma)

model Post {

  id        Int      @id @default(autoincrement())

  title     String

  content   String?

  createdAt DateTime @default(now())

}

5. Migrasi Database

npx prisma migrate dev --name init

6. Setup Prisma Client (lib/prisma.ts)

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

export default prisma;

7. API Create Data

export async function POST(req: Request) {

  const body = await req.json();

  const post = await prisma.post.create({
    data: {
      title: body.title,
      content: body.content,
    },
  });

  return NextResponse.json(post);

}

8. API Read Data

export async function GET() {

  const posts = await prisma.post.findMany({

    orderBy: { createdAt: "desc" },

  });

  return NextResponse.json(posts);

}

9. API Update Data

export async function PUT(req: Request, { params }: any) {

  const body = await req.json();

  const post = await prisma.post.update({

    where: { id: Number(params.id) },

    data: {

      title: body.title,

      content: body.content,

    },

  });

  return NextResponse.json(post);

}

10. API Delete Data

export async function DELETE(req: Request, { params }: any) {

  await prisma.post.delete({

    where: { id: Number(params.id) },

  });

  return NextResponse.json({ message: "Post deleted" });

}

Kesimpulan

Dengan menggunakan Next.js 16, Prisma, dan PostgreSQL kita bisa membuat backend CRUD modern yang cepat dan type-safe.

Keuntungan stack ini:

- Query database lebih aman dengan Prisma

- Integrasi API langsung di Next.js

- Struktur project lebih rapi

- Mudah di-scale untuk aplikasi production