Eksplorasi Server Actions Untuk Mutasi Data Tanpa API Layer Di Next.Js App Router — Part 11

Membangun aplikasi web di era modern memerlukan pondasi yang kokoh. Framework modern memberikan fleksibilitas luar biasa bagi developer untuk menghadirkan fitur kompleks secara cepat tanpa mengabaikan aspek keamanan dan keandalan sistem.

Tahapan Implementasi & Walkthrough Kode

Berikut adalah langkah demi langkah teknis yang dapat Anda ikuti langsung pada codebase Anda:

Tahap 1: Penulisan Kode & Konfigurasi

'use server'

Tahap 2: Penulisan Kode & Konfigurasi

app/actions/create-post.ts

Tahap 3: Penulisan Kode & Konfigurasi

'use server'

export async function createPost(formData: FormData) {

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

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

Tahap 4: Penulisan Kode & Konfigurasi

app/posts/create/page.tsx

Tahap 5: Penulisan Kode & Konfigurasi

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>
    )
}

Kesimpulan

Dengan mengikuti langkah-langkah terstruktur di atas, implementasi modul Anda akan jauh lebih rapi, aman dari bug umum, serta siap diskalakan ke lingkungan produksi.

Nantikan artikel tutorial praktis lainnya seputar fullstack development, microservices, dan otomasi AI di Blog Engineering SiHubung. Selamat mencoba!