Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar bagaimana cara melakukan proses insert data ke dalam database di Next.js menggunakan Prisma dan pada artikel kali ini kita akan belajar bagaimana cara menampilkan detail data berdasarkan ID.
Langkah 1 - Menampilkan Detail Data
Silahkan teman-teman buat folder baru dengan nama [id] di dalam folder src/app/api/posts dan di dalam folder [id] tersebut silahkan buat file baru dengan nama route.js, kemudian masukkan kode berikut ini di dalamnya.
src/app/api/posts/[id]/route.js
//import next request and response
import { NextResponse } from "next/server";
//import prisma client
import prisma from "../../../../../prisma/client";
export async function GET(request, { params }) {
//get params id
const id = parseInt(params.id);
//get detail post
const post = await prisma.post.findUnique({
where: {
id,
},
});
if (!post) {
//return response JSON
return NextResponse.json(
{
sucess: true,
message: "Detail Data Post Not Found!",
data: null,
},
{
status: 404,
}
);
}
//return response JSON
return NextResponse.json(
{
sucess: true,
message: "Detail Data Post",
data: post,
},
{
status: 200,
}
);
}
Dari penambahan kode di atas, pertama kita import NextResponse dari Next Server. Ini digunakan untuk mengelola response HTTP yang akan dikirimkan sebagai hasil dari permintaan HTTP ke pengguna.
//import next request and response
import { NextResponse } from "next/server";
Kemudian kita import Prisma Client.
//import prisma client
import prisma from "../../../../../prisma/client";
Setelah itu, kita buat function GET yang di dalamnya terdapat 2 parameter, yaitu request dan { params }. Parameter request digunakan untuk menerima data permintaan HTTP, sedangkan parameter { params } digunakan untuk mengakses parameter URL yang ada di browser.
export async function GET(request, { params }) {
//...
}
Di dalamnya kita membuat variable yang bernama id dan berisi ID parameter yang di dapatkan dari URL browser dan kita ubah tipe data-nya menjadi Integer.
const id = parseInt(params.id);
Setelah m,endapatkan data ID, maka langkah berikutnya adalah melakukan pencarian data ke dalam database berdasarkan ID tersebut dan disini kita akan menggunakan Prisma agar prosesnya lebih mudah dan cepat.
const post = await prisma.post.findUnique({
where: {
id,
},
});
Kemudian kita membuat sebuah kondisi untuk memastikan apakah data post ada atau tidak, jika tidak maka kita akan return ke dalam format JSON dengan pesan bahwa data tidak ditemukan.
return NextResponse.json(
{
success: true,
message: "Detail Data Post Not Found!",
data: null,
},
{
status: 404,
}
);
Tapoi jika data post ada, maka kita akan return ke dalam format JSON dengan detail data post yang didapatkan dari database.
return NextResponse.json(
{
success: true,
message: "Detail Data Post",
data: post, // <-- detail data post
},
{
status: 200,
}
);
Langkah 2 - Uji Coba Menampilkan Detail Post
Silahkan teman-teman buka aplikasi Postman, kemudian masukkan URL berikut ini : http://localhost:3000/api/posts/1 dan untuk method-nya silahkan pilih GET.
INFORMASI : contoh di atas, saya memberikan nilai parameter ID 1, karena data yang saya miliki di database memiliki ID tersebut.
Jika sudah, silahkan teman-teman klik Send dan jika berhasil maka akan menampilkan hasil seperti berikut ini.
{
"sucess": true,
"message": "Detail Data Post",
"data": {
"id": 1,
"title": "Belajar Rest API dengan Next.js & Prisma ORM",
"content": "Ini adalah isi dari kontent post",
"createdAt": "2023-12-11T06:51:34.978Z",
"updatedAt": "2023-12-11T06:51:34.978Z"
}
}
Kesimpulan
Sampai disini pembasan kita tentang bagaimana cara menampilkan detail data di Next.js menggunakan Prisma dalam format JSON atau Rest API.
Pada artikel selanjutnya kita akan belajar bagaimana cara melakukan proses update data ke dalam database di Next.js melalui Rest API dan Prisma.
Terima Kasih