M

MLOG

हिन्दी

जानें कि कैसे Next.js API रूट्स का उपयोग करके सीधे अपने Next.js एप्लिकेशन में सर्वरलेस बैकएंड बना सकते हैं। यह गाइड बेसिक सेटअप से लेकर प्रमाणीकरण, डेटा पर्सिस्टेंस और बहुत कुछ संभालने के लिए उन्नत तकनीकों तक सब कुछ कवर करती है।

Next.js API रूट्स: आसानी से अपना बैकएंड बनाएं

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

Next.js API रूट्स क्या हैं?

API रूट्स सर्वरलेस फ़ंक्शंस हैं जिन्हें आप अपने /pages/api डायरेक्टरी में अपने Next.js प्रोजेक्ट के भीतर बनाते हैं। ये फ़ंक्शंस आने वाले HTTP अनुरोधों को संभालते हैं और प्रतिक्रियाएँ लौटाते हैं, ठीक एक पारंपरिक बैकएंड API की तरह। मुख्य अंतर यह है कि उन्हें सर्वरलेस फ़ंक्शंस के रूप में तैनात किया जाता है, जिसका अर्थ है कि आपको सर्वर या इंफ्रास्ट्रक्चर का प्रबंधन करने की आवश्यकता नहीं है।

उन्हें हल्के, ऑन-डिमांड बैकएंड फ़ंक्शंस के रूप में सोचें जो आपके Next.js फ्रंट-एंड के साथ सहज रूप से एकीकृत हैं।

Next.js API रूट्स का उपयोग करने के लाभ

Next.js API रूट्स के साथ शुरुआत करना

चलिए एक सरल API रूट बनाते हैं जो एक JSON प्रतिक्रिया लौटाता है। सबसे पहले, सुनिश्चित करें कि आपके पास एक Next.js प्रोजेक्ट सेटअप है। यदि नहीं, तो इसका उपयोग करके एक बनाएं:

npx create-next-app my-app
cd my-app

अब, /pages/api डायरेक्टरी के अंदर hello.js नामक एक फ़ाइल बनाएं:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

यह कोड एक सरल API रूट को परिभाषित करता है जो "John Doe" नाम वाले JSON ऑब्जेक्ट के साथ प्रतिक्रिया करता है। इस API रूट तक पहुँचने के लिए, अपना Next.js डेवलपमेंट सर्वर शुरू करें:

npm run dev

फिर, अपना ब्राउज़र खोलें और http://localhost:3000/api/hello पर जाएँ। आपको निम्नलिखित JSON प्रतिक्रिया देखनी चाहिए:

{"name": "John Doe"}

API रूट हैंडलर को समझना

आपके API रूट में handler फ़ंक्शन दो आर्ग्यूमेंट प्राप्त करता है:

आप इन ऑब्जेक्ट्स का उपयोग विभिन्न प्रकार के अनुरोधों को संभालने, अनुरोध बॉडी से डेटा पढ़ने, प्रतिक्रिया हेडर सेट करने और विभिन्न प्रकार की प्रतिक्रियाएँ भेजने के लिए कर सकते हैं।

विभिन्न HTTP तरीकों को संभालना

आप आने वाले अनुरोध की HTTP विधि निर्धारित करने और विभिन्न तरीकों को तदनुसार संभालने के लिए req.method प्रॉपर्टी का उपयोग कर सकते हैं। उदाहरण के लिए:

// pages/api/method.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // GET अनुरोध को संभालें
    res.status(200).json({ message: 'यह एक GET अनुरोध है' })
  } else if (req.method === 'POST') {
    // POST अनुरोध को संभालें
    res.status(200).json({ message: 'यह एक POST अनुरोध है' })
  } else {
    // अन्य तरीकों को संभालें
    res.status(405).json({ message: 'विधि की अनुमति नहीं है' })
  }
}

इस उदाहरण में, API रूट GET और POST दोनों अनुरोधों को संभालता है। यदि अनुरोध विधि GET है, तो यह "यह एक GET अनुरोध है" संदेश वाले JSON ऑब्जेक्ट के साथ प्रतिक्रिया करता है। यदि अनुरोध विधि POST है, तो यह "यह एक POST अनुरोध है" संदेश वाले JSON ऑब्जेक्ट के साथ प्रतिक्रिया करता है। यदि अनुरोध विधि कुछ और है, तो यह 405 Method Not Allowed त्रुटि के साथ प्रतिक्रिया करता है।

अनुरोध बॉडी से डेटा पढ़ना

POST, PUT, और PATCH अनुरोधों के लिए, आपको अक्सर अनुरोध बॉडी से डेटा पढ़ने की आवश्यकता होती है। Next.js JSON और URL-एन्कोडेड अनुरोध निकायों को पार्स करने के लिए अंतर्निहित समर्थन प्रदान करता है। JSON अनुरोध बॉडी को पार्स करने के लिए, आप req.body प्रॉपर्टी का उपयोग कर सकते हैं। उदाहरण के लिए:

// pages/api/post.js
export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email } = req.body

    // डेटा को प्रोसेस करें
    console.log('नाम:', name)
    console.log('ईमेल:', email)

    res.status(200).json({ message: 'डेटा सफलतापूर्वक प्राप्त हुआ' })
  } else {
    res.status(405).json({ message: 'विधि की अनुमति नहीं है' })
  }
}

इस API रूट का परीक्षण करने के लिए, आप Postman या curl जैसे टूल का उपयोग करके JSON बॉडी के साथ एक POST अनुरोध भेज सकते हैं:

curl -X POST -H "Content-Type: application/json" -d '{"name": "Jane Doe", "email": "jane.doe@example.com"}' http://localhost:3000/api/post

प्रतिक्रिया हेडर सेट करना

आप प्रतिक्रिया हेडर सेट करने के लिए res.setHeader() विधि का उपयोग कर सकते हैं। यह सामग्री प्रकार, कैश नियंत्रण और अन्य महत्वपूर्ण जानकारी सेट करने के लिए उपयोगी है। उदाहरण के लिए:

// pages/api/headers.js
export default function handler(req, res) {
  res.setHeader('Content-Type', 'application/json')
  res.setHeader('Cache-Control', 's-maxage=3600')
  res.status(200).json({ message: 'नमस्ते, दुनिया!' })
}

इस उदाहरण में, API रूट Content-Type हेडर को application/json पर सेट करता है, यह दर्शाता है कि प्रतिक्रिया एक JSON ऑब्जेक्ट है। यह Cache-Control हेडर को s-maxage=3600 पर भी सेट करता है, जो ब्राउज़र और CDN को प्रतिक्रिया को 1 घंटे तक कैश करने के लिए कहता है।

त्रुटि प्रबंधन (Error Handling)

आपके API रूट्स में त्रुटियों को शालीनता से संभालना महत्वपूर्ण है। आप अपवादों को पकड़ने और क्लाइंट को उपयुक्त त्रुटि प्रतिक्रियाएँ भेजने के लिए ट्राई-कैच ब्लॉक का उपयोग कर सकते हैं। उदाहरण के लिए:

// pages/api/error.js
export default async function handler(req, res) {
  try {
    // एक त्रुटि का अनुकरण करें
    throw new Error('कुछ गलत हो गया')
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'आंतरिक सर्वर त्रुटि' })
  }
}

इस उदाहरण में, API रूट एक नया Error ऑब्जेक्ट फेंक कर एक त्रुटि का अनुकरण करता है। कैच ब्लॉक त्रुटि को पकड़ता है, इसे कंसोल पर लॉग करता है, और क्लाइंट को 500 आंतरिक सर्वर त्रुटि प्रतिक्रिया भेजता है। उत्पादन वातावरण के लिए Sentry या Datadog जैसी एक मजबूत लॉगिंग प्रणाली का उपयोग करने पर विचार करें।

डेटाबेस से कनेक्ट करना

API रूट्स के सबसे आम उपयोग मामलों में से एक डेटाबेस से कनेक्ट करना है। Next.js API रूट्स विभिन्न डेटाबेस के साथ सहजता से एकीकृत होते हैं, जिनमें शामिल हैं:

यहाँ एक उदाहरण है कि Next.js API रूट में MongoDB डेटाबेस से कैसे कनेक्ट करें:

// pages/api/mongodb.js
import { MongoClient } from 'mongodb'

const uri = process.env.MONGODB_URI
const options = {}

let client
let clientPromise

if (!process.env.MONGODB_URI) {
  throw new Error('कृपया अपनी मोंगो यूआरआई को .env.local में जोड़ें')
}

if (process.env.NODE_ENV === 'development') {
  // विकास मोड में, एक वैश्विक चर का उपयोग करें ताकि मान
  // HMR (हॉट मॉड्यूल रिप्लेसमेंट) के कारण होने वाले मॉड्यूल रीलोड में संरक्षित रहे।
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // उत्पादन मोड में, वैश्विक चर का उपयोग न करना सबसे अच्छा है।
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// एक मॉड्यूल-स्कोप्ड MongoClient प्रॉमिस निर्यात करें। इसे एक
// अलग मॉड्यूल में करने से, क्लाइंट को कई
// फ़ंक्शंस में सुरक्षित रूप से पुन: उपयोग किया जा सकता है। देखें: https://github.com/vercel/next.js/blob/canary/examples/with-mongodb/lib/mongodb.js
export default async function handler(req, res) {
  try {
    const client = await clientPromise
    const db = client.db(process.env.MONGODB_DB)
    const collection = db.collection('users')

    const users = await collection.find({}).toArray()

    res.status(200).json({ users })
  } catch (e) {
    console.error(e)
    res.status(500).json({ message: 'उपयोगकर्ताओं को लाने में विफल' })
  }
}

इस कोड को चलाने से पहले, सुनिश्चित करें कि आपने mongodb पैकेज इंस्टॉल किया है:

npm install mongodb

आपको MONGODB_URI और MONGODB_DB पर्यावरण चर भी सेट करने होंगे। इन चरों को आपकी .env.local फ़ाइल (या उत्पादन के लिए आपके होस्टिंग प्रदाता की पर्यावरण चर सेटिंग्स) में परिभाषित किया जाना चाहिए। MONGODB_URI में आपके MongoDB डेटाबेस का कनेक्शन स्ट्रिंग होता है, और MONGODB_DB डेटाबेस का नाम निर्दिष्ट करता है।

प्रमाणीकरण और प्राधिकरण (Authentication and Authorization)

सुरक्षा के लिए अपने API रूट्स की सुरक्षा करना महत्वपूर्ण है। Next.js API रूट्स को विभिन्न प्रमाणीकरण और प्राधिकरण तकनीकों का उपयोग करके सुरक्षित किया जा सकता है, जिनमें शामिल हैं:

यहाँ एक उदाहरण है कि JWT प्रमाणीकरण का उपयोग करके API रूट को कैसे सुरक्षित किया जाए:

// pages/api/protected.js
import jwt from 'jsonwebtoken'

const secret = process.env.JWT_SECRET

export default function handler(req, res) {
  const token = req.headers.authorization?.split(' ')[1]

  if (!token) {
    return res.status(401).json({ message: 'अनधिकृत' })
  }

  try {
    const decoded = jwt.verify(token, secret)
    // "decoded" ऑब्जेक्ट में टोकन में एम्बेडेड उपयोगकर्ता जानकारी होती है
    // उदाहरण के लिए: const userId = decoded.userId;

    // अनुरोध को संसाधित करना जारी रखें
    res.status(200).json({ message: 'संरक्षित संसाधन तक सफलतापूर्वक पहुँचा गया' })
  } catch (error) {
    return res.status(401).json({ message: 'अमान्य टोकन' })
  }
}

इस कोड को चलाने से पहले, सुनिश्चित करें कि आपने jsonwebtoken पैकेज इंस्टॉल किया है:

npm install jsonwebtoken

आपको JWT_SECRET पर्यावरण चर भी सेट करना होगा। यह एक मजबूत, यादृच्छिक रूप से उत्पन्न गुप्त कुंजी होनी चाहिए जिसका उपयोग JWTs पर हस्ताक्षर करने और सत्यापित करने के लिए किया जाता है। इसे सुरक्षित रूप से संग्रहीत करें और इसे कभी भी अपने क्लाइंट-साइड कोड में उजागर न करें।

मिडलवेयर (Middleware)

हालांकि Next.js API रूट्स के लिए Express.js की तरह पारंपरिक मिडलवेयर की पेशकश नहीं करता है, आप अपने API रूट हैंडलर्स को पुन: प्रयोज्य कार्यों के साथ लपेटकर समान कार्यक्षमता प्राप्त कर सकते हैं। यह आपको निम्न जैसे कार्य करने की अनुमति देता है:

यहाँ एक सरल लॉगिंग मिडलवेयर बनाने का एक उदाहरण है:

// utils/middleware.js
export function withLogging(handler) {
  return async function(req, res) {
    console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`)
    return handler(req, res)
  }
}

इस मिडलवेयर का उपयोग करने के लिए, बस अपने API रूट हैंडलर को withLogging फ़ंक्शन के साथ लपेटें:

// pages/api/logged.js
import { withLogging } from '../../utils/middleware'

async function handler(req, res) {
  res.status(200).json({ message: 'यह अनुरोध लॉग किया गया था' })
}

export default withLogging(handler)

Next.js API रूट्स बनाने के लिए सर्वोत्तम अभ्यास

उन्नत तकनीकें

बैकग्राउंड जॉब्स

लंबे समय तक चलने वाले कार्यों के लिए जो API प्रतिक्रिया को ब्लॉक नहीं करना चाहिए, बैकग्राउंड जॉब्स का उपयोग करने पर विचार करें। आप अपने बैकग्राउंड जॉब्स का प्रबंधन करने और उन्हें अतुल्यकालिक रूप से संसाधित करने के लिए BullMQ या Bree जैसी लाइब्रेरी का उपयोग कर सकते हैं।

वेबसॉकेट्स

रीयल-टाइम अनुप्रयोगों के लिए, आप अपने Next.js API रूट्स में वेबसॉकेट्स का उपयोग कर सकते हैं। Socket.IO और ws जैसी लाइब्रेरी क्लाइंट और सर्वर के बीच स्थायी कनेक्शन स्थापित करना आसान बनाती हैं।

GraphQL

यदि आपको डेटा लाने के लिए एक अधिक लचीला और कुशल तरीका चाहिए, तो GraphQL का उपयोग करने पर विचार करें। आप अपने Next.js एप्लिकेशन में GraphQL API एंडपॉइंट बनाने के लिए Apollo Server या Yoga जैसी लाइब्रेरी का उपयोग कर सकते हैं।

निष्कर्ष

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