Next.js Route API vs Server Actions: Mana yang Harus Dipakai dan Kenapa?

• Apa itu Route API?
  • Contoh kode Route API (sederhana).
  • Kapan Sebaiknya Menggunakan Route API?
• Apa itu Server Actions?
  • Contoh kode Server Actions (sederhana)
  • Kapan Sebaiknya Menggunakan Server Actions?
• Ringkasan Pilihan (biar nggak mikir lama)
• Kesimpulan

Halo teman-teman semuanya, di Next.js (terutama saat pakai App Router), ada dua cara populer untuk menjalankan logic di server: Route API (file route.ts di /app/api/...) dan Server Actions. Keduanya sama-sama berjalan di sisi server, tapi "fungsi utamanya" beda.

Apa itu Route API?

Route API (Route Handler) adalah cara bikin endpoint API di dalam project Next.js. Jadi kita bisa punya URL seperti /api/users untuk menerima GET/POST/PUT/DELETE dan mengembalikan JSON. Kelebihannya, kita punya kontrak API yang jelas (request/response), bisa dipanggil dari mana saja (web lain, mobile, integrasi).

• Contoh kode Route API (sederhana).

  Misal kita bikin endpoint untuk membuat user:

  import { NextResponse } from "next/server";
  
  export async function POST(request: Request) {
    const body = await request.json();
    const { name, email } = body;
  
    if (!name || !email) {
      return NextResponse.json(
        { message: "Nama dan email wajib diisi" },
        { status: 400 }
      );
    }
  
    // contoh: simpan ke database
    await prisma.user.create({ data: { name, email } });
  
    return NextResponse.json(
      { message: "User berhasil dibuat" },
      { status: 201 }
    );
  }
  

  Lalu dipanggil dari mana pun (termasuk client component):

  await fetch("/api/users", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "Ahmad", email: "ahmad@mail.com" }),
  });
  

• Kapan Sebaiknya Menggunakan Route API?

  Route API paling tepat digunakan ketika kita memang membutuhkan endpoint yang berdiri sendiri dan tidak hanya dipakai oleh halaman Next.js kita.

  Misalnya, saat aplikasi kita harus melayani request dari aplikasi lain seperti Android atau iOS, frontend terpisah, atau ketika kita perlu menyediakan endpoint untuk integrasi pihak ketiga seperti webhook payment dan callback dari layanan eksternal.

Apa itu Server Actions?

Server Actions adalah cara menjalankan function di server yang dipanggil langsung dari form/action React, jadi logic-nya bisa "nempel" dekat komponen. Ini bikin flow form jadi ringkas karena kita tidak harus bikin endpoint API hanya untuk submit form internal.

• Contoh kode Server Actions (sederhana)

  Misal kita buat form update profile yang setelah sukses melakukan redirect.

  "use server";
  
  import { redirect } from "next/navigation";
  
  export async function updateProfileAction(formData: FormData) {
    const name = String(formData.get("name") || "");
    const email = String(formData.get("email") || "");
  
    if (!name || !email) {
      return { error: "Nama dan email wajib diisi" };
    }
  
    // contoh: simpan ke database
    // await prisma.user.update({ where: { id }, data: { name, email } });
  
    redirect("/dashboard");
  }
  

  Dipakai di halaman component:

  import { updateProfileAction } from "@/app/actions/update-profile";
  
  export default function ProfilePage() {
    return (
      <form action={updateProfileAction} className="space-y-3">
        <input name="name" placeholder="Nama" className="border p-2 w-full" />
        <input name="email" placeholder="Email" className="border p-2 w-full" />
  
        <button className="bg-blue-600 text-white px-4 py-2 rounded">
          Simpan
        </button>
      </form>
    );
  }
  

• Kapan Sebaiknya Menggunakan Server Actions?

  Server Actions paling tepat digunakan ketika fitur yang kita bangun bersifat murni internal dan hanya digunakan oleh halaman Next.js itu sendiri, seperti dashboard atau halaman admin.

  Biasanya alurnya sederhana dan jelas, dimulai dari user melakukan submit form, lalu data divalidasi di server, disimpan ke database, dan hasilnya langsung dikembalikan ke UI dalam bentuk pesan error atau redirect ke halaman lain.

Ringkasan Pilihan (biar nggak mikir lama)

• Kalau kita butuh endpoint yang bisa dipanggil dari luar (mobile, webhook, integrasi), pakai Route API.
• Kalau kita butuh aksi yang dekat dengan UI (form/button di Next.js kita sendiri), pakai Server Actions.

Kesimpulan

Route API itu cocok untuk membangun endpoint yang “resmi” dan bisa diakses dari banyak klien, sedangkan Server Actions cocok untuk logic internal yang menempel ke komponen dan membuat flow form jadi jauh lebih ringkas. Dua-duanya bukan saingan, tapi alat yang tepat untuk konteks yang berbeda.

Terima Kasih