Server Action Pattern

Type-safe form submissions and data mutations using Next.js Server Actions with progressive enhancement, optimistic updates, and structured result handling.

What's Included#

• Basic server actions with Zod validation and revalidation
• Structured result pattern ({ success, data, error }) for predictable client handling
• useActionState integration (React 19) for loading states and error display
• Delete action with confirmation flow using useTransition
• Optimistic updates with useOptimistic for instant UI feedback
• Guidance on when to use server actions vs route handlers

Usage#

Via CLI#

Via AI Assistant#

Ask your AI assistant:

• "Use the server action pattern from Bootspring"
• "Apply the Bootspring server action pattern to my project"

Key Considerations#

• Always add the 'use server' directive at the top of server action files
• Return structured { success, data, error } objects rather than throwing exceptions
• Validate all form data server-side with Zod; never trust client input
• Call revalidatePath() or revalidateTag() after mutations to update cached data
• Use optimistic updates with useOptimistic for perceived performance
• Prefer server actions for form submissions; use route handlers for webhooks and public APIs

Related Patterns#

• Route Handler - For REST APIs and webhooks
• Error Handling - Consistent error responses
• Validation - Input validation with Zod