Form Handling di Next.js

Form Handling di Next.js 2026 – Pendekatan yang Saya Pakai

Halo teman-teman,

Form masih jadi salah satu bagian yang paling sering bikin kode berantakan kalau tidak ditangani dengan baik. Setelah coba berbagai cara, ini stack dan pendekatan yang paling sering saya pakai sekarang.

1. Stack Utama Saya

• React Hook Form → performant & fleksibel
• Zod → schema validation + type inference
• Server Actions → submit langsung ke server
• shadcn/ui → komponen form yang rapi

2. Pattern yang Saya Pakai

Copycopy code to clipboard
"use client";

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { createUser } from "./actions";

const schema = z.object({
  name: z.string().min(2),
  email: z.string().email(),
});

type FormData = z.infer<typeof schema>;

export function CreateUserForm() {
  const form = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  const onSubmit = async (data: FormData) => {
    const result = await createUser(data);
    if (result?.error) {
      // handle error
    }
  };

  return <form onSubmit={form.handleSubmit(onSubmit)}>{/* fields */}</form>;
}

3. Server Action yang Clean

Copycopy code to clipboard
"use server";

import { z } from "zod";

const schema = z.object({
  name: z.string().min(2),
  email: z.string().email(),
});

export async function createUser(data: z.infer<typeof schema>) {
  const parsed = schema.safeParse(data);
  if (!parsed.success) {
    return { error: "Invalid data" };
  }

  // save to database
  return { success: true };
}

4. Prinsip yang Saya Ikuti

1. Validasi di client dan server (jangan percaya client saja)
2. Gunakan schema yang sama antara client & server kalau memungkinkan
3. Beri feedback yang jelas (loading, error, success)
4. Jangan over-complicate form sederhana

5. Hal yang Saya Hindari

• Controlled input manual untuk form besar
• Validation hanya di frontend
• Error message yang terlalu teknis ke user

Kesimpulan

Kombinasi React Hook Form + Zod + Server Actions masih jadi pilihan paling solid buat saya di 2026. Type-safe, performant, dan cukup fleksibel untuk hampir semua use case.

Pertanyaan buat kalian:
Kalian lagi pakai form library apa sekarang?
Masih React Hook Form atau sudah pindah ke yang lain?

Cerita di komentar yuk!

— Ady Rahmansyah
Software Engineer | Tech Blogger | Coffee Addict