refactor-to-server-actions.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
# Refactor to Server Actions ## Command Prompt Refactor the selected client component to use Next.js Server Actions instead of API route handlers. **Current Pattern** (to be refactored):```typescript"use client";export function MyForm() { const handleSubmit = async (data) => { const response = await fetch("/api/endpoint", { method: "POST", body: JSON.stringify(data), }); // ... };}``` **Target Pattern**:```typescript// app/actions.ts"use server";export async function myAction(formData: FormData) { // Server-side logic} // component.tsximport { myAction } from "./actions"; export function MyForm() { return <form action={myAction}>...</form>;}``` **Requirements**:1. Create a new `actions.ts` file in the same directory2. Move all server-side logic to Server Actions3. Add "use server" directive4. Convert fetch calls to Server Actions5. Use FormData or typed parameters6. Add proper error handling with `useActionState` or try-catch7. Include loading states with `useFormStatus`8. Add Zod validation in Server Actions9. Return typed results (success/error objects)10. Update component to use the new actions11. Remove unnecessary "use client" if possible12. Add optimistic updates if applicable **Validation Pattern**:```typescriptconst result = schema.safeParse(data);if (!result.success) { return { error: result.error.flatten() };}``` Generate the refactored code with proper TypeScript types and error handling.
/refactor-to-server-actionsMarkdown