Belajar Next.js App Router #11: Server Actions

• Apa Itu Server Actions?
• Cara Membuat Server Actions
• Contoh Server Action Sederhana
• Menggunakan Server Actions di Form
• Keunggulan Server Actions
• Server Actions dan Validasi
• Kapan Menggunakan Server Actions?
• Kesimpulan

Halo teman-teman semuanya. Pada artikel sebelumnya, kita telah mempelajari Route Handlers (API) sebagai cara membangun endpoint di Next.js App Router. Pada artikel ini, kita akan membahas fitur yang sangat penting dan modern di Next.js, yaitu Server Actions.

Server Actions memungkinkan kita menjalankan logic server langsung dari komponen tanpa harus membuat API endpoint secara terpisah. Pendekatan ini membuat alur kode lebih ringkas, mudah dibaca, dan sangat cocok untuk kebutuhan seperti submit form, validasi, serta proses simpan data.

Apa Itu Server Actions?

Server Actions adalah fungsi JavaScript atau TypeScript yang dijalankan di server, tetapi dapat dipanggil langsung dari komponen React. Dengan Server Actions, kita tidak perlu lagi membuat API route hanya untuk memproses form atau aksi sederhana.

Fitur ini sangat terintegrasi dengan App Router dan bekerja secara natural dengan Server Component.

Cara Membuat Server Actions

Server Actions ditandai dengan directive:

'use server'

Directive ini menandakan bahwa fungsi tersebut akan dijalankan di server. Sebagai contoh, kita akan membuat Server Action sederhana untuk menangani submit form.

Contoh Server Action Sederhana

Silahkan teman-teman buat file action, misalnya:

app/actions/create-post.ts

Isi file tersebut dengan kode berikut:

'use server'

export async function createPost(formData: FormData) {

    // get form data
    const title = formData.get('title')

    // log form data
    console.log('Judul:', title)
}

Fungsi createPost ini akan dijalankan di server setiap kali form disubmit.

Menggunakan Server Actions di Form

Sekarang kita akan menggunakan Server Action tersebut pada sebuah form.

Silahkan teman-teman buat file berikut:

app/posts/create/page.tsx

Kemudian isi dengan kode berikut:

import { createPost } from '@/app/actions/create-post'

export default function PostsPage() {
    return (
        <div className="min-h-screen flex items-center justify-center p-4">
            <div className="max-w-md w-full">
                {/* Header */}
                <div className="text-center mb-8">
                    <h1 className="text-2xl font-bold mb-2">
                        Buat Post Baru
                    </h1>
                    <p>
                        Isi form di bawah untuk membuat postingan baru
                    </p>
                </div>

                {/* Form */}
                <form 
                    action={createPost}
                    className="bg-gray-700 rounded-lg shadow-md p-6 space-y-6"
                >
                    {/* Input Field */}
                    <div>
                        <label 
                            htmlFor="title" 
                            className="block text-sm font-medium mb-2"
                        >
                            Judul Post
                        </label>
                        <input 
                            type="text" 
                            id="title"
                            name="title" 
                            placeholder="Masukkan judul post..."
                            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"
                            required
                        />
                    </div>

                    {/* Submit Button */}
                    <button 
                        type="submit"
                        className="w-full bg-blue-600 text-white py-3 px-4 rounded-lg font-medium hover:bg-blue-700 transition-colors focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                    >
                        Simpan Post
                    </button>

                    {/* Additional Info */}
                    <p className="text-xs text-center pt-4 border-t border-gray-200">
                        Data akan disimpan melalui server action
                    </p>
                </form>
            </div>
        </div>
    )
}

Ketika form disubmit, Next.js akan secara otomatis memanggil Server Action createPost di server tanpa perlu fetch atau API endpoint.

Sekarang silahkan buka http://localhost:3000/posts/create. Maka akan tampil halaman seperti berikut ini.

Silahkan teman-teman masukkan judul post dan klik button Simpan Post. Dan lihat pada log terminal, maka akan menampilkan hasil seperti berikut ini.

Keunggulan Server Actions

Dengan Server Actions, alur submit form menjadi jauh lebih sederhana. Kita tidak perlu lagi menulis kode fetch, tidak perlu membuat API route, dan tidak perlu memikirkan parsing request secara manual.

Selain itu, karena logic dijalankan di server, data sensitif seperti token atau credential tetap aman dan tidak dikirim ke browser.

Server Actions dan Validasi

Server Actions sangat cocok dikombinasikan dengan validasi data. Validasi dapat dilakukan langsung di dalam Server Action sebelum data disimpan ke database.

Kapan Menggunakan Server Actions?

Server Actions sangat ideal digunakan untuk fitur yang bersifat internal, seperti dashboard admin, form CRUD, atau proses yang hanya digunakan oleh aplikasi itu sendiri. Untuk kebutuhan API publik atau integrasi dengan aplikasi lain, Route Handlers tetap menjadi pilihan yang lebih tepat.

Kesimpulan

Pada artikel ini, kita telah mempelajari konsep Server Actions pada Next.js App Router, mulai dari pengertian, cara membuat Server Action, hingga penggunaannya pada form. Dengan Server Actions, kita dapat membangun alur aplikasi yang lebih sederhana, aman, dan modern tanpa harus bergantung pada API tambahan.

Dengan memahami Server Actions, kita telah menyelesaikan salah satu bagian terpenting dari App Router dan siap membangun aplikasi Next.js yang lebih efisien dan terstruktur.

Terima Kasih