M

MLOG

मराठी

तुमच्या Next.js ऍप्लिकेशनमध्ये थेट सर्व्हरलेस बॅकएंड तयार करण्यासाठी Next.js API रूट्सचा कसा फायदा घ्यावा हे शिका. या मार्गदर्शिकेत मूलभूत सेटअपपासून ते ऑथेंटिकेशन आणि डेटा पर्सिस्टन्सपर्यंत सर्व काही समाविष्ट आहे.

Next.js API रूट्स: तुमचा बॅकएंड सहजतेने तयार करा

Next.js ने त्याच्या शक्तिशाली वैशिष्ट्यांमुळे आणि सोप्या रचनेमुळे फ्रंट-एंड डेव्हलपमेंटमध्ये क्रांती घडवली आहे. पण तुम्हाला माहित आहे का की ते बॅकएंड डेव्हलपमेंटला देखील लक्षणीयरीत्या सोपे करू शकते? Next.js API रूट्स तुम्हाला थेट तुमच्या Next.js ऍप्लिकेशनमध्ये सर्व्हरलेस API एंडपॉइंट्स तयार करण्याची परवानगी देतात, ज्यामुळे अनेक प्रकरणांमध्ये वेगळ्या बॅकएंड सर्व्हरची गरज नाहीशी होते. हे सर्वसमावेशक मार्गदर्शक तुम्हाला Next.js API रूट्स वापरून एक मजबूत आणि स्केलेबल बॅकएंड तयार करण्याच्या प्रक्रियेतून घेऊन जाईल.

Next.js API रूट्स म्हणजे काय?

API रूट्स हे सर्व्हरलेस फंक्शन्स आहेत जे तुम्ही तुमच्या /pages/api डिरेक्टरीमध्ये तुमच्या Next.js प्रोजेक्टमध्ये तयार करता. ही फंक्शन्स पारंपरिक बॅकएंड API प्रमाणेच येणाऱ्या HTTP रिक्वेस्ट्स हाताळतात आणि रिस्पॉन्स परत करतात. मुख्य फरक हा आहे की ते सर्व्हरलेस फंक्शन्स म्हणून तैनात केले जातात, याचा अर्थ तुम्हाला सर्व्हर किंवा इन्फ्रास्ट्रक्चर व्यवस्थापित करण्याची आवश्यकता नाही.

त्यांना हलकेफुलके, ऑन-डिमांड बॅकएंड फंक्शन्स समजा जे तुमच्या 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') {
    // Handle GET request
    res.status(200).json({ message: 'This is a GET request' })
  } else if (req.method === 'POST') {
    // Handle POST request
    res.status(200).json({ message: 'This is a POST request' })
  } else {
    // Handle other methods
    res.status(405).json({ message: 'Method Not Allowed' })
  }
}

या उदाहरणात, API रूट GET आणि POST दोन्ही रिक्वेस्ट्स हाताळतो. जर रिक्वेस्ट मेथड GET असेल, तर तो "This is a GET request" मेसेज असलेला JSON ऑब्जेक्ट प्रतिसाद देतो. जर रिक्वेस्ट मेथड POST असेल, तर तो "This is a POST request" मेसेज असलेला JSON ऑब्जेक्ट प्रतिसाद देतो. जर रिक्वेस्ट मेथड इतर काही असेल, तर तो 405 Method Not Allowed त्रुटीसह प्रतिसाद देतो.

रिक्वेस्ट बॉडीमधून डेटा वाचणे

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

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

    // Process the data
    console.log('Name:', name)
    console.log('Email:', email)

    res.status(200).json({ message: 'Data received successfully' })
  } else {
    res.status(405).json({ message: 'Method Not Allowed' })
  }
}

या 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: 'Hello, world!' })
}

या उदाहरणात, API रूट Content-Type हेडरला application/json वर सेट करतो, जे दर्शवते की प्रतिसाद एक JSON ऑब्जेक्ट आहे. तो Cache-Control हेडरला s-maxage=3600 वर सेट करतो, जे ब्राउझर आणि CDN ला प्रतिसाद 1 तासापर्यंत कॅशे करण्यास सांगते.

त्रुटी हाताळणी (Error Handling)

तुमच्या API रूट्समध्ये त्रुटी व्यवस्थित हाताळणे महत्त्वाचे आहे. तुम्ही अपवाद (exceptions) पकडण्यासाठी आणि क्लायंटला योग्य त्रुटी प्रतिसाद पाठवण्यासाठी try-catch ब्लॉक्स वापरू शकता. उदाहरणार्थ:

// pages/api/error.js
export default async function handler(req, res) {
  try {
    // Simulate an error
    throw new Error('Something went wrong')
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'Internal Server Error' })
  }
}

या उदाहरणात, API रूट एक नवीन Error ऑब्जेक्ट थ्रो करून त्रुटी निर्माण करतो. catch ब्लॉक त्रुटी पकडतो, ती कन्सोलवर लॉग करतो आणि क्लायंटला 500 Internal Server Error प्रतिसाद पाठवतो. प्रोडक्शन वातावरणासाठी 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('Please add your Mongo URI to .env.local')
}

if (process.env.NODE_ENV === 'development') {
  // In development mode, use a global variable so that the value
  // is preserved across module reloads caused by HMR (Hot Module Replacement).
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // In production mode, it's best to not use a global variable.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Export a module-scoped MongoClient promise. By doing this in a
// separate module, the client can be safely reused across multiple
// functions.  See: 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: 'Failed to fetch users' })
  }
}

हा कोड चालवण्यापूर्वी, तुम्ही mongodb पॅकेज इंस्टॉल केले असल्याची खात्री करा:

npm install mongodb

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

ऑथेंटिकेशन आणि ऑथोरायझेशन

सुरक्षेसाठी तुमचे 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: 'Unauthorized' })
  }

  try {
    const decoded = jwt.verify(token, secret)
    // The "decoded" object contains the user information embedded in the token
    // For example: const userId = decoded.userId;

    // Continue processing the request
    res.status(200).json({ message: 'Protected resource accessed successfully' })
  } catch (error) {
    return res.status(401).json({ message: 'Invalid token' })
  }
}

हा कोड चालवण्यापूर्वी, तुम्ही jsonwebtoken पॅकेज इंस्टॉल केले असल्याची खात्री करा:

npm install jsonwebtoken

तुम्हाला JWT_SECRET एनवायरमेंट व्हेरिएबल देखील सेट करणे आवश्यक आहे. ही एक मजबूत, यादृच्छिकपणे तयार केलेली गुप्त की (secret key) असावी जी JWTs वर सही करण्यासाठी आणि सत्यापित करण्यासाठी वापरली जाते. ही की सुरक्षितपणे संग्रहित करा आणि तुमच्या क्लायंट-साइड कोडमध्ये कधीही उघड करू नका.

मिडलवेअर (Middleware)

Next.js Express.js प्रमाणे API रूट्ससाठी पारंपारिक मिडलवेअर ऑफर करत नसले तरी, तुम्ही तुमच्या 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: 'This request was logged' })
}

export default withLogging(handler)

Next.js API रूट्स तयार करण्यासाठी सर्वोत्तम पद्धती

प्रगत तंत्रे

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

API प्रतिसादात अडथळा आणू नये अशा दीर्घकाळ चालणाऱ्या कार्यांसाठी, बॅकग्राउंड जॉब्स वापरण्याचा विचार करा. तुम्ही तुमचे बॅकग्राउंड जॉब्स व्यवस्थापित करण्यासाठी आणि त्यांना असिंक्रोनसपणे प्रक्रिया करण्यासाठी BullMQ किंवा Bree सारख्या लायब्ररी वापरू शकता.

वेबसॉकेट्स (WebSockets)

रिअल-टाइम ऍप्लिकेशन्ससाठी, तुम्ही तुमच्या Next.js API रूट्समध्ये वेबसॉकेट्स वापरू शकता. Socket.IO आणि ws सारख्या लायब्ररी क्लायंट आणि सर्व्हर दरम्यान स्थायी कनेक्शन स्थापित करणे सोपे करतात.

GraphQL

तुम्हाला डेटा आणण्यासाठी अधिक लवचिक आणि कार्यक्षम मार्गाची आवश्यकता असल्यास, GraphQL वापरण्याचा विचार करा. तुम्ही तुमच्या Next.js ऍप्लिकेशनमध्ये GraphQL API एंडपॉइंट तयार करण्यासाठी Apollo Server किंवा Yoga सारख्या लायब्ररी वापरू शकता.

निष्कर्ष

Next.js API रूट्स थेट तुमच्या Next.js ऍप्लिकेशनमध्ये सर्व्हरलेस बॅकएंड तयार करण्याचा एक शक्तिशाली आणि सोयीस्कर मार्ग प्रदान करतात. सर्व्हरलेस आर्किटेक्चरच्या फायद्यांचा उपयोग करून, तुम्ही डेव्हलपमेंट सोपे करू शकता, कार्यक्षमता सुधारू शकता आणि खर्च कमी करू शकता. तुम्ही एक साधा संपर्क फॉर्म तयार करत असाल किंवा एक जटिल ई-कॉमर्स प्लॅटफॉर्म, Next.js API रूट्स तुम्हाला सहजतेने एक मजबूत आणि स्केलेबल बॅकएंड तयार करण्यास मदत करू शकतात. मूलभूत गोष्टींची ठोस समज आणि सर्वोत्तम पद्धतींच्या वापरासह, तुम्ही कार्यक्षम, सुरक्षित आणि जागतिक स्तरावर प्रवेशयोग्य ऍप्लिकेशन्स तयार करण्यासाठी या शक्तिशाली टूलचा फायदा घेऊ शकता.