În Next.js modern, nu mai trebuie să creezi un API endpoint pentru fiecare formular. Server Actions – funcții care rulează pe server, apelate direct din componente – au devenit metoda implicită de a trimite date. Iată cum le folosești corect și când să eviți.
Exemplu de bază: un formular de contact
O Server Action e o funcție marcată 'use server', apelată ca un handler de formular obișnuit:
'use server'
export async function sendContact(formData: FormData) {
const name = formData.get('name')
const email = formData.get('email')
// validează, salvează, trimite email
}În componentă, doar transmiți acțiunea la <form action={sendContact}>. Fără fetch, fără API route, fără state de loading manual. Datele merg direct pe server, iar securitatea e mai bună pentru că logica niciodată nu ajunge în browser.
Validare și erori înainte de server
Combinația câștigătoare: useActionState pentru starea formularului (pending, erori, succes) și o bibliotecă de validare tip Zod pentru date. Serverul validează mereu; clientul doar oferă feedback instant. Astfel ai și experiență bună, și siguranță. Nu te baza niciodată doar pe validarea din browser.
Când Server Actions sunt alegerea corectă
- Formulare cu un singur scop: contact, abonare, înscriere, comentarii.
- Operații CRUD simple pe resurse proprii.
- Orice mutare care trebuie să revalideze imediat datele afișate.
Când să folosești în continuare API routes
Endpoint-uri consumate de alte aplicații sau servicii, webhook-uri, rulare cu rate limiting extern și cache pur la nivel de CDN. Regula simplă: interacțiune umană → Server Action; interacțiune mașină → API route. Le poți combina fără probleme în același proiect.
Capcanele întâlnite în proiecte reale
Server Actions expuse neintenționat în componente client, date neverificate pe server, sau acțiuni care refac întreaga pagină când ar fi trebuit doar o revalidare parțială. Disciplinele contează: acțiuni în fișiere dedicate, validare cu Zod și mutații revalidate prin tag-uri, nu refresh-uri întregi.
Fiecare formulare din proiectul tău merită un sistem
Formularele sunt punctul unde site-ul tău întâlnește clienții: ele trebuie să fie rapide, sigure și să nu piardă date. Exact cum sunt implementate în aplicațiile web pe care le construiesc cu Next.js – cu Server Actions, validare completă și experiență fluidă.
Întrebări frecvente
Ce sunt Server Actions în Next.js?
Funcții care rulează pe server, apelate direct din componente. Pentru formulare, înseamnă că poți valida și salva date fără să scrii o rută API separată — mai puțin cod, mai puține erori, securitate mai bună.
Server Actions sunt sigure?
Da, dacă validezi datele pe server (de exemplu cu Zod) și respecți principiile: nu trimite niciodată date nesigure, verifică autorizarea și limitează ratele. Datele nu ajung în client decât când vrei tu.
Înlocuiesc complet API Routes?
Pentru formulare și mutații simple, da. Pentru webhook-uri, integrări externe sau API-uri publice, API Routes (sau Route Handlers) rămân necesare. Cele două coexista: folosește-le pe fiecare acolo unde se potrivesc.