ساخت فرم با Server Actions در Next.js – اعتبارسنجی، ارسال امن، و به‌روزرسانی خوش‌بینانه

مقدمه

در Next.js می‌توان فرم‌ها را با استفاده از Server Actions ارسال کرد. این روش باعث می‌شود داده‌ها مستقیماً در سرور پردازش شوند و نیاز به API جداگانه نباشد.

نحوهٔ کار

در فرم HTML، می‌توان Server Function را با ویژگی action فراخوانی کرد. تابع به‌صورت خودکار شی FormData را دریافت می‌کند:

export default function Page() {
  async function createInvoice(formData: FormData) {
    'use server'
    const rawFormData = {
      customerId: formData.get('customerId'),
      amount: formData.get('amount'),
      status: formData.get('status'),
    }
    // پردازش داده‌ها
  }

  return <form action={createInvoice}>...</form>
}

ارسال آرگومان‌های اضافی

می‌توان با استفاده از bind آرگومان‌هایی خارج از فرم ارسال کرد:

'use client'

const updateUserWithId = updateUser.bind(null, userId)

<form action={updateUserWithId}>
  <input name="name" />
</form>

در سرور:

'use server'

export async function updateUser(userId: string, formData: FormData) {}

اعتبارسنجی فرم

برای اعتبارسنجی سمت سرور می‌توان از کتابخانه zod استفاده کرد:

'use server'
import { z } from 'zod'

const schema = z.object({
  email: z.string().email(),
})

export async function createUser(formData: FormData) {
  const validated = schema.safeParse({
    email: formData.get('email'),
  })

  if (!validated.success) {
    return {
      errors: validated.error.flatten().fieldErrors,
    }
  }

  // پردازش داده‌ها
}

نمایش خطاها با useActionState

برای نمایش خطاها، کامپوننت فرم باید Client باشد و از useActionState استفاده کند:

'use client'
import { useActionState } from 'react'

const initialState = { message: '' }

export function Signup() {
  const [state, formAction, pending] = useActionState(createUser, initialState)

  return (
    <form action={formAction}>
      <input name="email" required />
      <p>{state?.message}</p>
      <button disabled={pending}>Sign up</button>
    </form>
  )
}

مدیریت وضعیت ارسال

می‌توان از useFormStatus برای نمایش وضعیت ارسال استفاده کرد:

'use client'
import { useFormStatus } from 'react-dom'

export function SubmitButton() {
  const { pending } = useFormStatus()
  return <button disabled={pending}>Sign Up</button>
}

به‌روزرسانی خوش‌بینانه با useOptimistic

برای نمایش فوری داده‌ها قبل از پاسخ سرور:

'use client'
import { useOptimistic } from 'react'

const [optimisticMessages, addMessage] = useOptimistic(messages, (state, msg) => [...state, { message: msg }])

const formAction = async (formData: FormData) => {
  const msg = formData.get('message')
  addMessage(msg)
  await send(msg)
}

ارسال برنامه‌ریزی‌شده فرم

می‌توان فرم را با requestSubmit() ارسال کرد، مثلاً با کلید میانبر:

'use client'

const handleKeyDown = (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
    e.preventDefault()
    e.currentTarget.form?.requestSubmit()
  }
}

جمع‌بندی

با استفاده از Server Actions در Next.js می‌توان فرم‌هایی امن، قابل اعتبارسنجی و قابل تعامل ساخت. این روش باعث ساده‌سازی ارسال داده‌ها، مدیریت خطاها، و بهبود تجربه کاربری می‌شود.