Next.js Server Actions — Mutating Data Without an API Route
Server Action, top లో "use server" directive unна ఒక async function — idi ఎప్పుడూ server meedhа matrame run అవుతుంది, direct ga <form action={"{"}...{"}"}> కి connect చేయవచ్చు. Separate /api/ route create చేయాల్సిన అవసరం లేదు.
async function createCourse(formData: FormData) {
"use server";
const name = formData.get("name");
console.log("Creating course:", name);
// ... database insert logic here
}
export default function NewCoursePage() {
return (
<form action={createCourse}>
<input name="name" placeholder="Course name" />
<button type="submit">Create Course</button>
</form>
);
}"use server": Function body top లో — idi function ni Server Action గా mark చేస్తుంది.action={"{"}createCourse{"}"}: Form submit అయినప్పుడు, browser JavaScript disabled ఉన్నా కూడా pని చేస్తుంది (progressive enhancement).formData.get("name"): Submitted form field value ని చదవడానికి Web standard FormData API.
Data create/update చేసిన తర్వాత, cache refresh చేసి, user ni కొత్త page కి redirect చేయడం common pattern:
"use server";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
export async function createCourse(formData: FormData) {
const name = formData.get("name") as string;
// ... save to database here
revalidatePath("/courses");
redirect("/courses");
}Server Actions public HTTP endpoints లాగానే treat చేయాలి — ఎవరైనా directly call చేయగలరు కాబట్టి, input validation and authentication checks తప్పనిసరి:
"use server";
export async function createCourse(formData: FormData) {
const name = formData.get("name") as string;
if (!name || name.length < 3) {
throw new Error("Course name must be at least 3 characters.");
}
// ... check authenticated user before saving
}Server Action ki వచ్చిన formData ni validate చేయకుండా direct ga database లో save చేయడం — security risk. Client-side validation ఎప్పుడూ bypass అవ్వచ్చు కాబట్టి, Server Action లోపల కూడా validation తప్పనిసరి.
Write a Server Action that adds a comment to a post, validating the comment isn't empty before saving.
"use server";
export async function addComment(formData: FormData) {
const comment = formData.get("comment") as string;
if (!comment || comment.trim() === "") {
throw new Error("Comment cannot be empty.");
}
// ... save comment to database
console.log("New comment:", comment);
}Q Server Actions, Route Handlers రెండూ ఎందుకు ఉన్నాయి?
Server Actions form mutations, simple data updates కోసం ideal — boilerplate తక్కువ. Route Handlers, external clients (mobile apps, third-party services) కి public API అవసరమైనప్పుడు వాడతారు — Chapter 22 లో చూద్దాం.
Q Server Action లో try/catch avasarama?
Strongly recommended — database errors, validation failures gracefully handle చేయడానికి. Uncaught error, దగ్గరలో unна error.tsx ni trigger చేస్తుంది.
Q Server Actions JavaScript disable చేసినా pని చేస్తాయా?
Avunు — ఇదే వాటి pెద్ద advantage. <form action={fn}> native HTML form submission వాడుతుంది కాబట్టి, JavaScript లేకపోయినా server కి request వెళ్తుంది (progressive enhancement).