सर्वर ऐक्शन फ़ॉर्म की बुनियाद
Next.js Server Actions का उपयोग करके ऐसे इंटरैक्टिव फ़ॉर्म बनाएँ जो डेटा सीधे सर्वर पर भेजें
सर्वर ऐक्शन फ़ॉर्म की बुनियाद, CoddyKit पर Next.js 15 फुलस्टैक (App Router + Server Actions) का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Next.js 15 फुलस्टैक (App Router + Server Actions) सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
सर्वर एक्शन का परिचय
सर्वर एक्शन में आपका स्वागत है! Next.js 15 की यह शक्तिशाली सुविधा आपको ऐसे फ़ंक्शन परिभाषित करने देती है जो सीधे सर्वर पर चलते हैं और जिन्हें आपके क्लाइंट घटकों से बुलाया जा सकता है।
इन्हें सर्वर पर डेटा भेजने का ऐसा तरीका समझिए, जिसमें अलग API रूट बनाने की आवश्यकता नहीं होती। ये डेटा में बदलाव करने और फ़ॉर्म सबमिट करने की प्रक्रिया को सरल बनाते हैं।
सर्वर एक्शन का उपयोग क्यों करें?
सर्वर एक्शन आपके Next.js अनुप्रयोगों के लिए कई महत्वपूर्ण लाभ प्रदान करते हैं:
- डेटा में बदलाव करना सरल: अपने फ़ॉर्म से सीधे सर्वर-साइड कोड कॉल करें।
- क्लाइंट-साइड JS कम: ब्राउज़र को कम JavaScript भेजनी पड़ती है।
- बेहतर प्रदर्शन: एक्शन आपके डेटाबेस के निकट चलते हैं, जिससे विलंबता कम हो सकती है।
- स्वचालित पुनर्वैधीकरण: सफल बदलाव के बाद ये कैश किए गए डेटा को स्वचालित रूप से अपडेट कर सकते हैं (इस पर आगे के पाठ में अधिक जानकारी दी जाएगी!)।
सर्वर एक्शन परिभाषित करना
सर्वर एक्शन एक async फ़ंक्शन होता है, जिस पर "use server" निर्देश लगा होता है। यह निर्देश Next.js को बताता है कि इस फ़ंक्शन को केवल सर्वर पर चलने वाले कोड के रूप में माना जाए।
आप एक्शन को सीधे अपने घटकों में या किसी अलग फ़ाइल (जैसे, app/actions.js) में परिभाषित करके आयात कर सकते हैं।
// app/actions.js
"use server";
export async function createItem(formData) {
const itemName = formData.get("itemName");
console.log(`Server received: ${itemName}`);
// In a real app, you'd save 'itemName' to a database
}फ़ॉर्म को एक्शन से जोड़ना
किसी HTML <form> तत्व को सर्वर एक्शन से जोड़ने के लिए, आप एक्शन फ़ंक्शन को सीधे फ़ॉर्म की action प्रॉपर्टी में दे सकते हैं। इतना आसान है!
फ़ॉर्म सबमिट होने पर Next.js निर्दिष्ट सर्वर एक्शन को स्वचालित रूप से कॉल करता है।
// app/page.js
import { createItem } from './actions';
export default function Page() {
return (
<form action={createItem}>
<label htmlFor="item">New Item:</label>
<input type="text" id="item" name="itemName" required />
<button type="submit">Add Item</button>
</form>
);
}फ़ॉर्म डेटा तक पहुँचना
जब कोई फ़ॉर्म सर्वर एक्शन को सबमिट किया जाता है, तो एक्शन फ़ंक्शन को अपने पहले आर्ग्युमेंट के रूप में FormData ऑब्जेक्ट स्वचालित रूप से प्राप्त होता है।
किसी इनपुट के name एट्रिब्यूट के आधार पर उसका मान प्राप्त करने के लिए आप formData.get('fieldName') का उपयोग कर सकते हैं।
// app/actions.js
"use server";
export async function processForm(formData) {
const username = formData.get("username");
const email = formData.get("email");
const age = formData.get("age");
console.log(`User: ${username}, Email: ${email}, Age: ${age}`);
// Perform server-side logic, e.g., save user to database
}पूरा फ़ॉर्म उदाहरण
आइए, अब तक सीखी गई बातों को एक सरल अतिथि-पुस्तिका प्रविष्टि फ़ॉर्म में मिलाकर देखें। सर्वर एक्शन अतिथि का संदेश लॉग करेगा।
ध्यान रखें, यह कोड Next.js परिवेश के लिए है और स्वतंत्र JS फ़ाइल के रूप में चलने योग्य नहीं है।
// app/actions.js
"use server";
export async function addGuestbookEntry(formData) {
const message = formData.get("message");
console.log(`New guestbook entry: ${message}`);
// In a real app, save to DB and revalidate cache
}
// app/page.js
import { addGuestbookEntry } from './actions';
export default function GuestbookPage() {
return (
<div>
<h1>Guestbook</h1>
<form action={addGuestbookEntry}>
<textarea name="message" rows="4" cols="30" placeholder="Your message..." required></textarea>
<button type="submit">Sign Guestbook</button>
</form>
</div>
);
}एकाधिक इनपुट संभालना
FormData ऑब्जेक्ट आपके फ़ॉर्म के उन सभी इनपुट को कुशलतापूर्वक एकत्र करता है जिनमें name एट्रिब्यूट होता है। आप उन तक अलग-अलग पहुँच सकते हैं।
formData.get('inputName'): दिए गए नाम का पहला मान प्राप्त करता है।formData.getAll('inputName'): समान नाम वाले इनपुट के सभी मानों की एक सारणी लौटाता है (एकाधिक चेकबॉक्स के लिए उपयोगी)।formData.entries(): सभी कुंजी/मान युग्मों का एक इटरेटर लौटाता है।
उपयोगकर्ता प्रतिक्रिया: लोड होने की अवस्थाएँ
जब कोई फ़ॉर्म सबमिट हो रहा हो, तब उपयोगकर्ता को दृश्य प्रतिक्रिया देना अच्छी प्रक्रिया है। इसके लिए Next.js, React के साथ मिलकर, useFormStatus हुक प्रदान करता है।
useFormStatus आपको बताता है कि पैरेंट <form> इस समय सबमिट हो रहा है या नहीं, जिससे आप बटन अक्षम कर सकते हैं या लोडिंग संकेतक दिखा सकते हैं।
// app/page.js (inside a component, e.g., SubmitButton.js)
import { useFormStatus } from "react-dom";
function SubmitButton() {
const { pending } = useFormStatus(); // Gets status from parent <form>
return (
<button type="submit" disabled={pending}>
{pending ? "Submitting..." : "Submit"}
</button>
);
}
// In your page.js:
// import { addGuestbookEntry } from './actions';
// export default function Page() {
// return (
// <form action={addGuestbookEntry}>
// {/* ... other inputs */}
// <SubmitButton />
// </form>
// );
// }त्वरित जाँच
बुनियादी Next.js सर्वर एक्शन फ़ॉर्म के बारे में कौन-से कथन सही हैं?
पुनरावलोकन और अगले चरण
बहुत बढ़िया! आपने Next.js सर्वर एक्शन से बुनियादी फ़ॉर्म बनाने की मूल बातें सीख ली हैं:
- सर्वर एक्शन सर्वर-साइड फ़ंक्शन होते हैं, जिन पर
"use server"लगा होता है। - ये एक्शन को सीधे फ़ॉर्म की
actionप्रॉपर्टी में देने की सुविधा देकर फ़ॉर्म सबमिशन को सरल बनाते हैं। - फ़ॉर्म डेटा को एक्शन के भीतर
FormDataऑब्जेक्ट के माध्यम से प्राप्त किया जाता है। useFormStatusहुक लोडिंग संकेतक लागू करने में सहायता करता है।
अब हम जानेंगे कि सर्वर एक्शन डेटा में बदलाव कैसे कर सकते हैं और आपके UI का स्वचालित रूप से पुनर्वैधीकरण कैसे कर सकते हैं!
एआई शिक्षक के साथ TypeScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 22
- पाठ
- 88
अक्सर पूछे जाने वाले प्रश्न
क्या “सर्वर ऐक्शन फ़ॉर्म की बुनियाद” पाठ निःशुल्क है?
हाँ — Next.js 15 फुलस्टैक (App Router + Server Actions) अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “सर्वर ऐक्शन फ़ॉर्म की बुनियाद” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“सर्वर ऐक्शन फ़ॉर्म की बुनियाद” में मैं क्या सीखूँगा?
Next.js Server Actions का उपयोग करके ऐसे इंटरैक्टिव फ़ॉर्म बनाएँ जो डेटा सीधे सर्वर पर भेजें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Next.js 15 फुलस्टैक (App Router + Server Actions) का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Next.js 15 फुलस्टैक (App Router + Server Actions) शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Next.js 15 फुलस्टैक (App Router + Server Actions) शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“सर्वर ऐक्शन फ़ॉर्म की बुनियाद” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- सर्वर ऐक्शन फ़ॉर्म की बुनियाद
- डेटा में बदलाव और पुनः सत्यापन
- ऐक्शन में त्रुटि प्रबंधन
- Server Actions के साथ आशावादी UI और लंबित अवस्थाएँ