Next.js मिडलवेयर: डायनामिक एप्लिकेशन्स के लिए रिक्वेस्ट इंटरसेप्शन में महारत

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

Next.js मिडलवेयर क्या है?

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

• रिक्वेस्ट इंटरसेप्ट करें: आने वाले रिक्वेस्ट के हेडर्स, कुकीज़ और URL की जांच करें।
• रिक्वेस्ट संशोधित करें: विशिष्ट मानदंडों के आधार पर URL को फिर से लिखें, हेडर्स सेट करें, या उपयोगकर्ताओं को रीडायरेक्ट करें।
• कोड निष्पादित करें: पेज रेंडर होने से पहले सर्वर-साइड लॉजिक चलाएं।

मिडलवेयर फ़ंक्शंस आपके प्रोजेक्ट के रूट में middleware.ts (या middleware.js) फ़ाइल में परिभाषित किए जाते हैं। वे आपके एप्लिकेशन के भीतर हर रूट के लिए, या कॉन्फ़िगर करने योग्य मैचर्स के आधार पर विशिष्ट रूट्स के लिए निष्पादित होते हैं।

मुख्य अवधारणाएँ और लाभ

रिक्वेस्ट ऑब्जेक्ट

request ऑब्जेक्ट आने वाले रिक्वेस्ट के बारे में जानकारी तक पहुंच प्रदान करता है, जिसमें शामिल हैं:

• request.url: रिक्वेस्ट का पूरा URL।
• request.method: HTTP मेथड (जैसे, GET, POST)।
• request.headers: रिक्वेस्ट हेडर्स वाला एक ऑब्जेक्ट।
• request.cookies: रिक्वेस्ट कुकीज़ का प्रतिनिधित्व करने वाला एक ऑब्जेक्ट।
• request.geo: यदि उपलब्ध हो तो रिक्वेस्ट से जुड़ा जियो-लोकेशन डेटा प्रदान करता है।

रिस्पांस ऑब्जेक्ट

मिडलवेयर फ़ंक्शंस रिक्वेस्ट के परिणाम को नियंत्रित करने के लिए एक Response ऑब्जेक्ट लौटाते हैं। आप निम्नलिखित रिस्पांस का उपयोग कर सकते हैं:

• NextResponse.next(): रिक्वेस्ट को सामान्य रूप से प्रोसेस करना जारी रखता है, जिससे यह इच्छित रूट तक पहुंच पाता है।
• NextResponse.redirect(url): उपयोगकर्ता को एक अलग URL पर रीडायरेक्ट करता है।
• NextResponse.rewrite(url): रिक्वेस्ट URL को फिर से लिखता है, प्रभावी रूप से बिना रीडायरेक्ट के एक अलग पेज परोसता है। ब्राउज़र में URL वही रहता है।
• एक कस्टम Response ऑब्जेक्ट लौटाना: आपको कस्टम सामग्री परोसने की अनुमति देता है, जैसे कि एक त्रुटि पेज या एक विशिष्ट JSON रिस्पांस।

मैचर्स

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

एज रनटाइम

Next.js मिडलवेयर एज रनटाइम पर चलता है, जो एक हल्का जावास्क्रिप्ट रनटाइम वातावरण है जिसे आपके उपयोगकर्ताओं के करीब तैनात किया जा सकता है। यह निकटता विलंबता को कम करती है और आपके एप्लिकेशन के समग्र प्रदर्शन में सुधार करती है, खासकर विश्व स्तर पर वितरित उपयोगकर्ताओं के लिए। एज रनटाइम Vercel के एज नेटवर्क और अन्य संगत प्लेटफार्मों पर उपलब्ध है। एज रनटाइम की कुछ सीमाएँ हैं, विशेष रूप से Node.js API का उपयोग।

व्यावहारिक उदाहरण: मिडलवेयर सुविधाएँ लागू करना

1. प्रमाणीकरण

प्रमाणीकरण मिडलवेयर का उपयोग उन रूट्स की सुरक्षा के लिए किया जा सकता है जिनके लिए उपयोगकर्ताओं को लॉग इन होना आवश्यक है। यहां कुकीज़ का उपयोग करके प्रमाणीकरण को लागू करने का एक उदाहरण दिया गया है:

// 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: ['/dashboard/:path*'],
}

यह मिडलवेयर auth_token कुकी की उपस्थिति की जांच करता है। यदि कुकी नहीं मिलती है, तो उपयोगकर्ता को /login पेज पर रीडायरेक्ट कर दिया जाता है। config.matcher यह निर्दिष्ट करता है कि यह मिडलवेयर केवल /dashboard के अंतर्गत रूट्स के लिए चलना चाहिए।

वैश्विक परिप्रेक्ष्य: विभिन्न क्षेत्रों के उपयोगकर्ताओं की आवश्यकताओं को पूरा करने के लिए विभिन्न प्रमाणीकरण विधियों (जैसे, OAuth, JWT) का समर्थन करने और विभिन्न पहचान प्रदाताओं (जैसे, Google, Facebook, Azure AD) के साथ एकीकृत करने के लिए प्रमाणीकरण लॉजिक को अनुकूलित करें।

2. प्राधिकरण

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

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

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

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

 // उदाहरण: एपीआई से उपयोगकर्ता भूमिकाएँ प्राप्त करें (इसे अपने वास्तविक लॉजिक से बदलें)
 const userResponse = await fetch('https://api.example.com/userinfo', {
 headers: {
 Authorization: `Bearer ${token}`,
 },
 });
 const userData = await userResponse.json();

 if (userData.role !== 'admin') {
 return NextResponse.redirect(new URL('/unauthorized', request.url))
 }

 return NextResponse.next()
}

export const config = {
 matcher: ['/admin/:path*'],
}

यह मिडलवेयर उपयोगकर्ता की भूमिका को पुनः प्राप्त करता है और जांचता है कि क्या उनके पास admin भूमिका है। यदि नहीं, तो उन्हें /unauthorized पेज पर रीडायरेक्ट कर दिया जाता है। यह उदाहरण एक प्लेसहोल्डर API एंडपॉइंट का उपयोग करता है। https://api.example.com/userinfo को अपने वास्तविक प्रमाणीकरण सर्वर एंडपॉइंट से बदलें।

वैश्विक परिप्रेक्ष्य: उपयोगकर्ता डेटा को संभालते समय डेटा गोपनीयता नियमों (जैसे, GDPR, CCPA) का ध्यान रखें। संवेदनशील जानकारी की सुरक्षा के लिए उचित सुरक्षा उपाय लागू करें और स्थानीय कानूनों का अनुपालन सुनिश्चित करें।

3. रीडायरेक्शन

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

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

export function middleware(request: NextRequest) {
 const country = request.geo?.country || 'US'; // जियो-लोकेशन विफल होने पर यूएस को डिफ़ॉल्ट करें

 if (country === 'DE') {
 return NextResponse.redirect(new URL('/de', request.url))
 }

 if (country === 'FR') {
 return NextResponse.redirect(new URL('/fr', request.url))
 }

 return NextResponse.next()
}

export const config = {
 matcher: ['/'],
}

यह मिडलवेयर उपयोगकर्ता के IP पते के आधार पर उनके देश की जांच करता है और उन्हें वेबसाइट के उपयुक्त स्थानीयकृत संस्करण (जर्मनी के लिए /de, फ्रांस के लिए /fr) पर रीडायरेक्ट करता है। यदि जियो-लोकेशन विफल हो जाता है, तो यह यूएस संस्करण पर डिफ़ॉल्ट हो जाता है। ध्यान दें कि यह जियो प्रॉपर्टी के उपलब्ध होने पर निर्भर करता है (उदाहरण के लिए, Vercel पर तैनात होने पर)।

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

4. ए/बी टेस्टिंग

मिडलवेयर का उपयोग ए/बी टेस्टिंग को लागू करने के लिए किया जा सकता है, जिसमें उपयोगकर्ताओं को एक पेज के विभिन्न वेरिएंट्स को बेतरतीब ढंग से सौंपा जाता है और उनके व्यवहार को ट्रैक किया जाता है। यहाँ एक सरल उदाहरण है:

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

function getRandomVariant() {
 return Math.random() < 0.5 ? 'A' : 'B';
}

export function middleware(request: NextRequest) {
 let variant = request.cookies.get('variant')?.value;

 if (!variant) {
 variant = getRandomVariant();
 const response = NextResponse.next();
 response.cookies.set('variant', variant);
 return response;
 }

 if (variant === 'B') {
 return NextResponse.rewrite(new URL('/variant-b', request.url));
 }

 return NextResponse.next();
}

export const config = {
 matcher: ['/'],
}

यह मिडलवेयर उपयोगकर्ताओं को या तो 'A' या 'B' वेरिएंट में असाइन करता है। यदि किसी उपयोगकर्ता के पास पहले से variant कुकी नहीं है, तो एक को बेतरतीब ढंग से असाइन और सेट किया जाता है। वेरिएंट 'B' को असाइन किए गए उपयोगकर्ताओं को /variant-b पेज पर फिर से लिखा जाता है। फिर आप यह निर्धारित करने के लिए प्रत्येक वेरिएंट के प्रदर्शन को ट्रैक करेंगे कि कौन सा अधिक प्रभावी है।

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

5. फीचर फ्लैग्स

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

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

export async function middleware(request: NextRequest) {
 // उदाहरण: एपीआई से फीचर फ्लैग प्राप्त करें
 const featureFlagsResponse = await fetch('https://api.example.com/featureflags', {
 headers: {
 'X-User-Id': 'user123',
 },
 });
 const featureFlags = await featureFlagsResponse.json();

 if (featureFlags.new_feature_enabled) {
 // नई सुविधा सक्षम करें
 return NextResponse.next();
 } else {
 // नई सुविधा अक्षम करें (जैसे, एक वैकल्पिक पेज पर रीडायरेक्ट करें)
 return NextResponse.redirect(new URL('/alternative-page', request.url));
 }
}

export const config = {
 matcher: ['/new-feature'],
}

यह मिडलवेयर एक API से फीचर फ्लैग प्राप्त करता है और जांचता है कि new_feature_enabled फ्लैग सेट है या नहीं। यदि यह है, तो उपयोगकर्ता /new-feature पेज तक पहुंच सकता है। अन्यथा, उन्हें /alternative-page पर रीडायरेक्ट कर दिया जाता है।

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

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

चेनिंग मिडलवेयर

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

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

export function middleware(request: NextRequest) {
 const response = NextResponse.next();

 // पहला मिडलवेयर फ़ंक्शन
 const token = request.cookies.get('auth_token');
 if (!token) {
 return NextResponse.redirect(new URL('/login', request.url))
 }

 // दूसरा मिडलवेयर फ़ंक्शन
 response.headers.set('x-middleware-custom', 'value');

 return response;
}

export const config = {
 matcher: ['/dashboard/:path*'],
}

यह उदाहरण एक में दो मिडलवेयर दिखाता है। पहला प्रमाणीकरण करता है और दूसरा एक कस्टम हेडर सेट करता है।

एनवायरनमेंट वेरिएबल्स का उपयोग करना

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

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

const API_KEY = process.env.API_KEY;

export async function middleware(request: NextRequest) {
 const response = await fetch('https://api.example.com/data', {
 headers: {
 'X-API-Key': API_KEY,
 },
 });

 // ...
}

export const config = {
 matcher: ['/data'],
}

इस उदाहरण में, API_KEY एक एनवायरनमेंट वेरिएबल से पुनर्प्राप्त की जाती है।

त्रुटि प्रबंधन

अप्रत्याशित त्रुटियों को आपके एप्लिकेशन को क्रैश करने से रोकने के लिए अपने मिडलवेयर फ़ंक्शंस में मजबूत त्रुटि प्रबंधन लागू करें। अपवादों को पकड़ने और त्रुटियों को उचित रूप से लॉग करने के लिए try...catch ब्लॉक का उपयोग करें।

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

export async function middleware(request: NextRequest) {
 try {
 const response = await fetch('https://api.example.com/data');
 // ...
 } catch (error) {
 console.error('Error fetching data:', error);
 return NextResponse.error(); // या एक त्रुटि पेज पर रीडायरेक्ट करें
 }
}

export const config = {
 matcher: ['/data'],
}

सर्वश्रेष्ठ अभ्यास

• मिडलवेयर फ़ंक्शंस को हल्का रखें: मिडलवेयर में कम्प्यूटेशनल रूप से गहन संचालन करने से बचें, क्योंकि यह प्रदर्शन को प्रभावित कर सकता है। जटिल प्रसंस्करण को पृष्ठभूमि कार्यों या समर्पित सेवाओं पर ऑफलोड करें।
• मैचर्स का प्रभावी ढंग से उपयोग करें: मिडलवेयर को केवल उन रूट्स पर लागू करें जिन्हें इसकी आवश्यकता है।
• अपने मिडलवेयर का अच्छी तरह से परीक्षण करें: यह सुनिश्चित करने के लिए यूनिट टेस्ट लिखें कि आपके मिडलवेयर फ़ंक्शंस सही तरीके से काम कर रहे हैं।
• मिडलवेयर प्रदर्शन की निगरानी करें: अपने मिडलवेयर फ़ंक्शंस के प्रदर्शन को ट्रैक करने और किसी भी बाधा की पहचान करने के लिए निगरानी उपकरणों का उपयोग करें।
• अपने मिडलवेयर का दस्तावेजीकरण करें: प्रत्येक मिडलवेयर फ़ंक्शन के उद्देश्य और कार्यक्षमता का स्पष्ट रूप से दस्तावेजीकरण करें।
• एज रनटाइम सीमाओं पर विचार करें: एज रनटाइम की सीमाओं से अवगत रहें, जैसे कि Node.js API की कमी। अपने कोड को तदनुसार समायोजित करें।

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

• मिडलवेयर नहीं चल रहा है: यह सुनिश्चित करने के लिए अपने मैचर कॉन्फ़िगरेशन की दोबारा जांच करें कि मिडलवेयर सही रूट्स पर लागू हो रहा है।
• प्रदर्शन संबंधी समस्याएं: धीमे मिडलवेयर फ़ंक्शंस को पहचानें और अनुकूलित करें। प्रदर्शन बाधाओं को इंगित करने के लिए प्रोफाइलिंग टूल का उपयोग करें।
• एज रनटाइम संगतता: सुनिश्चित करें कि आपका कोड एज रनटाइम के साथ संगत है। उन Node.js API का उपयोग करने से बचें जो समर्थित नहीं हैं।
• कुकी संबंधी समस्याएं: सत्यापित करें कि कुकीज़ सही ढंग से सेट और पुनर्प्राप्त की जा रही हैं। domain, path, और secure जैसे कुकी विशेषताओं पर ध्यान दें।
• हेडर टकराव: मिडलवेयर में कस्टम हेडर सेट करते समय संभावित हेडर टकरावों से अवगत रहें। सुनिश्चित करें कि आपके हेडर अनजाने में मौजूदा हेडर्स को ओवरराइड नहीं कर रहे हैं।

निष्कर्ष

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