איך החיים שלכם קלים יותר בשליחת טפסים בNext עם Server Actions. 😃 סדרת Next.js. דרגת קושי: 6/10. עזוב... נו! שם מלחיץ בשביל משהו שמבטיח חיים קלים... 🤔 בחייכם! רק בגלל השם לא תציצו רגע בהמשך? באמת! לא מתאים לכם! אתם גיבורים! צאצאים של שמשון הגיבור ובאריב יריאל! 🤩 עד עכשיו שרצינו לשלוח טפסים בריאקט זו הדרך הפתלתלה שנאלצנו לעבור: 1. השתמשנו בonSubmit והחרבנו את הברירת מחדל של הריפרוש של הדף חמושים בpreventDefault. 2. היינו צריכים ליצור endpoint בשרת כדי לקבל את הנתונים ולאחסן אותם במדף הנכון בשרת. 3. אספנו את המידע מהטופס ושיגרנו בעזרת fetch או axios. ועכשיו? 🥰 הדרך של Next היא: 1. להשתמש בaction המובנה של html (שבתקופת מפיבושת היו כותבים שם את הurl של הendpoint) ושם נכתוב את שם הפונקציה שנרצה להפעיל בשרת! (חשוב להגדיר את הדף או הפונקציה כ"use server".) 2. וNext מאחורי הקלעים תיצור אוטומטית api endpoint POST ותחסוך לנו לכתוב את הכל ידנית. 3. הפונקציה תפטפט ישירות עם הdb ללא צורך בבקשות api. ואיך נקבל את הנתונים בפונקציה? 🙄 כFormData (מכירים? ישנם מספר דרכים לשאוב נתונים מformData) כמו כן next מספקת שכבת אבטחה נחמדה, טיפול בשגיאות אלגנטי, ופעילות נמרצת ללא JavaScript בצד הלקוח. לסיכום: אין סיכום! תרקדו! 😎