Next.js Server Actions and Forms: useFormState, Validation Errors, and File Uploads
Server Actions changed how forms work in Next.js. No more API routes for simple mutations. No more loading state management. No more fetch calls. Here's the full pattern. The Old Way vs Server Acti...
Source: DEV Community
Server Actions changed how forms work in Next.js. No more API routes for simple mutations. No more loading state management. No more fetch calls. Here's the full pattern. The Old Way vs Server Actions Before Server Actions: // Create API route // POST /api/profile // Call from client with fetch // Manage loading/error state // Revalidate data manually // 60+ lines across 2+ files With Server Actions: // One function, one file // Works with or without JavaScript // ~15 lines Basic Server Action // lib/actions.ts 'use server' import { auth } from './auth' import { db } from './db' import { revalidatePath } from 'next/cache' import { z } from 'zod' const ProfileSchema = z.object({ name: z.string().min(1).max(100), bio: z.string().max(500).optional() }) export async function updateProfile(formData: FormData) { const session = await auth() if (!session?.user?.id) throw new Error('Not authenticated') const parsed = ProfileSchema.safeParse({ name: formData.get('name'), bio: formData.get('bio'
