Next.js 16-da Server Actions ilə Formaların Dərin İdarə Olunması

Müasir veb tətbiqlərdə formaların idarə olunması həmişə ən çox boilerplate kod tələb edən sahələrdən biri olub. Əvvəllər sadə bir əlaqə və ya qeydiyyat forması yaratmaq üçün bir neçə addım atmalı olurduq: '/api/contact' REST marşrutu qurmaq, müştəri tərəfdə 'useState' ilə 'loading', 'error' və 'success' vəziyyətlərini saxlamaq, form submit zamanı 'fetch()' sorğusu göndərmək və xəta baş verdikdə bunu əl ilə render etmək. React 19 və Next.js 16 ilə birlikdə gələn Server Actions bu paradiqmanı tamamilə dəyişdi. Artıq ayrıca bir API marşrutu yaratmağa və şəbəkə sorğularını əl ilə idarə etməyə ehtiyac yoxdur. 📌 1. Server Actions Nədir və Necə İşləyir? Server Actions əslində serverdə icra olunan asinxron funksiyalardır. Funksiyanın yuxarısına 'use server' direktivini əlavə etməklə Next.js arxa planda avtomatik olaraq RPC (Remote Procedure Call) endpoint-i formalaşdırır. Müştəri komponentindən bu funksiya adi JavaScript funksiyası kimi çağırılır, lakin onun icrası təhlükəsiz Node.js mühitində baş verir. 📌 2. React 19 'useActionState' Hook-u ilə Vəziyyətin İdarəsi Formanın vəziyyətini idarə etmək üçün React 19-un 'useActionState' hook-u ən yaxşı təcrübə hesab olunur: const [state, formAction, isPending] = useActionState(myServerAction, initialState); Bu yanaşmanın üstünlükləri: - Təbii Form Submit: Formanın 'action' atributuna birbaşa 'formAction' ötürülür. - Avtomatik Optimistik Yenilənmə: 'isPending' vasitəsilə düymədə yüklənmə spinneri göstərilir. - Təhlükəsizlik: Giriş məlumatları birbaşa FormData kimi serverə çatır və Zod ilə anındaca yoxlanılır. 📌 3. Tez-tez Edilən Səhvlər və Həll Yolları - Səhv 1: 'redirect()' funksiyasını 'try/catch' daxilində çağırmaq. Next.js-də 'redirect()' daxildə xüsusi xəta atır (NEXT_REDIRECT). Əgər siz onu 'catch' blokunda tutsanız, istifadəçi yönləndirilməyəcək. 'redirect()' həmişə 'try/catch'-dən kənarda çağırılmalıdır. - Səhv 2: Validasiya xətası baş verdikdə istifadəçinin daxil etdiyi mətni silmək. Ən yaxşı təcrübə state daxilində 'fields' obyektini geri qaytarmaq və inputların 'defaultValue' xanalarına bağlamaqdır. Nəticə olaraq, Server Actions ilə yazılan formalar həm daha az kod tələb edir, həm də JavaScript yüklənməsə belə təmiz HTML formu kimi işləmə qabiliyyətinə (Progressive Enhancement) malik olur.