Selamat Tinggal, API Routes? Kekuatan Server Actions di Next.js

Cara Lama: Era API Routes

Selama bertahun-tahun, jika kita ingin formulir di frontend (React) berkomunikasi dengan backend, polanya selalu sama: buat event handler onSubmit, lakukan fetch ke sebuah API endpoint (misalnya, /api/contact), dan kelola state loading/error secara manual. Pola ini bekerja, tetapi memerlukan banyak kode *boilerplate*.

Perubahan Paradigma: Server Actions

Dengan Server Actions, Next.js membalikkan model ini. Daripada klien "memanggil" server, formulir di klien "memanggil" fungsi yang **berjalan langsung di server**. Ini terasa ajaib pada awalnya, tetapi di balik layar, Next.js secara otomatis membuat dan mengelola endpoint RPC (Remote Procedure Call) untuk kita.

Bagaimana Saya Menerapkannya di Portofolio Ini?

Di panel admin portofolio ini, seluruh operasi CRUD (Create, Read, Update, Delete) untuk proyek dan blog sepenuhnya ditenagai oleh Server Actions. Mari kita lihat contoh formulir kontak:

// File: components/form/ContactForm.tsx
import { sendMessage } from '@/lib/actions';

export default function ContactForm() {
  // ...
  return <form action={sendMessage}>...</form>
}

// File: lib/actions.ts
'use server';

export async function sendMessage(formData: FormData) {
  // Logika validasi dan pengiriman email berjalan di sini, di server.
  // Aman dari eksposur ke browser.
}

Keuntungannya Apa?

• Kode Lebih Sedikit: Tidak perlu lagi menulis fetch, useState untuk loading, atau useEffect. Kita bisa menggunakan hook useActionState dan useFormStatus.
• Keamanan: Kredensial database dan kunci API tidak pernah terekspos ke browser. Semua logika sensitif tetap di server.
• Progressive Enhancement: Formulir akan tetap berfungsi bahkan dengan JavaScript dinonaktifkan!

Kesimpulan

Apakah Server Actions akan menggantikan API routes sepenuhnya? Mungkin tidak. API routes masih sangat berguna untuk kasus penggunaan lain (seperti melayani data untuk aplikasi mobile). Tetapi untuk mutasi data berbasis formulir, Server Actions adalah masa depan pengembangan web dengan Next.js. Mereka lebih sederhana, lebih aman, dan memberikan pengalaman pengembang yang jauh lebih baik.