Next.js kini memungkinkan pengembang untuk memanggil fungsi khusus server langsung dari sebuah komponen, menghilangkan kebutuhan untuk membuat rute API terpisah untuk tugas sehari-hari seperti pengiriman formulir. Dengan menggunakan fitur Server Actions yang baru, satu formulir HTML dapat memicu kode backend tanpa panggilan fetch perantara, mengurangi boilerplate dan memperketat kontrak front-end/back-end.

Mengapa cara lama terasa berat

Dalam aplikasi React atau Next.js pada umumnya, formulir sederhana "buat proyek" memicu serangkaian langkah: file rute API, permintaan fetch dari browser, penanganan status loading dan error, header CORS, dan akhirnya pembaruan sisi klien untuk mencerminkan data baru. Setiap langkah menambah file, baris kode, dan titik kegagalan. Tim menghabiskan waktu untuk menghubungkan bagian-bagian ini meskipun satu-satunya tujuan hanyalah menulis catatan ke database.

Server Actions menutup celah tersebut

Server Actions adalah fungsi asinkron yang dijamin hanya berjalan di server. Menambahkan direktif "use server" di bagian atas file memberi tahu kompiler untuk menjaga kode tetap di luar bundle browser, sehingga dapat mengakses database, rahasia (secrets), atau sumber daya khusus server lainnya dengan aman. Karena fungsi tersebut berada di server, komponen dapat memanggilnya secara langsung melalui atribut action pada elemen <form> asli.

Mendefinisikan sebuah action

export async function createProject(formData: FormData) {
  const title = formData.get('title') as string;

  if (!title) throw new Error('Title is required');

  await db.project.create({
    data: { title }
  });

  revalidatePath('/dashboard');
}

Fungsi tersebut menerima objek FormData, memvalidasi payload, menulis ke database, lalu meminta Next.js untuk menyegarkan halaman /dashboard sehingga UI menampilkan proyek baru tanpa pemuatan ulang (reload) penuh.

Menghubungkannya di UI

export default function NewProjectForm() {
  return (
    <form action={createProject}>
      <input type="text" name="title" required />
      <SubmitButton />
    </form>
  );
}

Saat pengguna mengklik tombol submit, browser mengirimkan data formulir ke fungsi createProject di sisi server. Karena ini menggunakan perilaku formulir HTML standar, pengiriman tetap berfungsi meskipun JavaScript belum dimuat, sehingga meningkatkan persepsi performa pada koneksi yang lambat.

Keuntungan bagi tim

  • Lebih sedikit file – Tidak perlu file pages/api atau app/api terpisah untuk setiap endpoint.
  • Sedikit koneksi manual – Tidak ada panggilan fetch manual, tidak ada penanganan CORS eksplisit.
  • Keamanan tipe bawaan – Tanda tangan fungsi (function signature) dibagikan antara server dan klien, sehingga TypeScript dapat mendeteksi ketidakcocokan lebih awal.
  • Keunggulan performa – Permintaan langsung menuju ke fungsi server, melewati lompatan jaringan tambahan yang akan muncul jika menggunakan fetch di sisi klien.

Batasan dan peringatan

Server Actions masih merupakan fitur awal. Mereka hanya bisa berupa fungsi async yang ditandai dengan "use server", dan tidak dapat mengembalikan objek JavaScript sembarangan ke klien; mereka harus diakhiri dengan redirect, revalidasi, atau respons biasa. Proses debugging mungkin terasa berbeda karena call stack melompat dari browser ke runtime server, yang mungkin mengejutkan pengembang yang terbiasa dengan log rute API klasik. Selain itu, alur kerja kompleks yang melibatkan banyak microservices atau membutuhkan kode status HTTP yang mendetail mungkin masih memerlukan endpoint API tradisional.

Apa yang perlu diperhatikan

Next.js kemungkinan akan memperluas API Server Actions dalam rilis mendatang, menambahkan dukungan untuk lebih banyak tipe respons dan integrasi tooling yang lebih baik. Pengguna awal (early adopters) harus memantau changelog framework dan umpan balik komunitas untuk mengukur stabilitas sebelum memindahkan fitur-fitur kritis ke jalur ini. Memantau ukuran bundle dan metrik server-rendering juga dapat mengungkapkan apakah pengurangan kode klien menghasilkan keuntungan latensi yang terukur untuk pola trafik spesifik Anda.

Kesimpulan

Dengan memungkinkan komponen memanggil fungsi khusus server secara langsung, Next.js Server Actions menghilangkan perantara yang selama ini memenuhi proyek React. Hasilnya adalah kode yang lebih bersih, perjalanan data (round-trips) yang lebih cepat, dan pengalaman pengembang yang lebih lancar—asalkan batasan fitur saat ini selaras dengan kebutuhan proyek.