Form

يمتد مكون <Form> عنصر HTML <form> لتوفير التنقل من جانب العميل (client-side navigation) عند الإرسال، والتحسين التدريجي (progressive enhancement).

هو مفيد للنماذج التي تقوم بتحديث معلمات البحث في URL لأنه يقلل من الكود المتكرر المطلوب لتحقيق ما سبق.

الاستخدام الأساسي:

import Form from 'next/form'

export default function Page() {
  return (
    <Form action="/search">
      {/* عند الإرسال، سيتم إضافة قيمة الإدخال إلى
          الـ URL، مثلاً /search?query=abc */}
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  )
}

import Form from 'next/form'

export default function Search() {
  return (
    <Form action="/search">
      {/* عند الإرسال، سيتم إضافة قيمة الإدخال إلى
          الـ URL، مثلاً /search?query=abc */}
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  )
}

المرجع

يعتمد سلوك مكون <Form> على ما إذا كانت الخاصية action تمرر كـ string أو function.

• عندما تكون action سلسلة نصية (string)، يتصرف <Form> مثل نموذج HTML عادي يستخدم طريقة GET. يتم ترميز بيانات النموذج في الـ URL كمعلمات بحث، وعند إرسال النموذج، يتم التنقل إلى الـ URL المحدد. بالإضافة إلى ذلك، يقوم Next.js بما يلي:
  • يقوم بـ التنقل من جانب العميل (client-side navigation) بدلاً من إعادة تحميل الصفحة بالكامل عند إرسال النموذج. هذا يحافظ على واجهة المستخدم المشتركة وحالة جانب العميل.

خصائص action (سلسلة نصية)

عندما تكون action سلسلة نصية، يدعم مكون <Form> الخصائص التالية:

• action: الـ URL أو المسار للتنقل إليه عند إرسال النموذج.
  • سلسلة نصية فارغة "" ستؤدي إلى التنقل إلى نفس المسار مع تحديث معلمات البحث.
• replace: يستبدل حالة التاريخ الحالية بدلاً من إضافة جديدة إلى مكدس تاريخ المتصفح. الافتراضي هو false.
• scroll: يتحكم في سلوك التمرير أثناء التنقل. الافتراضي هو true، مما يعني أنه سيتم التمرير إلى أعلى المسار الجديد، والحفاظ على موضع التمرير للتنقل للخلف وللأمام.

محاذير

• onSubmit: يمكن استخدامه لمعالجة منطق إرسال النموذج. ومع ذلك، استدعاء event.preventDefault() سيتجاوز سلوك <Form> مثل التنقل إلى الـ URL المحدد.
• method, encType, target: غير مدعومة لأنها تتجاوز سلوك <Form>.
  • بالمثل، يمكن استخدام formMethod، formEncType، و formTarget لتجاوز خصائص method، encType، و target على التوالي، واستخدامها سيعيد إلى سلوك المتصفح الافتراضي.
  • إذا كنت بحاجة إلى استخدام هذه الخصائص، استخدم عنصر HTML <form> بدلاً من ذلك.
• <input type="file">: استخدام نوع الإدخال هذا عندما تكون action سلسلة نصية سيطابق سلوك المتصفح بإرسال اسم الملف بدلاً من كائن الملف.