Cara Membuat API Dengan NextJS 13 dan Typescript

 

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);
}