Server Actions are asynchronous functions that run on the server. They can be called from both Client and Server Components to handle data mutations.
Interactive Simulation Engine
Server Action Simulation
Zero-API Data Mutations
Client Component
Secure Server Runtime
actions.ts
Waiting for RPC call...Server Actions are functions that Next.js automatically turns into secure API endpoints for you.
Executable Code Workbench
page.tsx
Live Code Editor1// app/actions.ts
2'use server'
3
4import { revalidatePath } from 'next/cache'
5
6export async function createFeedback(formData: FormData) {
7 const message = formData.get('message')
8
9 // No DB needed: just simulate server-side processing
10 console.log('Feedback processed on server:', message)
11
12 // Revalidate the cache so the UI updates
13 revalidatePath('/concepts')
14
15 return { success: true }
16}
17
18// app/page.tsx (Server Component)
19export default function Form() {
20 return (
21 <form action={createFeedback}>
22 <input name="message" className="border p-2" />
23 <button type="submit">Submit to Server</button>
24 </form>
25 )Mental Model
Think of Server Actions as 'RPC' (Remote Procedure Call) functions. Instead of creating a manual API route with fetch, you just call a function and Next.js handles the network request for you.
Why This Exists
To eliminate the boilerplate of creating API endpoints for forms and to provide a type-safe way to mutate data that works even without JavaScript.
Critical Note
"People think Server Actions are only for forms. While they integrate with the 'action' prop, they are just functions you can call anywhere—even in a button's onClick or a useEffect."