Kirim JSON dari Server dengan Cara Membuat Route Handler App Router Next Js

Ditulis oleh Next.js

Buat file bernama route.ts di dalam folder app/api/, lalu ekspor fungsi bernama GET atau POST yang me-return NextResponse.json(). Kesalahan yang paling sering terjadi bukan di kodenya, melainkan nama file salah atau handler lupa me-return Response sehingga Next.js melempar error dan endpoint tidak dikenali.

File route.ts dan Method GET POST yang Didukung

Route Handler hidup di App Router sebagai endpoint HTTP biasa. Path URL mengikuti struktur folder, misalnya app/api/produk/route.ts menjadi /api/produk.

Ekspor nama fungsi sama dengan HTTP method yang ingin dilayani:

  • GET untuk mengambil data dan POST untuk membuat data.
  • PUT dan PATCH untuk mengganti atau memperbarui sebagian data.
  • DELETE untuk menghapus data berdasarkan ID atau parameter.
  • Semua handler berjalan di server dan bisa memakai NextResponse.json() untuk mengirim JSON beserta status code.

Bedanya, Server Action dipanggil langsung dari form atau komponen lewat fungsi, Middleware berjalan sebelum request mencapai route untuk redirect atau cek auth, sedangkan Route Handler merespons request HTTP seperti API konvensional.

Langkah Membuat Route Handler Sampai Bisa Diakses

  1. Buat folder dan file, contoh app/api/halo/route.ts.
  2. Tulis handler GET minimal:
import { NextResponse } from "next/server";
export async function GET() {
  return NextResponse.json({ pesan: "halo dari server" });
}

3. Tambah POST dan validasi body di server sebelum memproses data:

export async function POST(request: Request) {
  const body = await request.json();
  if (!body.nama) {
    return NextResponse.json({ error: "nama wajib diisi" }, { status: 400 });
  }
  return NextResponse.json({ ok: true }, { status: 201 });
}

4. Tes /api/halo lewat browser untuk GET, lalu pakai curl atau Postman untuk POST dan pastikan status code sudah benar.

  • Nama file harus persis route.ts, bukan routes.ts atau Route.ts.
  • Setiap handler wajib me-return Response atau NextResponse.
  • Jangan membaca request.json() dua kali karena stream body hanya bisa dibaca sekali.

BACA JUGA:

Contoh Dynamic Route, Request JSON, dan Status Code

Untuk ID dinamis, buat app/api/produk/[id]/route.ts dan baca params. Untuk filter, baca query lewat new URL(request.url).searchParams.

Method Fungsi Status yang Tepat
GET Ambil list atau detail 200, 404 bila tidak ada
POST Buat data baru 201, 400 bila invalid
DELETE Hapus data 200, 404 bila hilang 
import { NextResponse } from "next/server";
export async function GET(
  request: Request,
  { params }: { params: { id: string } }
) {
  if (!params.id) {
    return NextResponse.json({ error: "id tidak valid" }, { status: 400 });
  }
  return NextResponse.json({ id: params.id });
}

FAQ

Di mana file Route Handler harus disimpan?

Simpan sebagai route.ts di dalam folder app/api/ atau subfoldernya sesuai URL yang diinginkan.

Apakah Route Handler bisa membaca form dan upload?

Bisa, baca form dengan await request.formData() lalu periksa ukuran, tipe file, dan otorisasi pengguna.

Kapan memakai Route Handler bukan Server Action?

Pakai Route Handler untuk webhook, API eksternal, atau respons non-HTML, pakai Server Action untuk mutasi data langsung dari form React.

Artikel Terkait