मैं आपके बारे में नहीं जानता, लेकिन हर बार जब एक नई नेक्स्ट.जेएस रिलीज की घोषणा की जाती है, तो मैं यह देखने के लिए बहुत उत्साहित हो जाता हूं कि कौन सी नई विशेषताएं जारी की गई हैं। आजकल, वर्सेल रिएक्ट के साथ सर्वर पर जितना संभव हो सके जाने के लिए लॉक स्टेप में है, जो देखने के लिए बहुत ही रोमांचक है! पिछले हफ्ते, वर्सेल ने नेक्स्ट.जेएस 13.4 को जारी करने की घोषणा की , जिसमें सर्वर एक्शन नामक सर्वर पर डेटा अपडेट करने के लिए एक नया प्रतिमान शामिल था।

सर्वर क्रियाओं को सर्वर-साइड डेटा अपडेट को सक्षम करने, क्लाइंट-साइड जावास्क्रिप्ट को कम करने और उत्तरोत्तर उन्नत रूप प्रदान करने के लिए डिज़ाइन किया गया है। इस लेख में, हम सर्वर क्रियाओं के मूल सिद्धांतों में गोता लगाएंगे, उन्हें बनाने और लागू करने के तरीके का पता लगाएंगे, और विभिन्न संवर्द्धन और लाभों पर चर्चा करेंगे जो वे आपके नेक्स्ट.जेएस अनुप्रयोगों में लाते हैं।

ℹ️ ध्यान दें कि ये उदाहरण सीधे Next.js प्रलेखन वेबसाइट से लिए गए हैं । बहु-चरण प्रपत्र विज़ार्ड के उदाहरण के लिए नीचे देखें।

सर्वर क्रियाओं को सक्षम करना

serverActionsअपने Next.js प्रोजेक्ट में सर्वर क्रियाएँ सक्षम करने के लिए, आपको अपनी next.config.jsफ़ाइल में प्रायोगिक फ़्लैग सेट करने की आवश्यकता है :

const nextConfig = {
  experimental: {
    serverActions: true,
  },
};

एक सर्वर एक्शन बनाना उतना ही आसान है जितना कि फंक्शन बॉडी के शीर्ष पर "सर्वर का उपयोग करें" निर्देश के साथ एक एसिंक्रोनस फ़ंक्शन बनाना। रिएक्ट सर्वर कंपोनेंट्स प्रोटोकॉल के आधार पर फंक्शन में सीरियल करने योग्य तर्क और एक सीरियल करने योग्य रिटर्न वैल्यू होनी चाहिए। यहाँ एक उदाहरण है:

async function myAction() {
  "use server"
  // Your server action logic here
}

आप फ़ाइल के शीर्ष पर एक शीर्ष-स्तरीय "सर्वर का उपयोग करें" निर्देश का भी उपयोग कर सकते हैं, जो तब उपयोगी होता है जब आपके पास एक ही फ़ाइल होती है जो एकाधिक सर्वर क्रियाएं निर्यात करती है, और यदि आप क्लाइंट घटक में सर्वर क्रिया आयात कर रहे हैं तो यह आवश्यक है।

"use server"

export async function myAction() {
  // Your server action logic here
}

नेक्स्ट.जेएस प्रलेखन वेबसाइट के अनुसार, सर्वर क्रियाओं को लागू करने के कई तरीके हैं:

1. प्रोप का उपयोग करना action: रिएक्ट का प्रोप आपको किसी तत्व actionपर सर्वर क्रिया शुरू करने की अनुमति देता है ।<form>

export default function AddToCart({ productId }) {
  async function addItem(data) {
    'use server'
    const cartId = cookies().get('cartId')?.value;
    await saveToDb({ cartId, data });
  }

  return (
    <form action={addItem}>
      <button type="submit">Add to Cart</button>
    </form>
  )
}

export default function Form() {
  async function handleSubmit() {
    "use server"
    // Your server action logic here
  }

  async function submitImage() {
    "use server"
    // Your server action logic here
  }
  
  return (
    <form action={handleSubmit}>
      <input type="text" name="name" />
      <input type="image" formAction={submitImage} />
      <button type="submit">Submit</button>
    </form>
  )
}

'use client'
import { experimental_useOptimistic as useOptimistic } from 'react'
import { send } from './_actions.js'

export function Thread({ messages }) {
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [...state, { message: newMessage, sending: true }],
  )

  const formRef = useRef();
  
  return (
    <div>
      {optimisticMessages.map((m) => (
        <div>
          {m.message}
          {m.sending ? 'Sending...' : ''}
        </div>
      ))}
      <form
        action={async (formData) => {
          const message = formData.get('message')
          formRef.current.reset()
          addOptimisticMessage(message)
          await send(message)
        }}
        ref={formRef}
      >
        <input type="text" name="message" />
      </form>
    </div>
  )
}

1. यदि क्लाइंट एक्शन a को पास किया जाता है <form>, तो फॉर्म इंटरएक्टिव बना रहता है, लेकिन जब तक फॉर्म हाइड्रेटेड नहीं हो जाता, तब तक एक्शन कतार में रखा जाता है। <form>चयनात्मक जलयोजन के साथ प्राथमिकता दी जाती है, इसलिए यह जल्दी होता है ।

// src/components/MyForm.js
'use client'
import { useState } from 'react'
import { handleSubmit } from './actions.js'

export default function MyForm({ myAction }) {
  const [input, setInput] = useState();
  return (
    <form action={handleSubmit} onChange={(e) => setInput(e.target.value)}>
      ...
    </form>
  )
}

प्रवाह के प्रत्येक चरण पर डेटा को सहेजने के लिए सर्वर क्रियाओं का उपयोग करके एक उदाहरण विज़ार्ड पंजीकरण प्रवाह बनाने के लिए इसे एक साथ रखें।

सबसे पहले, हम एक पेज जोड़ेंगे:

// app/register/page.tsx
import RegistrationForm from 'src/components/RegistrationForm'

export default function Register() {
  return (
    <div>
      <h1>Registration</h1>
      <RegistrationForm />
    </div>
  )
}

// components/RegistrationForm.tsx
'use client'
import React, { useState } from 'react';
import {
  savePersonalInformation,
  saveContactInformation,
  saveAccountDetails
} from '../../actions'
import PersonalInformationStep from './PersonalInformationStep'
import ContactInformationStep from './ContactInformationStep'
import AccountDetailsStep from './AccountDetailsStep'

const WIZARD_STEPS = [
  {
    Component: PersonalInformationStep,
    action: savePersonalInformation,
  },
  {
    Component: ContactInformationStep,
    action: saveContactInformation,
  },
  {
    Component: AccountDetailsStep,
    action: saveAccountDetails,
  },
]

export default function RegistrationForm() {
  const [step, setStep] = useState(0);
  const { Component, action } = WIZARD_STEPS[step]

  const handleSubmit = async (data: FormData) => {
    await action(data);
    if (step < WIZARD_STEPS.length - 1) {
      setStep((currentStep) => currentStep + 1)
    } else {
      // Submit multi-step wizard form and navigate
    }
  }

  return (
    <Component onSubmit={handleSubmit} />
  )
}

// actions/index.ts
'use server'
import { cookies } from 'next/headers'
import prisma from 'prisma'
import { hashPassword } from 'src/utils/auth'

export async function savePersonalInformation(data: FormData) {
  const user = await prisma.user.create({
    data: {
      firstName: data.get('firstName').toString(),
      lastName: data.get('lastName').toString(),
    },
  })
  cookies().set('userId', user.id)
}

export async function saveContactInformation(data: FormData) {
  // Save contact information to the database
  const id = cookies().get('userId')?.value
  await prisma.user.update({
    where: { id },
    data: {
      email: data.get('email').toString(),
      phone: data.get('phone').toString(),
    },
  })
}

export async function saveAccountDetails(data: FormData) {
  // Save account details
  const id = cookies().get('userId')?.value
  const password = await hashPassword(
    data.get('password').toString()
  );
  await prisma.user.update({
    where: { id },
    data: {
      username: data.get('username').toString(),
      password,
    },
  })
}

// components/WizardStep.tsx
import React from 'react'
import { experimental_useFormStatus as useFormStatus } from 'react-dom'

type Props = {
  title: string;
  onSubmit: (data: FormData) => Promise<void>
  children: React.ReactNode
}

export default function FormStep({ title, onSubmit, children }: Props) {
  const { pending } = useFormStatus();
  return (
    <form
      action={async (formData) => {
        await onSubmit(formData);
      }}
    >
      <h2>{title}</h2>
      {children}
      <button
        type="submit"
        className={pending ? 'button-submitting' : 'button'}
      >
        Next
      </button>
    </form>
  )
}

// ./PersonalInformationStep.tsx
import React from 'react'
import WizardStep from '../WizardStep'

type Props = {
  onSubmit: (data: FormData) => Promise<void>
}

export default function PersonalInformationStep({ onSubmit }: Props) {
  return (
    <WizardStep title="Personal Information" onSubmit={onSubmit}>
      <label htmlFor="firstName">First Name:</label>
      <input type="text" id="firstName" name="firstName" required />
      <label htmlFor="lastName">Last Name:</label>
      <input type="text" id="lastName" name="lastName" required />
    </WizardStep>
  )
}

सर्वर क्रियाएं गेम-चेंजिंग क्यों हैं

समाप्त करने से पहले, चलिए इस पर चर्चा करने के लिए कुछ समय लेते हैं कि नेक्स्ट.जेएस सर्वर क्रियाएं नेक्स्ट.जेएस पारिस्थितिकी तंत्र के लिए इतना शक्तिशाली जोड़ क्यों हैं और वे वेब विकास सर्वोत्तम प्रथाओं को फिर से परिभाषित करने के लिए कैसे तैयार हैं।

1. कम क्लाइंट-साइड जावास्क्रिप्ट: नेक्स्ट.जेएस और रिएक्ट सर्वर पर लॉजिक को ऑफलोड करके क्लाइंट साइड बंडल को कम करने की दिशा में आगे बढ़ रहे हैं। Next.js ने हमें बहुत सारे कोड को सर्वर पर ले जाने में सक्षम बनाया है, लेकिन हम अभी भी क्लाइंट पर ज्यादातर फॉर्म बना रहे थे। यह सर्वर क्रियाओं के साथ बदलता है!
2. उन्नत उपयोगकर्ता अनुभव: आशावादी अद्यतन और प्रगतिशील वृद्धि जैसी सुविधाओं के साथ, डेवलपर ऐसे एप्लिकेशन बना सकते हैं जो अधिक प्रतिक्रियाशील और सहज महसूस करते हैं। उपयोगकर्ताओं को अब अपने कार्यों के प्रभावों को देखने के लिए सर्वर प्रतिक्रियाओं की प्रतीक्षा करने की आवश्यकता नहीं है, और फॉर्म जावास्क्रिप्ट के बिना भी इंटरैक्टिव बने रहते हैं, जिससे क्लाइंट के हाइड्रेट होने से पहले ही बेहतर समग्र उपयोगकर्ता अनुभव प्राप्त होता है।
3. महान डेवलपर अनुभव: सर्वर क्रियाएं सर्वर पर डेटा अपडेट को ऑफ़लोड करना आसान बनाती हैं, जिसके लिए अतीत में एक एपीआई की आवश्यकता होती थी। Next.js और React प्रदान करने वाले API इसके साथ काम करना वास्तव में आसान बनाते हैं।

सारांश में, नेक्स्ट.जेएस सर्वर एक्शन एक गेम-चेंजिंग फीचर है जिसमें वेब डेवलपर्स के सर्वर-साइड डेटा म्यूटेशन और फॉर्म हैंडलिंग के तरीके में क्रांति लाने की क्षमता है। अधिक उत्तरदायी, स्केलेबल और सुव्यवस्थित विकास अनुभव प्रदान करके, सर्वर क्रियाएँ आधुनिक वेब विकास के लिए एक अनिवार्य उपकरण बनने के लिए तैयार हैं।