M

MLOG

हिन्दी

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

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

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

Next.js मिडलवेयर की मूल बातें समझना

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

मिडलवेयर फ़ंक्शन आपकी /pages या /app निर्देशिका में middleware.js या middleware.ts फ़ाइल में रहते हैं (आपके Next.js संस्करण और सेटअप के आधार पर)। उन्हें इनकमिंग अनुरोध का प्रतिनिधित्व करने वाला एक NextRequest ऑब्जेक्ट प्राप्त होता है और वे बाद के व्यवहार को नियंत्रित करने के लिए एक NextResponse ऑब्जेक्ट लौटा सकते हैं।

उदाहरण: बेसिक ऑथेंटिकेशन मिडलवेयर

यह उदाहरण एक साधारण प्रमाणीकरण जांच को दर्शाता है। यदि उपयोगकर्ता प्रमाणित नहीं है (उदाहरण के लिए, कुकी में कोई मान्य टोकन नहीं है), तो उन्हें लॉगिन पृष्ठ पर रीडायरेक्ट कर दिया जाता है।


import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const authToken = request.cookies.get('authToken')

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

  return NextResponse.next()
}

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

यह मिडलवेयर केवल उन मार्गों के लिए चलेगा जो /protected/:path* से मेल खाते हैं। यह एक authToken कुकी की उपस्थिति की जाँच करता है। यदि कुकी गुम है, तो उपयोगकर्ता को /login पृष्ठ पर रीडायरेक्ट कर दिया जाता है। अन्यथा, अनुरोध को NextResponse.next() का उपयोग करके सामान्य रूप से आगे बढ़ने की अनुमति है।

उन्नत अनुरोध संशोधन पैटर्न

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

1. कुकीज़ के साथ ए/बी परीक्षण

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

उदाहरण: लैंडिंग पृष्ठ का ए/बी परीक्षण


import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const VARIANT_A = 'variantA'
const VARIANT_B = 'variantB'

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

  if (!variant) {
    // Randomly assign a variant
    variant = Math.random() < 0.5 ? VARIANT_A : VARIANT_B
    const response = NextResponse.next()
    response.cookies.set('variant', variant)
    return response
  }

  if (variant === VARIANT_A) {
    return NextResponse.rewrite(new URL('/variant-a', request.url))
  } else if (variant === VARIANT_B) {
    return NextResponse.rewrite(new URL('/variant-b', request.url))
  }

  return NextResponse.next()
}

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

इस उदाहरण में, जब कोई उपयोगकर्ता पहली बार रूट पथ (/) पर जाता है, तो मिडलवेयर उन्हें यादृच्छिक रूप से variantA या variantB को असाइन करता है। यह संस्करण एक कुकी में संग्रहीत है। उसी उपयोगकर्ता से बाद के अनुरोधों को उनके असाइन किए गए संस्करण के आधार पर /variant-a या /variant-b पर फिर से लिखा जाएगा। यह आपको विभिन्न लैंडिंग पृष्ठों को परोसने और यह ट्रैक करने की अनुमति देता है कि कौन सा बेहतर प्रदर्शन करता है। सुनिश्चित करें कि आपके Next.js एप्लिकेशन में /variant-a और /variant-b के लिए मार्ग परिभाषित हैं।

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

2. URL पुनर्लेखन के साथ स्थानीयकरण (i18n)

वैश्विक दर्शकों तक पहुँचने के लिए अंतर्राष्ट्रीयकरण (i18n) आवश्यक है। मिडलवेयर का उपयोग स्वचालित रूप से उपयोगकर्ता की पसंदीदा भाषा का पता लगाने और उन्हें आपकी साइट के उपयुक्त स्थानीयकृत संस्करण पर रीडायरेक्ट करने के लिए किया जा सकता है।

उदाहरण: Accept-Language हेडर के आधार पर रीडायरेक्ट करना


import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const SUPPORTED_LANGUAGES = ['en', 'fr', 'es', 'de']
const DEFAULT_LANGUAGE = 'en'

function getPreferredLanguage(request: NextRequest): string {
  const acceptLanguage = request.headers.get('accept-language')
  if (!acceptLanguage) {
    return DEFAULT_LANGUAGE
  }

  const languages = acceptLanguage.split(',').map((lang) => lang.split(';')[0].trim())

  for (const lang of languages) {
    if (SUPPORTED_LANGUAGES.includes(lang)) {
      return lang
    }
  }

  return DEFAULT_LANGUAGE
}

export function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname

  // Check if there's an existing locale in the pathname
  if (
    SUPPORTED_LANGUAGES.some(
      (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
    )
  ) {
    return NextResponse.next()
  }

  const preferredLanguage = getPreferredLanguage(request)

  return NextResponse.redirect(
    new URL(`/${preferredLanguage}${pathname}`, request.url)
  )
}

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)'
  ],
}

यह मिडलवेयर अनुरोध से Accept-Language हेडर निकालता है और उपयोगकर्ता की पसंदीदा भाषा निर्धारित करता है। यदि URL में पहले से ही कोई भाषा उपसर्ग नहीं है (उदाहरण के लिए, /en/about), तो मिडलवेयर उपयोगकर्ता को उपयुक्त स्थानीयकृत URL (उदाहरण के लिए, फ्रेंच के लिए /fr/about) पर रीडायरेक्ट करता है। सुनिश्चित करें कि आपके पास विभिन्न लोकेल के लिए अपनी /pages या /app निर्देशिका में उपयुक्त फ़ोल्डर संरचना है। उदाहरण के लिए, आपको एक /pages/en/about.js और /pages/fr/about.js फ़ाइल की आवश्यकता होगी।

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

3. फ़ीचर फ़्लैग

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

उदाहरण: बीटा सुविधा को सक्षम करना


import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const BETA_FEATURE_ENABLED = process.env.BETA_FEATURE_ENABLED === 'true'

export function middleware(request: NextRequest) {
  if (BETA_FEATURE_ENABLED && request.nextUrl.pathname.startsWith('/new-feature')) {
    return NextResponse.next()
  }

  // Optionally redirect to a "feature unavailable" page
  return NextResponse.rewrite(new URL('/feature-unavailable', request.url))
}

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

यह मिडलवेयर BETA_FEATURE_ENABLED पर्यावरण चर के मान की जांच करता है। यदि यह true पर सेट है और उपयोगकर्ता /new-feature के तहत किसी मार्ग तक पहुंचने का प्रयास कर रहा है, तो अनुरोध को आगे बढ़ने की अनुमति है। अन्यथा, उपयोगकर्ता को /feature-unavailable पृष्ठ पर रीडायरेक्ट कर दिया जाता है। विभिन्न वातावरणों (विकास, मंचन, उत्पादन) के लिए पर्यावरण चर को उचित रूप से कॉन्फ़िगर करना याद रखें।

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

4. डिवाइस डिटेक्शन और एडेप्टिव रूटिंग

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

उदाहरण: मोबाइल उपयोगकर्ताओं को मोबाइल-अनुकूलित सबडोमेन पर रीडायरेक्ट करना


import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { device } from 'detection'

export function middleware(request: NextRequest) {
  const userAgent = request.headers.get('user-agent')

  if (userAgent) {
    const deviceType = device(userAgent)

    if (deviceType.type === 'phone') {
      const mobileUrl = new URL(request.url)
      mobileUrl.hostname = 'm.example.com'
      return NextResponse.redirect(mobileUrl)
    }
  }

  return NextResponse.next()
}

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

यह उदाहरण User-Agent हेडर के आधार पर उपयोगकर्ता के डिवाइस प्रकार को निर्धारित करने के लिए detection लाइब्रेरी का उपयोग करता है। यदि उपयोगकर्ता मोबाइल फोन पर है, तो उन्हें m.example.com सबडोमेन पर रीडायरेक्ट कर दिया जाता है (यह मानते हुए कि आपके पास वहां होस्ट की गई अपनी साइट का मोबाइल-अनुकूलित संस्करण है)। detection पैकेज को इंस्टॉल करना याद रखें: npm install detection।

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

5. अनुरोध हेडर संवर्धन

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

उदाहरण: अनुरोध आईडी जोड़ना


import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { v4 as uuidv4 } from 'uuid'

export function middleware(request: NextRequest) {
  const requestId = uuidv4()
  const response = NextResponse.next()
  response.headers.set('x-request-id', requestId)
  return response
}

export const config = {
  matcher: ['/api/:path*'], // Only apply to API routes
}

यह मिडलवेयर uuid लाइब्रेरी का उपयोग करके एक अद्वितीय अनुरोध आईडी उत्पन्न करता है और इसे x-request-id हेडर में जोड़ता है। इस आईडी का उपयोग फिर लॉगिंग, ट्रेसिंग और डीबगिंग उद्देश्यों के लिए किया जा सकता है। uuid पैकेज को इंस्टॉल करना याद रखें: npm install uuid।

वैश्विक विचार: कस्टम हेडर जोड़ते समय, हेडर आकार सीमा के प्रति सचेत रहें। इन सीमाओं को पार करने से अप्रत्याशित त्रुटियां हो सकती हैं। इसके अलावा, सुनिश्चित करें कि हेडर में जोड़ी गई कोई भी संवेदनशील जानकारी ठीक से सुरक्षित है, खासकर यदि आपका एप्लिकेशन रिवर्स प्रॉक्सी या CDN के पीछे है।

6. सुरक्षा संवर्द्धन: दर सीमित करना

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

उदाहरण: एक साधारण स्टोर का उपयोग करके बेसिक रेट लिमिटिंग


import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const requestCounts: { [ip: string]: number } = {}
const WINDOW_SIZE_MS = 60000; // 1 minute
const MAX_REQUESTS_PER_WINDOW = 100;

export function middleware(request: NextRequest) {
  const clientIP = request.ip || '127.0.0.1' // Get client IP, default to localhost for local testing

  if (!requestCounts[clientIP]) {
    requestCounts[clientIP] = 0;
  }

  requestCounts[clientIP]++;

  if (requestCounts[clientIP] > MAX_REQUESTS_PER_WINDOW) {
    return new NextResponse(
      JSON.stringify({ message: 'Too many requests' }),
      { status: 429, headers: { 'Content-Type': 'application/json' } }
    );
  }

  // Reset count after window
  setTimeout(() => {
    requestCounts[clientIP]--;
    if (requestCounts[clientIP] <= 0) {
        delete requestCounts[clientIP];
    }
  }, WINDOW_SIZE_MS);

  return NextResponse.next();
}

export const config = {
  matcher: ['/api/:path*'], // Apply to all API routes
}

यह उदाहरण प्रत्येक आईपी ​​पते से अनुरोधों की संख्या को ट्रैक करने के लिए एक साधारण इन-मेमोरी स्टोर (requestCounts) बनाए रखता है। यदि कोई क्लाइंट WINDOW_SIZE_MS के भीतर MAX_REQUESTS_PER_WINDOW से अधिक है, तो मिडलवेयर एक 429 बहुत अधिक अनुरोध त्रुटि देता है। महत्वपूर्ण: यह एक सरलीकृत उदाहरण है और उत्पादन वातावरण के लिए उपयुक्त नहीं है क्योंकि यह स्केल नहीं करता है और सेवा से इनकार के हमलों के प्रति संवेदनशील है। उत्पादन उपयोग के लिए, Redis या एक समर्पित दर-सीमित सेवा जैसे अधिक मजबूत दर-सीमित समाधान का उपयोग करने पर विचार करें।

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

एज केस और संभावित कमियां

जबकि मिडलवेयर एक शक्तिशाली उपकरण है, इसकी सीमाओं और संभावित कमियों के बारे में पता होना आवश्यक है:

Next.js मिडलवेयर का उपयोग करने के लिए सर्वोत्तम अभ्यास

Next.js मिडलवेयर के लाभों को अधिकतम करने और संभावित समस्याओं से बचने के लिए, इन सर्वोत्तम प्रथाओं का पालन करें:

निष्कर्ष

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