Next.js മിഡിൽവെയർ എഡ്ജ് കേസുകൾ: റിക്വസ്റ്റ് മോഡിഫിക്കേഷൻ പാറ്റേണുകളിൽ വൈദഗ്ദ്ധ്യം നേടാം

നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ റൂട്ടുകളിലേക്ക് എത്തുന്നതിനുമുമ്പ് റിക്വസ്റ്റുകളെ തടസ്സപ്പെടുത്താനും മാറ്റം വരുത്താനുമുള്ള ശക്തമായ ഒരു സംവിധാനമാണ് Next.js മിഡിൽവെയർ നൽകുന്നത്. ഈ കഴിവ്, ലളിതമായ ഓതന്റിക്കേഷൻ പരിശോധനകൾ മുതൽ സങ്കീർണ്ണമായ A/B ടെസ്റ്റിംഗ് സാഹചര്യങ്ങളും ഇന്റർനാഷണലൈസേഷൻ സ്ട്രാറ്റജികളും വരെ നിരവധി സാധ്യതകൾ തുറക്കുന്നു. എന്നിരുന്നാലും, മിഡിൽവെയർ ഫലപ്രദമായി ഉപയോഗിക്കുന്നതിന് അതിന്റെ എഡ്ജ് കേസുകളെയും സാധ്യതയുള്ള അപകടങ്ങളെയും കുറിച്ച് ആഴത്തിലുള്ള ധാരണ ആവശ്യമാണ്. ഈ സമഗ്രമായ ഗൈഡ്, ശക്തവും മികച്ച പ്രകടനവുമുള്ള Next.js ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ നിങ്ങളെ സഹായിക്കുന്നതിന് പ്രായോഗിക ഉദാഹരണങ്ങളും പ്രവർത്തനക്ഷമമായ ഉൾക്കാഴ്ചകളും നൽകിക്കൊണ്ട് നൂതന റിക്വസ്റ്റ് മോഡിഫിക്കേഷൻ പാറ്റേണുകൾ പര്യവേക്ഷണം ചെയ്യുന്നു.

Next.js മിഡിൽവെയറിന്റെ അടിസ്ഥാനകാര്യങ്ങൾ മനസ്സിലാക്കാം

നൂതന പാറ്റേണുകളിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, Next.js മിഡിൽവെയറിന്റെ അടിസ്ഥാനകാര്യങ്ങൾ നമുക്ക് പുനരവലോകനം ചെയ്യാം. ഒരു റിക്വസ്റ്റ് പൂർത്തിയാകുന്നതിന് മുമ്പാണ് മിഡിൽവെയർ ഫംഗ്ഷനുകൾ എക്സിക്യൂട്ട് ചെയ്യുന്നത്, ഇത് നിങ്ങളെ ഇനിപ്പറയുന്നവ ചെയ്യാൻ അനുവദിക്കുന്നു:

• URL-കൾ റീറൈറ്റ് ചെയ്യുക: നിർദ്ദിഷ്ട മാനദണ്ഡങ്ങളെ അടിസ്ഥാനമാക്കി ഉപയോക്താക്കളെ വ്യത്യസ്ത പേജുകളിലേക്ക് റീഡയറക്ട് ചെയ്യുക.
• ഉപയോക്താക്കളെ റീഡയറക്ട് ചെയ്യുക: ഉപയോക്താക്കളെ പൂർണ്ണമായും വ്യത്യസ്ത URL-കളിലേക്ക് അയയ്ക്കുക, ഇത് പലപ്പോഴും ഓതന്റിക്കേഷൻ അല്ലെങ്കിൽ ഓതറൈസേഷൻ ആവശ്യങ്ങൾക്കാണ്.
• ഹെഡറുകൾ മാറ്റം വരുത്തുക: HTTP ഹെഡറുകൾ ചേർക്കുക, നീക്കം ചെയ്യുക, അല്ലെങ്കിൽ അപ്ഡേറ്റ് ചെയ്യുക.
• നേരിട്ട് പ്രതികരിക്കുക: Next.js റൂട്ടുകളെ മറികടന്ന് മിഡിൽവെയറിൽ നിന്ന് നേരിട്ട് ഒരു റെസ്പോൺസ് നൽകുക.

മിഡിൽവെയർ ഫംഗ്ഷനുകൾ നിങ്ങളുടെ /pages അല്ലെങ്കിൽ /app ഡയറക്ടറിയിലെ (നിങ്ങളുടെ Next.js പതിപ്പും സെറ്റപ്പും അനുസരിച്ച്) middleware.js അല്ലെങ്കിൽ middleware.ts ഫയലിലാണ് സ്ഥിതി ചെയ്യുന്നത്. ഇൻകമിംഗ് റിക്വസ്റ്റിനെ പ്രതിനിധീകരിക്കുന്ന ഒരു 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. കുക്കികൾ ഉപയോഗിച്ചുള്ള A/B ടെസ്റ്റിംഗ്

ഉപയോക്തൃ അനുഭവങ്ങൾ മെച്ചപ്പെടുത്തുന്നതിനുള്ള ഒരു നിർണായക സാങ്കേതികതയാണ് A/B ടെസ്റ്റിംഗ്. ഉപയോക്താക്കളെ നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ വ്യത്യസ്ത പതിപ്പുകളിലേക്ക് ക്രമരഹിതമായി നിയോഗിക്കാനും അവരുടെ പെരുമാറ്റം ട്രാക്ക് ചെയ്യാനും മിഡിൽവെയർ ഉപയോഗിക്കാം. ഉപയോക്താവിന് നൽകിയിട്ടുള്ള വേരിയന്റ് നിലനിർത്താൻ ഈ പാറ്റേൺ കുക്കികളെ ആശ്രയിക്കുന്നു.

ഉദാഹരണം: ഒരു ലാൻഡിംഗ് പേജിന്റെ A/B ടെസ്റ്റിംഗ്

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 എന്നിവയ്ക്കായി റൂട്ടുകൾ നിർവചിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക.

ആഗോള പരിഗണനകൾ: A/B ടെസ്റ്റിംഗ് നടത്തുമ്പോൾ, പ്രാദേശിക വ്യതിയാനങ്ങൾ പരിഗണിക്കുക. വടക്കേ അമേരിക്കയിൽ ഫലപ്രദമായ ഒരു ഡിസൈൻ ഏഷ്യയിൽ അത്ര ഫലപ്രദമായിരിക്കില്ല. നിർദ്ദിഷ്ട പ്രദേശങ്ങൾക്കായി A/B ടെസ്റ്റ് ക്രമീകരിക്കുന്നതിന് നിങ്ങൾക്ക് ജിയോലൊക്കേഷൻ ഡാറ്റ (IP വിലാസം വഴിയോ ഉപയോക്തൃ മുൻഗണനകൾ വഴിയോ ലഭിക്കുന്നത്) ഉപയോഗിക്കാം.

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`.

ആഗോള പരിഗണനകൾ: നിങ്ങളുടെ ഉപകരണ കണ്ടെത്തൽ ലോജിക് ഉപകരണ ഉപയോഗത്തിലെ പ്രാദേശിക വ്യതിയാനങ്ങൾ കണക്കിലെടുക്കുന്നുവെന്ന് ഉറപ്പാക്കുക. ഉദാഹരണത്തിന്, ചില വികസ്വര രാജ്യങ്ങളിൽ ഫീച്ചർ ഫോണുകൾ ഇപ്പോഴും വ്യാപകമാണ്. കൂടുതൽ ശക്തമായ ഒരു പരിഹാരത്തിനായി യൂസർ-ഏജന്റ് ഡിറ്റക്ഷനും റെസ്പോൺസീവ് ഡിസൈൻ ടെക്നിക്കുകളും സംയോജിപ്പിച്ച് ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.

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
}

ഈ ഉദാഹരണം ഓരോ IP വിലാസത്തിൽ നിന്നുമുള്ള അഭ്യർത്ഥനകളുടെ എണ്ണം ട്രാക്ക് ചെയ്യുന്നതിന് ഒരു ലളിതമായ ഇൻ-മെമ്മറി സ്റ്റോർ (requestCounts) പരിപാലിക്കുന്നു. ഒരു ക്ലയന്റ് WINDOW_SIZE_MS-നുള്ളിൽ MAX_REQUESTS_PER_WINDOW കവിയുന്നുവെങ്കിൽ, മിഡിൽവെയർ ഒരു 429 Too Many Requests പിശക് നൽകുന്നു. പ്രധാനം: ഇത് ഒരു ലളിതമായ ഉദാഹരണമാണ്, ഇത് സ്കെയിൽ ചെയ്യാത്തതിനാലും ഡിനയൽ-ഓഫ്-സർവീസ് ആക്രമണങ്ങൾക്ക് സാധ്യതയുള്ളതിനാലും പ്രൊഡക്ഷൻ എൻവയോൺമെന്റുകൾക്ക് അനുയോജ്യമല്ല. പ്രൊഡക്ഷൻ ഉപയോഗത്തിനായി, Redis അല്ലെങ്കിൽ ഒരു സമർപ്പിത റേറ്റ്-ലിമിറ്റിംഗ് സേവനം പോലുള്ള കൂടുതൽ കരുത്തുറ്റ റേറ്റ്-ലിമിറ്റിംഗ് പരിഹാരം ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.

ആഗോള പരിഗണനകൾ: റേറ്റ്-ലിമിറ്റിംഗ് തന്ത്രങ്ങൾ നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ പ്രത്യേക സ്വഭാവസവിശേഷതകൾക്കും ഉപയോക്താക്കളുടെ ഭൂമിശാസ്ത്രപരമായ വിതരണത്തിനും അനുസരിച്ച് ക്രമീകരിക്കണം. വ്യത്യസ്ത പ്രദേശങ്ങൾക്കോ ഉപയോക്തൃ വിഭാഗങ്ങൾക്കോ വ്യത്യസ്ത റേറ്റ് പരിധികൾ ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.

എഡ്ജ് കേസുകളും സാധ്യതയുള്ള അപകടങ്ങളും

മിഡിൽവെയർ ഒരു ശക്തമായ ഉപകരണമാണെങ്കിലും, അതിന്റെ പരിമിതികളെയും സാധ്യതയുള്ള അപകടങ്ങളെയും കുറിച്ച് ബോധവാന്മാരായിരിക്കേണ്ടത് അത്യാവശ്യമാണ്:

• പ്രകടനത്തെ ബാധിക്കുന്നത്: മിഡിൽവെയർ ഓരോ അഭ്യർത്ഥനയ്ക്കും ഓവർഹെഡ് ചേർക്കുന്നു. മിഡിൽവെയറിൽ കമ്പ്യൂട്ടേഷണലായി ചെലവേറിയ പ്രവർത്തനങ്ങൾ ചെയ്യുന്നത് ഒഴിവാക്കുക, കാരണം ഇത് പ്രകടനത്തെ കാര്യമായി ബാധിക്കും. പ്രകടനത്തിലെ തടസ്സങ്ങൾ തിരിച്ചറിയാനും ഒപ്റ്റിമൈസ് ചെയ്യാനും നിങ്ങളുടെ മിഡിൽവെയർ പ്രൊഫൈൽ ചെയ്യുക.
• സങ്കീർണ്ണത: മിഡിൽവെയർ അമിതമായി ഉപയോഗിക്കുന്നത് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ മനസ്സിലാക്കാനും പരിപാലിക്കാനും ബുദ്ധിമുട്ടാക്കും. മിഡിൽവെയർ വിവേകത്തോടെ ഉപയോഗിക്കുക, ഓരോ മിഡിൽവെയർ ഫംഗ്ഷനും വ്യക്തവും നിർവചിക്കപ്പെട്ടതുമായ ഒരു ലക്ഷ്യമുണ്ടെന്ന് ഉറപ്പാക്കുക.
• ടെസ്റ്റിംഗ്: മിഡിൽവെയർ ടെസ്റ്റ് ചെയ്യുന്നത് വെല്ലുവിളി നിറഞ്ഞതാണ്, കാരണം ഇതിന് HTTP അഭ്യർത്ഥനകൾ സിമുലേറ്റ് ചെയ്യുകയും തത്ഫലമായുണ്ടാകുന്ന പ്രതികരണങ്ങൾ പരിശോധിക്കുകയും വേണം. നിങ്ങളുടെ മിഡിൽവെയർ ഫംഗ്ഷനുകൾക്കായി സമഗ്രമായ യൂണിറ്റും ഇന്റഗ്രേഷൻ ടെസ്റ്റുകളും എഴുതാൻ Jest, Supertest പോലുള്ള ടൂളുകൾ ഉപയോഗിക്കുക.
• കുക്കി മാനേജ്മെന്റ്: മിഡിൽവെയറിൽ കുക്കികൾ സജ്ജീകരിക്കുമ്പോൾ ശ്രദ്ധിക്കുക, കാരണം ഇത് കാഷിംഗ് സ്വഭാവത്തെ ബാധിക്കും. കുക്കി അധിഷ്ഠിത കാഷിംഗിന്റെ പ്രത്യാഘാതങ്ങൾ നിങ്ങൾ മനസ്സിലാക്കുന്നുവെന്നും അതിനനുസരിച്ച് നിങ്ങളുടെ കാഷെ ഹെഡറുകൾ കോൺഫിഗർ ചെയ്യുന്നുവെന്നും ഉറപ്പാക്കുക.
• എൻവയോൺമെന്റ് വേരിയബിളുകൾ: നിങ്ങളുടെ മിഡിൽവെയറിൽ ഉപയോഗിക്കുന്ന എല്ലാ എൻവയോൺമെന്റ് വേരിയബിളുകളും വ്യത്യസ്ത എൻവയോൺമെന്റുകൾക്ക് (ഡെവലപ്‌മെന്റ്, സ്റ്റേജിംഗ്, പ്രൊഡക്ഷൻ) ശരിയായി കോൺഫിഗർ ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. നിങ്ങളുടെ എൻവയോൺമെന്റ് വേരിയബിളുകൾ നിയന്ത്രിക്കുന്നതിന് Dotenv പോലുള്ള ഒരു ടൂൾ ഉപയോഗിക്കുക.
• എഡ്ജ് ഫംഗ്ഷൻ പരിധികൾ: മിഡിൽവെയർ എഡ്ജ് ഫംഗ്ഷനുകളായാണ് പ്രവർത്തിക്കുന്നതെന്നും, അവയ്ക്ക് എക്സിക്യൂഷൻ സമയം, മെമ്മറി ഉപയോഗം, ബണ്ടിൽ ചെയ്ത കോഡ് വലുപ്പം എന്നിവയിൽ പരിമിതികളുണ്ടെന്നും ഓർമ്മിക്കുക. നിങ്ങളുടെ മിഡിൽവെയർ ഫംഗ്ഷനുകൾ ഭാരം കുറഞ്ഞതും കാര്യക്ഷമവുമായി നിലനിർത്തുക.

Next.js മിഡിൽവെയർ ഉപയോഗിക്കുന്നതിനുള്ള മികച്ച രീതികൾ

Next.js മിഡിൽവെയറിന്റെ പ്രയോജനങ്ങൾ പരമാവധിയാക്കാനും സാധ്യതയുള്ള പ്രശ്നങ്ങൾ ഒഴിവാക്കാനും, ഈ മികച്ച രീതികൾ പിന്തുടരുക:

• ലളിതമായി സൂക്ഷിക്കുക: ഓരോ മിഡിൽവെയർ ഫംഗ്ഷനും ഒരൊറ്റ, വ്യക്തമായി നിർവചിക്കപ്പെട്ട ഉത്തരവാദിത്തം ഉണ്ടായിരിക്കണം. ഒന്നിലധികം ജോലികൾ ചെയ്യുന്ന അമിതമായി സങ്കീർണ്ണമായ മിഡിൽവെയർ ഫംഗ്ഷനുകൾ സൃഷ്ടിക്കുന്നത് ഒഴിവാക്കുക.
• പ്രകടനത്തിനായി ഒപ്റ്റിമൈസ് ചെയ്യുക: പ്രകടനത്തിലെ തടസ്സങ്ങൾ ഒഴിവാക്കാൻ മിഡിൽവെയറിൽ ചെയ്യുന്ന പ്രോസസ്സിംഗിന്റെ അളവ് കുറയ്ക്കുക. ആവർത്തിച്ചുള്ള കണക്കുകൂട്ടലുകളുടെ ആവശ്യം കുറയ്ക്കാൻ കാഷിംഗ് തന്ത്രങ്ങൾ ഉപയോഗിക്കുക.
• സമഗ്രമായി പരീക്ഷിക്കുക: നിങ്ങളുടെ മിഡിൽവെയർ ഫംഗ്ഷനുകൾ പ്രതീക്ഷിച്ചപോലെ പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ അവയ്ക്ക് സമഗ്രമായ യൂണിറ്റും ഇന്റഗ്രേഷൻ ടെസ്റ്റുകളും എഴുതുക.
• നിങ്ങളുടെ കോഡ് ഡോക്യുമെന്റ് ചെയ്യുക: പരിപാലനം മെച്ചപ്പെടുത്തുന്നതിന് ഓരോ മിഡിൽവെയർ ഫംഗ്ഷന്റെയും ഉദ്ദേശ്യവും പ്രവർത്തനവും വ്യക്തമായി രേഖപ്പെടുത്തുക.
• നിങ്ങളുടെ ആപ്ലിക്കേഷൻ നിരീക്ഷിക്കുക: നിങ്ങളുടെ മിഡിൽവെയർ ഫംഗ്ഷനുകളുടെ പ്രകടനവും പിശക് നിരക്കുകളും ട്രാക്ക് ചെയ്യുന്നതിന് നിരീക്ഷണ ടൂളുകൾ ഉപയോഗിക്കുക.
• എക്സിക്യൂഷൻ ഓർഡർ മനസ്സിലാക്കുക: മിഡിൽവെയർ ഫംഗ്ഷനുകൾ എക്സിക്യൂട്ട് ചെയ്യുന്ന ക്രമത്തെക്കുറിച്ച് ബോധവാന്മാരായിരിക്കുക, കാരണം ഇത് അവയുടെ സ്വഭാവത്തെ ബാധിക്കും.
• എൻവയോൺമെന്റ് വേരിയബിളുകൾ വിവേകത്തോടെ ഉപയോഗിക്കുക: വ്യത്യസ്ത എൻവയോൺമെന്റുകൾക്കായി നിങ്ങളുടെ മിഡിൽവെയർ ഫംഗ്ഷനുകൾ കോൺഫിഗർ ചെയ്യാൻ എൻവയോൺമെന്റ് വേരിയബിളുകൾ ഉപയോഗിക്കുക.

ഉപസംഹാരം

Next.js മിഡിൽവെയർ അഭ്യർത്ഥനകൾ പരിഷ്കരിക്കുന്നതിനും നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ സ്വഭാവം എഡ്ജിൽ ഇഷ്ടാനുസൃതമാക്കുന്നതിനും ശക്തമായ ഒരു മാർഗം നൽകുന്നു. ഈ ഗൈഡിൽ ചർച്ച ചെയ്ത നൂതന അഭ്യർത്ഥന പരിഷ്കരണ പാറ്റേണുകൾ മനസ്സിലാക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് കരുത്തുറ്റതും പ്രകടനം കാഴ്ചവെക്കുന്നതും ആഗോളതലത്തിൽ ബോധമുള്ളതുമായ Next.js ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ കഴിയും. എഡ്ജ് കേസുകളും സാധ്യതയുള്ള അപകടങ്ങളും ശ്രദ്ധാപൂർവ്വം പരിഗണിക്കാനും, നിങ്ങളുടെ മിഡിൽവെയർ ഫംഗ്ഷനുകൾ വിശ്വസനീയവും പരിപാലിക്കാൻ കഴിയുന്നതുമാണെന്ന് ഉറപ്പാക്കാൻ മുകളിൽ വിവരിച്ച മികച്ച രീതികൾ പിന്തുടരാനും ഓർമ്മിക്കുക. അസാധാരണമായ ഉപയോക്തൃ അനുഭവങ്ങൾ സൃഷ്ടിക്കുന്നതിനും നിങ്ങളുടെ വെബ് ആപ്ലിക്കേഷനുകൾക്കായി പുതിയ സാധ്യതകൾ തുറക്കുന്നതിനും മിഡിൽവെയറിന്റെ ശക്തി സ്വീകരിക്കുക.