ری‌اکت سرور اکشن: بررسی سرور اکشن تو نکست ۱۴ (کار با فرم تو nextjs و react)

سرور اکشن ها فیچر جدید ری‌اکت هستند که به ما این امکان و میدن که یه تابع فقط رو سرور اجرا بشه و ما بتونیم اونو داخل from ها و event listener ها و useEffect و ... صدا کنیم، یه جورایی همون API Endpoint ها هستند ولی هم کار باهاشون ساده تره و هم میتونن کامپوننت های ری‌اکت و رندر کنن و عنوان نتیجه ریترن کنن.
برای ساخت server action ها کافیه که تو اولین خط تعریف server action از کلیدواژه "use server" استفاده کنیم.
فریم ورک نکست جی اس به عنوان اولین فریم ورک این فیچر و استفاده کرده. تو این ویدیو یه اپ کوچیک میسازیم فرم میسازیم و submission فرم و با server action هندل میکنیم و دیتاشو داخل دیتابیس ذخیره میکنیم و با کمک api revalidatePath نکست دیتای کامپوننت و رفرش میکنیم.
و با استفاده از هوک های useFormStatus و useFormAction تجربه کاربری (UX) فرم های اپمون رو بهتر میکنیم.
ریپو گیتهاب: github.com/nimaa77/youtube-se...
اگر سوالی داشتید همینجا تو قسمت comment ها میتونید بپرسید یا داخل تلگرام به ادرس @nima_arf بهم پیام بدید.
وب سایت: react.ir
کانال تلگرام: t.me/react_ir
ایکس (توییتر): / react_ir
0:00 Intro
1:52 Server Action
HTML Form 8:49
React Forms 15:01
Read TODOs From DB 22:25
NextJS Revalidate Path 23:40
useFormStatus and Submit indicator 26:05
Reset Form After Submission 30:50
FormValidation & useFormAction 34:03
Bonus Content (Server Actions are Server Components!) 43:09
#react #nextjs #server_action #RSC

[@MSEIN2303]

خیلی خوب بود. دمت گرم با این اموزش های عالیت.
و دمت گرم که اینقدر یاد داری

[@armanamini2086]

بسیار عالی و روان 👌

[@MZCOD-qq4et]

معرکه بود 👌

[@sadeghkarimi401]

perfect

[@aminsaadat-lc6py]

بسیار عالی و حرفه ای بود.

[@nima_arf]

😍😍😍 خوشحالم که مفید بوده

[@sajadtayefi5949]

Kheli awili 🎉🎉

[@alirezanaghavian3476]

عالی بود و خفن 💥💥
لطفا درباره نحوه استفاده از react query توی next js هم ویدئو بزار

[@nima_arf]

بله حتما

[@user-fe4lq6sj3o]

bessssst bro

[@khashayarashuri1441]

خیلی خوب بود

[@nima_arf]

You’re welcome!

[@rezaazarnia7429]

عالی بود ❤

[@nima_arf]

❤️

[@hamidzare6663]

good job dear Nima👌

[@nima_arf]

Thank you 😊

[@MiladJoodi]

فوق العاده بود ممنون. لطفا راجب Drizzle vs Prisma ORM توی Next.js بهمون آموزش بدید. یه پروژه crud 😘

[@nima_arf]

اره چرا که نه حتما یه ویدیو میگیرم

[@salmanaliof4108]

همین integrateکردن reactروی یه فریمورک میتونه ایده خوبی برای یه سری ویدیو باشه ، یه جورایی مثل ssr بدون فریمورک ، سپاس ازوقتی که برای محتوای باکیفیت و متفاوت میذاری 🎉🎉

[@nima_arf]

خواهش میکنم
خوشحال شدم که تونستم کمکتون کنم 😍🎉
فقط متوجه نشدم react و رو چی integrate کنیم؟

[@salmanaliof4108]

مثلا nest

[@ghazaleniazi5855]

🔥🔥🔥🔥

[@salmanaliof4108]

واقعا nest باید بیاد و react رو integrate کنه

[@farazmehraien3913]

خیلی خوب بود. فقط لینک گیت رو من پیدا نمی کنم. اگر بذاری خیلی خوب میشه مخصوصا اون مثال آخر با فیلم ها

[@nima_arf]

سلاممم
من یکم تنبلی کردم الان ۱۴ روزه میخوام به این کامنتت جواب بدم نمیشه
تو قسمت description ویدیو لینکشو گذاشتم
github.com/nimaa77/youtube-server-actions

[@j1351209]

درود و سپاس از محتوای عالی.میشه گفت با این قابلیتهایی که یه ری اکت اضافه شده (و در نکست جی اس)دوره بک اند فریمورکها مثا اکسپرس در حال تمام شدنه؟

[@nima_arf]

سلام نهههه به هیچ عنوان
نکته اول اینکه خود فریمورک نکست پشت صحنه داره از express استفاده میکنه.
نکته دوم اینکه نکست ابزار و api خاصی نداره که بتونه با یه چیزی مثل nest یا laravel رقابت کنه، اون فریم ورکا کلی API برای Validation, Database, Queue, Logging, Microserver, و ... چیزای دیگه دارن که nextjs اصلا اینارو نداره
اون فریمورکا تو لایه view خیلی عقب هستند نسبت به نکست که داره از react استفاده میکنه، احتمالا اگر nestjs بیاد react و integrate کنه nextjs از رده خارج بشه :))))
بعد مسئله بعدی اینکه خیلیا اینکه کدهای بک‌اند و فرانت‌اند کنار هم باشن و دوست ندارن، خیلی هاهم دوسش دارن. هر طرف داستان هم یکسری concern و consideration واسه خودشون دارن که میگن به این دلایل این روش بهتر از اون یکیه ...
اگر دوست داری کل اپتو به صورت monolithic بزنی میتونی از فریم ورک remix که inspiration اول برای این قضیه server action بوده هم یه نگاهی بندازی

[@slasharash]

👏