LogoENEnglish

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

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

Server ActionsuseActionStateForm submissionValidation

~3 دقیقه مطالعه • بروزرسانی ۵ آبان ۱۴۰۴

مقدمه


در 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 می‌توان فرم‌هایی امن، قابل اعتبارسنجی و قابل تعامل ساخت. این روش باعث ساده‌سازی ارسال داده‌ها، مدیریت خطاها، و بهبود تجربه کاربری می‌شود.


نوشته و پژوهش شده توسط دکتر شاهین صیامی

Next Article