Server Actions Next.js untuk Pemula: Panduan Lengkap (2026)

Server Actions adalah fungsi asinkron yang berjalan di server, ditandai directive "use server", dan bisa dipanggil langsung dari form atau event handler di komponen React tanpa membuat endpoint API terpisah. Next.js App Router menjadikannya cara default untuk menangani mutasi data (create, update, delete) sejak Next.js 14, dan sudah terintegrasi penuh dengan hook baru React 19 seperti useActionState.

Ringkasan cepat:

1. Server Actions dibuat dengan directive "use server", di dalam fungsi terpisah atau langsung di dalam file Server Component.
2. Dipanggil lewat atribut action pada elemen <form>, sehingga form tetap berfungsi progresif meski JavaScript belum termuat.
3. useActionState (React 19) menyatukan state hasil, status pending, dan argumen sebelumnya dalam satu hook untuk form yang butuh feedback UI.
4. Server Actions bukan pengganti total Route Handler API — endpoint publik untuk pihak ketiga tetap butuh route.ts.
5. Validasi dan otorisasi tetap wajib ditulis di dalam action itu sendiri, sama seperti endpoint API biasa.

Apa Itu Server Actions dan Bagaimana Cara Kerjanya?#

Server Actions adalah bentuk khusus dari React Server Functions: fungsi asinkron bertanda "use server" yang kodenya hanya pernah dieksekusi di server, tidak pernah dikirim ke bundle JavaScript client. Menurut dokumentasi resmi Next.js, Server Actions dipanggil lewat mekanisme action React seperti <form action>, <button formAction>, atau transisi client (startTransition) yang memicu event handler.

// app/actions.ts
"use server";
 
export async function createPost(formData: FormData) {
  const title = formData.get("title");
  // Validasi + tulis ke database di sini
}

Directive "use server" bisa ditulis di baris pertama file terpisah (semua fungsi di file itu otomatis jadi Server Action) atau langsung di awal badan fungsi async di dalam Server Component. Next.js membungkus pemanggilannya lewat POST request internal, tapi developer tidak perlu menulis endpoint itu sendiri.

Kenapa Bisa Dipanggil Langsung dari Form?#

Karena atribut action pada elemen <form> HTML native menerima fungsi di React 19, bukan cuma string URL. Saat form disubmit, React mengirim FormData ke Server Action yang direferensikan, dan browser tetap bisa submit form itu meski JavaScript belum selesai dimuat (progressive enhancement) — form akan melakukan navigasi standar sebagai fallback, baru diambil alih React setelah hydration selesai.

Progressive enhancement ini bukan sekadar detail teknis kecil. Riset Government Digital Service Inggris menemukan 1,1% pengguna (sekitar 1 dari 93 orang) tidak mendapatkan enhancement JavaScript sama sekali: 0,2% memakai browser yang memang menonaktifkan atau tidak mendukung JavaScript, dan 0,9% lagi punya JavaScript aktif tapi gagal termuat di sisi mereka karena pemblokiran korporat, error browser, atau koneksi tidak stabil. Form yang dibangun lewat atribut action Server Actions tetap berfungsi untuk kelompok ini karena submit-nya jatuh ke navigasi HTML standar, bukan bergantung pada JavaScript yang berhasil dieksekusi.

1.1% of people aren't getting JavaScript enhancements. This includes 0.2% of all people's browsers who have disabled, or don't support, JavaScript and 0.9% of all people's browsers have JavaScript enabled but don't receive it.

— Government Digital Service Inggris

Bagaimana Cara Memakai useActionState untuk Form dengan Status Pending?#

useActionState adalah hook React 19 yang dirancang khusus untuk menyambungkan UI form ke Server Action, menggantikan pola lama yang biasanya menggabungkan useState + useTransition secara manual untuk melacak status submit.

"use client";
 
import { useActionState } from "react";
import { createPost } from "./actions";
 
const initialState = { message: "" };
 
export function PostForm() {
  const [state, formAction, isPending] = useActionState(
    createPost,
    initialState
  );
 
  return (
    <form action={formAction}>
      <input name="title" required />
      <button type="submit" disabled={isPending}>
        {isPending ? "Menyimpan..." : "Simpan"}
      </button>
      {state.message && <p>{state.message}</p>}
    </form>
  );
}

Hook ini mengembalikan tiga nilai: state (hasil terakhir dari action, termasuk pesan error/sukses yang di-return manual dari dalam Server Action), formAction (fungsi yang dipasang ke atribut action form), dan isPending (status submit sedang berjalan atau tidak) — semuanya tersinkron otomatis tanpa state tambahan.

Kapan Server Actions Tidak Cocok Dipakai?#

Server Actions dirancang untuk mutasi data internal aplikasi sendiri, bukan pengganti universal untuk Route Handler API. Situasi yang tetap butuh app/api/.../route.ts biasa: endpoint yang diakses langsung oleh sistem pihak ketiga (webhook payment gateway, integrasi eksternal), respons non-HTML seperti file atau JSON publik yang perlu dikonsumsi di luar aplikasi Next.js itu sendiri, atau ketika dibutuhkan kontrol penuh atas method HTTP dan header response.

Dasar arsitektur App Router yang mendukung kedua pola ini dibahas lebih lengkap di App Router vs Pages Router: kapan pakai yang mana.

Ringkasan#

• Server Actions adalah fungsi "use server" yang berjalan sepenuhnya di server dan dipanggil langsung dari form atau event handler, tanpa endpoint API terpisah.
• useActionState (React 19) menyatukan state hasil, status pending, dan argumen sebelumnya dalam satu hook yang otomatis terhubung ke atribut action form.
• Server Actions bukan pengganti total Route Handler API — endpoint untuk pihak ketiga atau respons non-HTML tetap butuh route.ts biasa.
• Validasi dan otorisasi wajib ditulis di dalam action itu sendiri karena Server Action tetap bisa dipanggil dari mana saja selama endpoint-nya diketahui.
• Server Actions mengoptimasi sisi mutasi data; untuk sisi render, App Router punya pendekatan komplementer lewat React Compiler yang menambahkan memoization otomatis tanpa useMemo/useCallback manual.
• Setelah mutasi di dalam Server Action selesai, cache Next.js perlu disegarkan secara eksplisit — lihat perbandingan revalidatePath vs revalidateTag: Kapan Pakai? untuk memilih fungsi yang tepat.
• Contoh penerapan konkret pola-pola di atas (validasi ulang di server, honeypot anti-spam, pengiriman email) ada di panduan form kontak Next.js dengan Server Actions.
• Semua contoh kode Server Action di atas ditulis TypeScript, bukan kebetulan — lihat kenapa TypeScript jadi standar developer 2026 untuk data survei di balik adopsinya.
• Butuh bantuan implementasi Next.js App Router seperti ini di proyek sendiri? Lihat layanan web development yang ditawarkan.