API Cepat dan Mudah di Next.js dengan Route Handlers
Next.js bukan hanya digunakan untuk membangun frontend, tetapi juga dapat berfungsi sebagai backend melalui fitur bernama Route Handlers (sebelumnya dikenal sebagai API Routes). Fitur ini memungkinkan developer membuat endpoint API langsung di dalam proyek Next.js tanpa perlu menyiapkan backend terpisah.
Apa Itu Route Handlers?
Ketika Anda perlu menyediakan data, misalnya daftar "detailbuku" dari aplikasi Anda, Next.js memungkinkan Anda membuat endpoint API dengan sangat mudah. Anda cukup membuat file khusus di folder app/api/ dan Next.js secara otomatis akan menjadikan file tersebut sebagai endpoint API.
File app/api/books/route.js akan jadi API di /api/books
File app/api/books/[id]/route.js akan jadi API dinamis di /api/books/:id
Bagaimana Cara Kerjanya?
Di dalam file app/api/books/route.js, Anda cukup mengekspor fungsi dengan nama metode HTTP yang ingin Anda tangani misalnya GET untuk Mengambil atau membaca data dari server, POST untuk Mengirim atau menambahkan data baru ke server, PUT untuk Memperbarui seluruh data yang sudah ada di server, DELETE untuk Menghapus data dan lain lainl. Misal Anda punya data dummy items di data/index.js:
Kemudian buat API route di app/api/books/route.js
import { books } from "@/data";
export async function GET(request) {
return Response.json(books);
}Ketika Anda mengakses http://localhost:3000/api/books, fungsi GET di atas akan dijalankan dan mengembalikan daftar item dalam bentuk JSON.
Mengambil Parameter Dinamis ([id]):Jika Anda punya rute [id] seperti /api/books/1, id bisa diakses via params: app/api/books/[id]/route.js
import { books } from "@/data";
export async function GET(request, { params }) {
const { id } = params;
const book = books.find((b) => b.id === Number(id));
if (!book) {
return Response.json({ message: "Book not found" }, { status: 404 });
}
return Response.json(book);
}