Membuat API di Next.js dengan App Router

Next.js adalah framework React yang sangat populer untuk pengembangan aplikasi web karena kemampuannya untuk membuat aplikasi yang cepat dan dioptimalkan untuk performa. Salah satu fitur unggulannya adalah kemudahan dalam membuat API yang dapat diintegrasikan langsung dalam proyek Next.js Anda. Artikel ini akan membahas cara membuat API di Next.js menggunakan App Router.

Langkah-langkah Membuat API di Next.js

1. Instalasi dan Persiapan Proyek

Pastikan Anda memiliki Next.js terinstal. Jika belum, Anda bisa menginstalnya dengan perintah berikut:

npx create-next-app@latest

Setelah instalasi selesai, masuk ke direktori proyek Anda:

cd nama-proyek-anda

2. Struktur Direktori API

Dengan menggunakan App Router, API dibuat di dalam direktori app di Next.js. Struktur dasarnya adalah sebagai berikut:

/app
  |-- /api
      |-- /hello
          |-- route.js

3. Membuat API Endpoint

Untuk membuat API endpoint, buat file route.js di dalam direktori app/api/hello seperti yang ditunjukkan di atas. Kemudian, tambahkan kode berikut ke dalam route.js:

export async function GET(request) {
  return new Response(JSON.stringify({ message: 'Hello, world!' }), {
    headers: { 'Content-Type': 'application/json' },
  });
}

Kode di atas mendefinisikan sebuah endpoint GET yang mengembalikan respon JSON dengan pesan "Hello, world!".

4. Menjalankan Server Next.js

Jalankan server pengembangan Next.js dengan perintah berikut:

npm run dev

Server akan berjalan di http://localhost:3000 secara default. Anda dapat mengakses API endpoint yang baru dibuat di http://localhost:3000/api/hello.

5. Pengujian API

Untuk menguji API, Anda bisa menggunakan browser atau alat seperti curl atau Postman. Misalnya, dengan menggunakan curl:

curl http://localhost:3000/api/hello

Anda akan mendapatkan respon seperti berikut:

{
  "message": "Hello, world!"
}

Penjelasan Tambahan

App Router: Merupakan fitur baru di Next.js yang menyederhanakan pembuatan dan pengelolaan routing di aplikasi Next.js.
Response Object: Digunakan untuk mengirim respon HTTP dari API. Anda dapat mengatur headers, status code, dan body dari respon.

Kesimpulan

Dengan mengikuti langkah-langkah di atas, Anda telah berhasil membuat API sederhana di Next.js menggunakan App Router. Next.js menyediakan cara yang sangat mudah dan terstruktur untuk membuat API yang dapat diintegrasikan langsung ke dalam aplikasi Anda, memungkinkan Anda untuk membangun aplikasi full-stack dengan cepat dan efisien.

Untuk informasi lebih lanjut, Anda dapat merujuk pada dokumentasi resmi Next.js.