M

MLOG

हिन्दी

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

Next.js रूट हैंडलर्स: एपीआई एंडपॉइंट बनाने के लिए एक व्यापक गाइड

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

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

रूट हैंडलर्स Next.js प्रोजेक्ट की app डायरेक्टरी के भीतर परिभाषित फ़ंक्शन हैं जो आने वाले HTTP अनुरोधों को संभालते हैं। पुराने pages/api दृष्टिकोण (जो API रूट्स का उपयोग करता है) के विपरीत, रूट हैंडलर्स आपके रिएक्ट कंपोनेंट्स के साथ एपीआई एंडपॉइंट को परिभाषित करने का एक अधिक सुव्यवस्थित और लचीला तरीका प्रदान करते हैं। वे अनिवार्य रूप से सर्वरलेस फ़ंक्शन हैं जो एज पर या आपके चुने हुए सर्वर वातावरण में निष्पादित होते हैं।

रूट हैंडलर्स को अपने Next.js एप्लिकेशन के बैकएंड लॉजिक के रूप में सोचें, जो अनुरोधों को संसाधित करने, डेटाबेस के साथ इंटरैक्ट करने और प्रतिक्रियाएं लौटाने के लिए जिम्मेदार हैं।

रूट हैंडलर्स का उपयोग करने के लाभ

अपना Next.js प्रोजेक्ट सेट अप करना

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

npx create-next-app@latest my-nextjs-app

नए रूटिंग सिस्टम को सक्षम करने के लिए सेटअप प्रक्रिया के दौरान app डायरेक्टरी चुनें।

अपना पहला रूट हैंडलर बनाना

आइए एक साधारण एपीआई एंडपॉइंट बनाएं जो एक JSON प्रतिक्रिया लौटाता है। app डायरेक्टरी के भीतर एक नई डायरेक्टरी बनाएं, उदाहरण के लिए, /app/api/hello। इस डायरेक्टरी के अंदर, route.ts (या route.js यदि आप TypeScript का उपयोग नहीं कर रहे हैं) नामक एक फ़ाइल बनाएं।

यहां आपके पहले रूट हैंडलर के लिए कोड है:

// app/api/hello/route.ts
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 return NextResponse.json({ message: 'Next.js रूट हैंडलर्स की ओर से नमस्ते!' });
}

स्पष्टीकरण:

अब, आप इस एंडपॉइंट को अपने ब्राउज़र में /api/hello पर नेविगेट करके या curl या Postman जैसे टूल का उपयोग करके एक्सेस कर सकते हैं।

विभिन्न HTTP मेथड्स को संभालना

रूट हैंडलर्स विभिन्न HTTP मेथड्स जैसे GET, POST, PUT, DELETE, PATCH, और OPTIONS का समर्थन करते हैं। आप एक ही route.ts फ़ाइल के भीतर प्रत्येक मेथड के लिए अलग-अलग फ़ंक्शन परिभाषित कर सकते हैं।

// app/api/users/route.ts
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 // डेटाबेस से सभी उपयोगकर्ताओं को पुनः प्राप्त करने का लॉजिक
 const users = [{ id: 1, name: 'John Doe' }, { id: 2, name: 'Jane Smith' }]; // उदाहरण डेटा
 return NextResponse.json(users);
}

export async function POST(request: Request) {
 const data = await request.json(); // अनुरोध बॉडी को JSON के रूप में पार्स करें
 // 'data' का उपयोग करके डेटाबेस में एक नया उपयोगकर्ता बनाने का लॉजिक
 const newUser = { id: 3, name: data.name, email: data.email }; // उदाहरण
 return NextResponse.json(newUser, { status: 201 }); // नए उपयोगकर्ता को 201 क्रिएटेड स्टेटस कोड के साथ लौटाएं
}

स्पष्टीकरण:

रिक्वेस्ट डेटा तक पहुंच

request ऑब्जेक्ट आने वाले अनुरोध के बारे में विभिन्न जानकारी तक पहुंच प्रदान करता है, जिसमें हेडर, क्वेरी पैरामीटर और अनुरोध बॉडी शामिल हैं।

हेडर्स

आप request.headers प्रॉपर्टी का उपयोग करके अनुरोध हेडर्स तक पहुंच सकते हैं:

export async function GET(request: Request) {
 const userAgent = request.headers.get('user-agent');
 console.log('User Agent:', userAgent);
 return NextResponse.json({ userAgent });
}

क्वेरी पैरामीटर्स

क्वेरी पैरामीटर्स तक पहुंचने के लिए, आप URL कंस्ट्रक्टर का उपयोग कर सकते हैं:

export async function GET(request: Request) {
 const url = new URL(request.url);
 const searchParams = new URLSearchParams(url.search);
 const id = searchParams.get('id');
 console.log('ID:', id);
 return NextResponse.json({ id });
}

रिक्वेस्ट बॉडी

POST, PUT, और PATCH अनुरोधों के लिए, आप सामग्री के प्रकार के आधार पर, request.json() या request.text() विधियों का उपयोग करके अनुरोध बॉडी तक पहुंच सकते हैं।

export async function POST(request: Request) {
 const data = await request.json();
 console.log('Data:', data);
 return NextResponse.json({ receivedData: data });
}

प्रतिक्रियाएं लौटाना

NextResponse ऑब्जेक्ट का उपयोग API प्रतिक्रियाओं के निर्माण के लिए किया जाता है। यह हेडर्स, स्टेटस कोड और प्रतिक्रिया बॉडी सेट करने के लिए कई तरीके प्रदान करता है।

JSON प्रतिक्रियाएं

JSON प्रतिक्रियाएं लौटाने के लिए NextResponse.json() विधि का उपयोग करें:

return NextResponse.json({ message: 'Success!', data: { name: 'John Doe' } }, { status: 200 });

टेक्स्ट प्रतिक्रियाएं

सादे टेक्स्ट प्रतिक्रियाएं लौटाने के लिए new Response() कंस्ट्रक्टर का उपयोग करें:

return new Response('Hello, world!', { status: 200, headers: { 'Content-Type': 'text/plain' } });

रीडायरेक्ट्स

उपयोगकर्ताओं को एक अलग URL पर रीडायरेक्ट करने के लिए NextResponse.redirect() का उपयोग करें:

import { redirect } from 'next/navigation';
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 return NextResponse.redirect(new URL('/new-location', request.url));
}

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

आप NextResponse.json() या new Response() में headers विकल्प का उपयोग करके कस्टम हेडर्स सेट कर सकते हैं:

return NextResponse.json({ message: 'Success!' }, { status: 200, headers: { 'Cache-Control': 'no-cache' } });

मिडलवेयर इंटीग्रेशन

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

मिडलवेयर बनाने के लिए, app डायरेक्टरी या किसी सबडायरेक्टरी में middleware.ts (या middleware.js) नामक एक फ़ाइल बनाएं। मिडलवेयर उस डायरेक्टरी और उसकी सबडायरेक्टरी के भीतर सभी रूट्स पर लागू होगा।

// app/middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
 const token = request.cookies.get('auth-token');

 if (!token) {
 return NextResponse.redirect(new URL('/login', request.url));
 }

 return NextResponse.next();
}

export const config = {
 matcher: ['/protected/:path*'], // इस मिडलवेयर को /protected/ से शुरू होने वाले पाथ पर लागू करें
};

स्पष्टीकरण:

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

मजबूत एपीआई बनाने के लिए उचित त्रुटि प्रबंधन महत्वपूर्ण है। आप अपवादों को संभालने और उचित त्रुटि प्रतिक्रियाएं लौटाने के लिए try...catch ब्लॉक का उपयोग कर सकते हैं।

export async function GET(request: Request) {
 try {
 // एक त्रुटि का अनुकरण करें
 throw new Error('Something went wrong!');
 } catch (error: any) {
 console.error('Error:', error);
 return NextResponse.json({ error: error.message }, { status: 500 });
 }
}

स्पष्टीकरण:

स्ट्रीमिंग प्रतिक्रियाएं

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

import { Readable } from 'stream';
import { NextResponse } from 'next/server';

async function* generateData() {
 for (let i = 0; i < 10; i++) {
 await new Promise(resolve => setTimeout(resolve, 500)); // देरी का अनुकरण करें
 yield `Data chunk ${i}\n`;
 }
}

export async function GET(request: Request) {
 const readableStream = Readable.from(generateData());

 return new Response(readableStream, {
 headers: { 'Content-Type': 'text/plain; charset=utf-8' },
 });
}

स्पष्टीकरण:

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

अपने एपीआई एंडपॉइंट्स को सुरक्षित करना महत्वपूर्ण है। आप मिडलवेयर का उपयोग करके या सीधे अपने रूट हैंडलर्स के भीतर प्रमाणीकरण और प्राधिकरण लागू कर सकते हैं।

प्रमाणीकरण (Authentication)

प्रमाणीकरण अनुरोध करने वाले उपयोगकर्ता की पहचान की पुष्टि करता है। सामान्य प्रमाणीकरण विधियों में शामिल हैं:

यहाँ मिडलवेयर का उपयोग करके JWT प्रमाणीकरण का एक उदाहरण है:

// app/middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import jwt from 'jsonwebtoken';

const secret = process.env.JWT_SECRET || 'your-secret-key'; // एक मजबूत, यादृच्छिक रूप से उत्पन्न सीक्रेट से बदलें

export function middleware(request: NextRequest) {
 const token = request.cookies.get('auth-token')?.value;

 if (!token) {
 return NextResponse.json({ message: 'Authentication required' }, { status: 401 });
 }

 try {
 jwt.verify(token, secret);
 return NextResponse.next();
 } catch (error) {
 return NextResponse.json({ message: 'Invalid token' }, { status: 401 });
 }
}

export const config = {
 matcher: ['/api/protected/:path*'],
};

प्राधिकरण (Authorization)

प्राधिकरण यह निर्धारित करता है कि एक उपयोगकर्ता किन संसाधनों तक पहुंच सकता है। यह आमतौर पर भूमिकाओं या अनुमतियों पर आधारित होता है।

आप अपने रूट हैंडलर्स के भीतर उपयोगकर्ता की भूमिकाओं या अनुमतियों की जांच करके और यदि उनके पास पहुंच नहीं है तो एक त्रुटि लौटाकर प्राधिकरण लागू कर सकते हैं।

// app/api/admin/route.ts
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 // मान लें कि आपके पास टोकन या सत्र से उपयोगकर्ता की भूमिका प्राप्त करने के लिए एक फ़ंक्शन है
 const userRole = await getUserRole(request);

 if (userRole !== 'admin') {
 return NextResponse.json({ message: 'Unauthorized' }, { status: 403 });
 }

 // व्यवस्थापक डेटा प्राप्त करने का लॉजिक
 const adminData = { message: 'Admin data' };
 return NextResponse.json(adminData);
}

async function getUserRole(request: Request): Promise {
 // अनुरोध से उपयोगकर्ता की भूमिका निकालने के लिए अपने वास्तविक लॉजिक से बदलें
 // इसमें JWT टोकन को सत्यापित करना या सत्र की जांच करना शामिल हो सकता है
 return 'admin'; // उदाहरण: प्रदर्शन के लिए हार्डकोडेड भूमिका
}

रूट हैंडलर्स को डिप्लॉय करना

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

वर्सल के लिए, डिप्लॉयमेंट अपनी Git रिपॉजिटरी को वर्सेल से जोड़ने और अपने कोड को पुश करने जितना सरल है। वर्सेल स्वचालित रूप से आपके Next.js प्रोजेक्ट का पता लगाता है और आपके रूट हैंडलर्स को सर्वरलेस फ़ंक्शंस के रूप में डिप्लॉय करता है।

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

एज फ़ंक्शंस (Edge Functions)

रूट हैंडलर्स को एज फ़ंक्शंस के रूप में तैनात किया जा सकता है, जो आपके उपयोगकर्ताओं के करीब, एक CDN के किनारे पर निष्पादित होते हैं। यह विलंबता को काफी कम कर सकता है और प्रदर्शन में सुधार कर सकता है।

एक रूट हैंडलर को एज फ़ंक्शन के रूप में तैनात करने के लिए, अपनी route.ts फ़ाइल में edge रनटाइम जोड़ें:

export const runtime = 'edge';

import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 return NextResponse.json({ message: 'एज से नमस्ते!' });
}

सर्वर एक्शन (Server Actions)

सर्वर एक्शन आपको अपने रिएक्ट कंपोनेंट्स से सीधे सर्वर-साइड कोड निष्पादित करने की अनुमति देते हैं। रूट हैंडलर्स और सर्वर एक्शन एक साथ सहजता से काम करते हैं, जिससे आप आसानी से जटिल एप्लिकेशन बना सकते हैं।

यहाँ एक रूट हैंडलर को कॉल करने के लिए सर्वर एक्शन का उपयोग करने का एक उदाहरण है:

// app/components/MyComponent.tsx
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';

async function handleSubmit(data: FormData) {
 'use server';

 const name = data.get('name');
 const email = data.get('email');

 const response = await fetch('/api/users', {
 method: 'POST',
 body: JSON.stringify({ name, email }),
 });

 if (response.ok) {
 router.refresh(); // परिवर्तनों को दर्शाने के लिए पेज को रीफ्रेश करें
 }
}

export default function MyComponent() {
 const router = useRouter();

 return (
 

 
 


 
 


 
 

 );
}

कैशिंग (Caching)

कैशिंग आपके एपीआई एंडपॉइंट्स के प्रदर्शन में काफी सुधार कर सकती है। आप Cache-Control हेडर का उपयोग यह नियंत्रित करने के लिए कर सकते हैं कि आपकी प्रतिक्रियाएं ब्राउज़रों और CDNs द्वारा कैसे कैश की जाती हैं।

return NextResponse.json({ message: 'Success!' }, { status: 200, headers: { 'Cache-Control': 'public, max-age=3600' } });

यह उदाहरण Cache-Control हेडर को public, max-age=3600 पर सेट करता है, जो ब्राउज़रों और CDNs को एक घंटे के लिए प्रतिक्रिया को कैश करने के लिए कहता है।

सर्वोत्तम प्रथाएं (Best Practices)

वास्तविक-दुनिया के उदाहरण

यहाँ कुछ वास्तविक-दुनिया के उदाहरण दिए गए हैं कि रूट हैंडलर्स का उपयोग कैसे किया जा सकता है:

अंतर्राष्ट्रीय ई-कॉमर्स उदाहरण: एक रूट हैंडलर का उपयोग उपयोगकर्ता के देश के आधार पर उत्पाद मूल्य निर्धारण को पुनः प्राप्त करने के लिए किया जाता है। एंडपॉइंट उपयोगकर्ता के स्थान को निर्धारित करने के लिए अनुरोध के जियोलोकेशन (आईपी पते से व्युत्पन्न) का उपयोग कर सकता है और उपयुक्त मुद्रा में कीमतें लौटा सकता है। यह एक स्थानीयकृत खरीदारी अनुभव में योगदान देता है।

वैश्विक प्रमाणीकरण उदाहरण: एक रूट हैंडलर दुनिया भर के उपयोगकर्ताओं के लिए मल्टी-फैक्टर ऑथेंटिकेशन (MFA) लागू करता है। इसमें विभिन्न क्षेत्रों के गोपनीयता नियमों और दूरसंचार अवसंरचनाओं का सम्मान करते हुए एसएमएस कोड भेजना या ऑथेंटिकेटर ऐप्स का उपयोग करना शामिल हो सकता है।

बहुभाषी सामग्री वितरण: एक रूट हैंडलर उपयोगकर्ता की पसंदीदा भाषा में सामग्री वितरित करता है। यह अनुरोध में `Accept-Language` हेडर से निर्धारित किया जा सकता है। यह उदाहरण उचित UTF-8 एन्कोडिंग और जहां उपयुक्त हो, दाएं-से-बाएं भाषा समर्थन की आवश्यकता पर प्रकाश डालता है।

निष्कर्ष

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

इस व्यापक गाइड ने बुनियादी सेटअप से लेकर उन्नत तकनीकों तक सब कुछ कवर किया है। इस गाइड में उल्लिखित सर्वोत्तम प्रथाओं का पालन करके, आप उच्च-गुणवत्ता वाले एपीआई बना सकते हैं जो सुरक्षित, प्रदर्शनशील और रखरखाव योग्य हैं।