Apakah kalian juga menggunakan NextJS? Pernah ga coba membuat API dari framework terkenal ini? Kalo belum pernah saya akan sharing ke kalian bagaimana cara membuat API menggunakan NextJS ini sangat berguna agar aplikasi kita bisa saling terintergrasi dengan medium aplikasi lainnya seperti mobile frintend atau bahkan sesama backend
Apa Itu Restful API?
RESTful API adalah sebuah antar muka yang memungkinkan dua sistem komputer saling berkomunikasi menggunakan internet
Misalkan nih, kalian membuat sebuah aplikasi. Namun disisi lain kalian ingin membuat aplikasi lain dengan sistem, stack berbeda dengan aplikasi lainnya dan masih terhubung. Daripada capek capek bikin aplikasi baru dari 0 dan datanya juga kosong, kenapa tidak koneksikan aja data data yang ada di aplikasi lama ke aplikasi lainnya
Hal ini pernah saya alami sewaktu membuat panel admin. Setiap data yang saya inputkan, tidak hanya terbaca lewat aplikasi admin saya, namun juga terhadap aplikasi aplikasi mobile atau web lain yang sudah terhubung melalui API
Baca Juga: Cara Membuat REST API Hanya Dengan NodeJS. Tanpa Framework!
Nah sudah faham kan apa itu API? Kali ini kita akan mencoba membuatnya menggunakan NextJS, sebuah framework berbasis javascript yang sering digunakan untuk kebutuhan frontend namun ia juga kaya akan fitur untuk mendevelop API, meneria response dan mengirim request dengan mudah
Langkah Langkah
Buat project NextJS
Masukkan perintah berikut
npx create-next-app@latest nama-project --typescript
cd nama-project
npm run dev
Setelah membuat project, buat folder bernama api di dalam folder app, sehingga bisa menjadi seperti ini app/api
route ini akan memberikan url untuk berkomunikasi menggunakan API kita
Atur Environment
Buat file bernama .env*local lalu buka file .gitignore. Pastikan .env*local berada di dalamnya
Lalu tulis DATA_API_KEY=secret
Sebenarnya kalian bisa menggantikan kata secret menjadi kalimat atau kode kode yang lebih rumit lagi. Tapi karena ini hanya contoh jadi singkat saja ya
Buat Types
Buat file bernama types.d.ts
File ini akan menggambarkan bagaimana tipe data dari response kita sehingga bisa meminimalisir error
type Todo = {
userId: number;
id: number;
title: string;
isCompleted: boolean;
};
Disini lah kita akan mempelajari jenis jenis apa saja request itu.
Jenis Jenis Request
GET /api/todos Untuk menerima semua response
Buat file routes.ts, lalu tuliskan kode berikut di dalamnya
import { NextResponse } from "next/server";
const DATA_SOURCE_URL = "https://jsonplaceholder.typicode.com/todos";
export async function GET() {
const res = await fetch(DATA_SOURCE_URL);
const todos: Todo[] = await res.json();
return NextResponse.json(todos);
}
Sebenarnya kalian bisa mengambil data dari database langsung lalu menjadikannya sebagai response. Namun, karena ini hanya contoh, sementara kita akan mengambilr source datanya dari jsonplaceholder
Masukkan url berikut localhost:3000/todos/api di dalam browser kalian. Maka akan muncul data seperti ini
 | |
| localhost:3000/todos/api |
DELETE /api/todos Untuk menerima semua response
Tulis kode berikut di dalam app/api/route.ts
export async function DELETE(req: Request) {
const { id }: Partial<Todo> = await req.json();
if (!id) return NextResponse.json({ message: "Todo id required" });
await fetch(`${DATA_SOURCE_URL}/${id}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
"API-Key": API_KEY,
},
});
return NextResponse.json({ message: `Todo is ${id} is deleted` });
}
Jangan lupa juga masukkan juga key & value untuk API_KEY di dalam .env, masukkan kode berikut
API_KEY=secret
Untuk mencobanya buka aplikasi Postman atau API Tester lainnya.
Maka data berhasil dihapus dengan respons message seperti berikut
POST /api/todos Untuk mengirimkan request berisi body ke server
Prinsipnya sama dengan route untuk delete, namun kalian perlu menambahkan data di dalam body berupa userId dan title
export async function POST(req: Request) {
const { userId, title }: Partial<Todo> = await req.json();
if (!userId || !title)
return NextResponse.json({ message: "title or user is required" });
await fetch(`${DATA_SOURCE_URL}/${userId}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
"API-Key": API_KEY,
},
});
return NextResponse.json({ message: `Todo is ${title} is submitted` });
}
PUT /api/todos mengirimkan request untuk merubah data di server
Masukkan data apa saja yang ingin di rubah mulai dari userId, id, title, dan lain sebagainya di dalam body
export async function PUT(request: Request) {
const { userId, id, title, completed }: Todo = await request.json()
if (!userId || !id || !title || typeof (completed) !== 'boolean') return NextResponse.json({ "message": "Missing required data" })
const res = await fetch(`${DATA_SOURCE_URL}/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'API-Key': API_KEY
},
body: JSON.stringify({
userId, title, completed
})
})
const updatedTodo: Todo = await res.json()
return NextResponse.json(updatedTodo)
}
GET /api/todos/{userId} menerima response berdasarkan id yang dikirimkan lewat parameter
Kita juga bisa mengambil data berdasarkan id yang ada di dalam parameter. Caranya kalian buat folder baru bernama [id] di dalam folder api, lalu buat file route.ts
import { NextResponse } from "next/server";
const DATA_SOURCE_URL = "https://jsonplaceholder.typicode.com/todos";
export async function GET(request: Request) {
const id = request.url.slice(request.url.lastIndexOf("/") + 1);
const res = await fetch(`${DATA_SOURCE_URL}/${id}`);
const todo: Todo = await res.json();
if (!todo.id) return NextResponse.json({ message: "Todo not found" });
return NextResponse.json(todo);
}