Next.js 15 फुलस्टैक (App Router + Server Actions) · पाठ

Server Actions से CRUD

Server Actions का उपयोग करके अपने डेटाबेस पर बनाना, पढ़ना, अपडेट करना और हटाना (CRUD) ऑपरेशन करें

पाठ 2, कुल 4 में से12 चरण

Server Actions से CRUD, CoddyKit पर Next.js 15 फुलस्टैक (App Router + Server Actions) का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Next.js 15 फुलस्टैक (App Router + Server Actions) सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

CRUD: डेटाबेस कार्य आसान बनाएँ

Next.js Server Actions के साथ CRUD कार्यों में आपका स्वागत है! CRUD का अर्थ Create, Read, Update और Delete है। ये किसी भी डेटाबेस के साथ काम करने के चार मूलभूत कार्य हैं।

Server Actions इन कार्यों को सीधे सर्वर पर करने का शक्तिशाली तरीका देते हैं, जिससे आपका क्लाइंट-साइड बंडल छोटा रहता है और सुरक्षा बेहतर होती है।

पुनरावलोकन: Prisma और Server Actions

पिछले पाठ में हमने Prisma सेट अप किया था। हम अपने डेटाबेस के साथ काम करने के लिए Prisma Client का उपयोग करेंगे। याद रखें, Server Actions ऐसी अतुल्यकालिक फ़ंक्शन हैं जो सर्वर पर चलती हैं।

इन्हें सीधे किसी घटक में या अलग actions.js फ़ाइल में परिभाषित किया जा सकता है। अपने उदाहरणों में हम एक सरल Post मॉडल का उपयोग करेंगे।

Create: नया डेटा जोड़ना

आइए Create से शुरुआत करें। इसमें आपके डेटाबेस में एक नया रिकॉर्ड जोड़ना शामिल है। हम एक सरल फ़ॉर्म बनाएँगे, जो नया पोस्ट जोड़ने के लिए Server Action का उपयोग करेगा।

ध्यान दें कि फ़ॉर्म की action विशेषता सीधे हमारे सर्वर फ़ंक्शन को कॉल करती है। इससे फ़ॉर्म सबमिट करने के लिए क्लाइंट-साइड JavaScript की आवश्यकता नहीं रहती।

Create: कोड उदाहरण

Server Action का उपयोग करके नया पोस्ट इस तरह बनाया जाता है। हम अपने Prisma क्लाइंट को इम्पोर्ट करके उसकी create विधि का उपयोग करते हैं।

import { prisma } from '@/lib/prisma';
import { revalidatePath } from 'next/cache';

export default function CreatePostPage() {
  async function createPost(formData: FormData) {
    'use server';
    const title = formData.get('title') as string;
    const content = formData.get('content') as string;

    await prisma.post.create({
      data: { title, content, published: false },
    });

    revalidatePath('/posts'); // Refresh the posts list
  }

  return (
    <form action={createPost}>
      <input type="text" name="title" placeholder="Title" />
      <textarea name="content" placeholder="Content"></textarea>
      <button type="submit">Add Post</button>
    </form>
  );
}

Read: मौजूदा डेटा प्राप्त करना

Read कार्य आपके डेटाबेस से डेटा प्राप्त करता है। Next.js App Router में आप सीधे सर्वर घटकों में डेटा प्राप्त कर सकते हैं।

इसका अर्थ है कि आपके घटक को क्लाइंट पर भेजे जाने से पहले, डेटा प्राप्त करने का तर्क सर्वर पर चलता है, जिससे प्रारंभिक लोड समय बेहतर होता है।

Read: कोड उदाहरण

यहाँ एक सर्वर घटक है, जो सभी पोस्ट प्राप्त करके दिखाता है। await prisma.post.findMany() कॉल पूरी तरह सर्वर पर चलती है।

import { prisma } from '@/lib/prisma';

export default async function PostsPage() {
  const posts = await prisma.post.findMany();

  return (
    <div>
      <h1>All Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <b>{post.title}</b>
            <p>{post.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

Update: रिकॉर्ड में बदलाव करना

Update कार्य मौजूदा रिकॉर्ड में बदलाव करते हैं। आमतौर पर आप रिकॉर्ड की पहचान उसके विशिष्ट ID से करते हैं और फिर नया डेटा देते हैं।

Create की तरह, अपडेट कार्रवाई फ़ॉर्म सबमिट करने या बटन क्लिक करने से शुरू की जा सकती है और सर्वर-साइड तर्क निष्पादित कर सकती है।

Update: कोड उदाहरण

यह Server Action किसी पोस्ट की प्रकाशित स्थिति अपडेट करती है। हम पोस्ट की पहचान id से करते हैं और Prisma की update विधि का उपयोग करते हैं।

import { prisma } from '@/lib/prisma';
import { revalidatePath } from 'next/cache';

export async function updatePostStatus(id: number, published: boolean) {
  'use server';

  await prisma.post.update({
    where: { id },
    data: { published: !published },
  });

  revalidatePath('/posts');
}

// Example usage in a component:
// <button onClick={() => updatePostStatus(post.id, post.published)}>
//   Toggle Publish
// </button>

Delete: डेटा हटाना

अंत में, Delete डेटाबेस से कोई रिकॉर्ड हटा देता है। यह अक्सर किसी बटन से शुरू होता है और इसके लिए रिकॉर्ड के विशिष्ट पहचानकर्ता की आवश्यकता होती है।

हटाने के कार्यों में हमेशा सावधानी बरतें, क्योंकि इन्हें आमतौर पर वापस नहीं किया जा सकता!

Delete: कोड उदाहरण

यहाँ पोस्ट हटाने के लिए एक Server Action है। हम हटाए जाने वाले रिकॉर्ड को निर्दिष्ट करने के लिए where क्लॉज़ के साथ prisma.post.delete का उपयोग करते हैं।

import { prisma } from '@/lib/prisma';
import { revalidatePath } from 'next/cache';

export async function deletePost(id: number) {
  'use server';

  await prisma.post.delete({
    where: { id },
  });

  revalidatePath('/posts'); // Refresh the posts list
}

// Example usage in a component:
// <button onClick={() => deletePost(post.id)}>
//   Delete Post
// </button>

CRUD कार्यों की जाँच

आपने चार मुख्य CRUD कार्यों के बारे में सीखा है। डेटाबेस से मौजूदा डेटा प्राप्त करने के लिए किस कार्य का उपयोग किया जाता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: Actions के साथ CRUD

आज आपने Next.js Server Actions और Prisma का उपयोग करके Create, Read, Update और Delete (CRUD) कार्य करना सीख लिया है।

Create: नए रिकॉर्ड जोड़ना।
Read: डेटाबेस से रिकॉर्ड प्राप्त करना।
Update: मौजूदा रिकॉर्ड में बदलाव करना।
Delete: रिकॉर्ड हटाना।

Server Actions इन कार्यों को सीधे सर्वर पर चलाकर प्रभावी और सुरक्षित बनाती हैं। बदलावों के बाद यूआई अपडेट करने के लिए अक्सर revalidatePath की आवश्यकता होती है। अब हम डेटाबेस स्कीमा माइग्रेशन का तरीका सीखेंगे!

शुरुआत निःशुल्क

एआई शिक्षक के साथ TypeScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 22
पाठ: 88

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Server Actions से CRUD” पाठ निःशुल्क है?

हाँ — Next.js 15 फुलस्टैक (App Router + Server Actions) अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Server Actions से CRUD” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Server Actions से CRUD” में मैं क्या सीखूँगा?

Server Actions का उपयोग करके अपने डेटाबेस पर बनाना, पढ़ना, अपडेट करना और हटाना (CRUD) ऑपरेशन करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ 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 में से 2वाँ पाठ है।

“Server Actions से CRUD” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Next.js 15 फुलस्टैक (App Router + Server Actions) पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Next.js 15 फुलस्टैक (App Router + Server Actions) पर वापस जाएँ