Server Actions၊ Forms နှင့် Validation

Form တစ်ခု submit ဖို့ API endpoint၊ client fetch နဲ့ loading state အကုန်လုံးကို အမြဲရေးစရာမလိုပါဘူး။ Server Action က form action နဲ့ server function ကို ချိတ်ပေးပြီး JavaScript မတင်ရသေးချိန်တောင် form submit လုပ်နိုင်တဲ့ progressive enhancement ရစေပါတယ်။

နားလည်ထားရမယ့် အချက်

Server Function က async ဖြစ်ရပြီး use server directive ပါရပါတယ်။ Browser ကခေါ်နိုင်တဲ့ server endpoint တစ်ခုလိုပဲ ယူဆပြီး authentication၊ authorization နဲ့ validation ကို function အတွင်းပြန်စစ်ပါ။ Mutation ပြီးရင် updateTag၊ revalidateTag သို့မဟုတ် revalidatePath နဲ့ data ကိုအသစ်လုပ်ပြီး redirect နဲ့ detail page သွားနိုင်ပါတယ်။ Expected validation error ကို user ဖတ်နိုင်တဲ့ state အဖြစ်ပြန်ပေးတာက raw exception ပြတာထက်ကောင်းပါတယ်။

အတူတူ စမ်းရေးကြည့်မယ်

// app/actions.ts
"use server";
import { updateTag } from "next/cache";

export async function createNote(formData: FormData) {
  const title = String(formData.get("title") ?? "").trim();
  if (title.length < 3) return { error: "ခေါင်းစဉ် အနည်းဆုံး ၃ လုံးရေးပါ" };

  await db.note.create({ data: { title } });
  updateTag("notes");
  return { success: true };
}

// app/notes/new/page.tsx
<form action={createNote}>
  <label htmlFor="title">ခေါင်းစဉ်</label>
  <input id="title" name="title" required minLength={3} />
  <button type="submit">သိမ်းမယ်</button>
</form>

Code က ဘယ်လိုအလုပ်လုပ်သလဲ

createNote က title ကို FormData မှယူပြီး အနည်းဆုံးသုံးလုံးစစ်ပါတယ်။ Database ထဲထည့်ပြီး notes tag ကို expire လုပ်လို့ list အသစ်မြင်ရပါတယ်။ Form component က function ကို action prop ထဲထည့်ရုံပါပဲ။

Valid title ကို database ထဲသိမ်းပြီး notes list မှာ ပြောင်းလဲမှုချက်ချင်းမြင်မည်။

Next.js — Mutating Data — Next.js