Next.js Middleware zanjiri: Ketma-ket so'rovlarni qayta ishlash tushuntirildi

Next.js middleware ilovangiz marshrutlariga yetib borgunga qadar kiruvchi so'rovlarni ushlab turish va o'zgartirish uchun kuchli mexanizmni taqdim etadi. Middleware funksiyalari edge'da ishlaydi, bu esa yuqori samarali va global miqyosda tarqalgan so'rovlarni qayta ishlash imkonini beradi. Next.js middleware'ning asosiy kuchli tomonlaridan biri bu uning zanjir shaklida ulanish qobiliyatidir, bu sizga har bir so'rov o'tishi kerak bo'lgan operatsiyalar ketma-ketligini belgilash imkonini beradi. Bu ketma-ket qayta ishlash autentifikatsiya, avtorizatsiya, so'rovni o'zgartirish va A/B testlash kabi vazifalar uchun juda muhimdir.

Next.js Middleware'ni tushunish

Zanjirga sho'ng'ishdan oldin, keling, Next.js middleware'ning asoslarini takrorlab o'taylik. Middleware in Next.js — bu so'rov bajarilishidan oldin ishga tushadigan funksiyalardir. Ular kiruvchi so'rovga kirish imkoniyatiga ega va quyidagi amallarni bajarishi mumkin:

• Qayta yozish (Rewriting): Boshqa sahifani ko'rsatish uchun URL'ni o'zgartirish.
• Yo'naltirish (Redirecting): Foydalanuvchini boshqa URL manziliga yuborish.
• Sarlavhalarni o'zgartirish (Modifying headers): So'rov va javob sarlavhalarini qo'shish yoki o'zgartirish.
• Autentifikatsiya (Authenticating): Foydalanuvchi shaxsini tasdiqlash va kirish huquqini berish.
• Avtorizatsiya (Authorizing): Muayyan resurslarga kirish uchun foydalanuvchi ruxsatlarini tekshirish.

Middleware funksiyalari loyihangizning ildiz katalogida joylashgan `middleware.ts` (yoki `middleware.js`) faylida aniqlanadi. Middleware funksiyasining asosiy tuzilishi quyidagicha:

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

// Agar ichida `await` ishlatilsa, bu funksiyani `async` deb belgilash mumkin
export function middleware(request: NextRequest) {
  // ... bu yerda sizning middleware mantig'ingiz ...
  return NextResponse.next()
}

// Qo'shimcha ma'lumot olish uchun quyidagi "Mos keluvchi yo'llar" bo'limiga qarang
export const config = {
  matcher: '/about/:path*',
}

            

              
                Copy
              
            
          

Ushbu tuzilmaning asosiy komponentlari quyidagilardan iborat:

• `middleware` funksiyasi: Bu har bir mos keluvchi so'rov uchun ishga tushadigan asosiy funksiyadir. U kiruvchi so'rovni ifodalovchi `NextRequest` obyektini qabul qiladi.
• `NextResponse`: Bu obyekt sizga so'rov yoki javobni o'zgartirishga imkon beradi. `NextResponse.next()` so'rovni keyingi middleware yoki marshrut ishlovchisiga o'tkazadi. Boshqa usullarga `NextResponse.redirect()` va `NextResponse.rewrite()` kiradi.
• `config`: Bu obyekt middleware qo'llanilishi kerak bo'lgan yo'llar yoki naqshlarni belgilaydi. `matcher` xususiyati middleware qaysi marshrutlarga qo'llanilishini aniqlash uchun yo'l nomlaridan foydalanadi.

Zanjirning kuchi: Ketma-ket so'rovlarni qayta ishlash

Middleware zanjiri har bir so'rov uchun ma'lum bir tartibda bajariladigan operatsiyalar ketma-ketligini yaratishga imkon beradi. Bu, ayniqsa, bir nechta tekshiruv va o'zgartirishlar talab qilinadigan murakkab ish jarayonlari uchun foydalidir. Sizga quyidagilarni bajarish kerak bo'lgan stsenariyni tasavvur qiling:

1. Foydalanuvchini autentifikatsiya qilish.
2. Foydalanuvchiga ma'lum bir resursga kirishga ruxsat berish.
3. Foydalanuvchiga oid ma'lumotlarni kiritish uchun so'rov sarlavhalarini o'zgartirish.

Middleware zanjiri yordamida siz ushbu qadamlarning har birini alohida middleware funksiyalari sifatida amalga oshirishingiz va ularning to'g'ri tartibda bajarilishini ta'minlashingiz mumkin.

Middleware zanjirini amalga oshirish

Next.js o'rnatilgan zanjir mexanizmini to'g'ridan-to'g'ri taqdim etmasa-da, siz bitta `middleware.ts` faylidan foydalanib va mantig'ingizni shunga mos ravishda tuzib, zanjirga erishishingiz mumkin. `NextResponse.next()` funksiyasi nazoratni qayta ishlash quvuringizdagi keyingi bosqichga o'tkazishning kalitidir.

Mana keng tarqalgan naqsh:

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

async function authenticate(request: NextRequest): Promise<NextResponse | null> {
  // Autentifikatsiya mantig'i (masalan, JWT tokenini tekshirish)
  const token = request.cookies.get('token')

  if (!token) {
    // Agar autentifikatsiyadan o'tmagan bo'lsa, login sahifasiga yo'naltirish
    const url = new URL(`/login`, request.url)
    return NextResponse.redirect(url)
  }

  return NextResponse.next()
}

async function authorize(request: NextRequest): Promise<NextResponse | null> {
  // Avtorizatsiya mantig'i (masalan, foydalanuvchi rollari yoki ruxsatlarini tekshirish)
  const userRole = 'admin'; // Haqiqiy foydalanuvchi rolini olish bilan almashtiring
  const requiredRole = 'admin';

  if (userRole !== requiredRole) {
    // Agar ruxsat berilmagan bo'lsa, ruxsatsiz sahifaga yo'naltirish
    const url = new URL(`/unauthorized`, request.url)
    return NextResponse.redirect(url)
  }

  return NextResponse.next()
}

async function modifyHeaders(request: NextRequest): Promise<NextResponse | null> {
  // So'rov sarlavhalarini o'zgartirish (masalan, foydalanuvchi ID'sini qo'shish)
  const userId = '12345'; // Haqiqiy foydalanuvchi ID'sini olish bilan almashtiring

  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-user-id', userId);

  const response = NextResponse.next({request: {headers: requestHeaders}});

  response.headers.set('x-middleware-custom', 'value')

  return response;
}

export async function middleware(request: NextRequest) {
  // Middleware funksiyalarini zanjirga ulash
  const authenticationResult = await authenticate(request);
  if (authenticationResult) return authenticationResult;

  const authorizationResult = await authorize(request);
  if (authorizationResult) return authorizationResult;

  const modifyHeadersResult = await modifyHeaders(request);
  if (modifyHeadersResult) return modifyHeadersResult;

  return NextResponse.next();
}

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

            

              
                Copy
              
            
          

Ushbu misolda:

• Biz uchta alohida middleware funksiyasini aniqlaymiz: `authenticate`, `authorize` va `modifyHeaders`.
• Har bir funksiya ma'lum bir vazifani bajaradi va qayta ishlashni davom ettirish uchun `NextResponse.next()` ni yoki foydalanuvchini yo'naltirish uchun `NextResponse.redirect()` ni qaytaradi.
• `middleware` funksiyasi ushbu funksiyalarni ketma-ket chaqirib va ularning natijalarini tekshirib, bir-biriga zanjir qiladi.
• `config` obyekti ushbu middleware faqat `/protected` yo'li ostidagi marshrutlarga qo'llanilishi kerakligini belgilaydi.

Middleware zanjirlarida xatoliklarni qayta ishlash

Middleware zanjirlarida kutilmagan xatti-harakatlarning oldini olish uchun samarali xatoliklarni qayta ishlash juda muhimdir. Agar middleware funksiyasi xatolikka duch kelsa, u uni to'g'ri hal qilishi va zanjirning uzilishiga yo'l qo'ymasligi kerak. Quyidagi strategiyalarni ko'rib chiqing:

• Try-Catch Bloklari: Har qanday istisnolarni ushlash uchun har bir middleware funksiyasining mantig'ini try-catch blokiga o'rang.
• Xatolik Javoblari: Agar xatolik yuz bersa, ilovani ishdan chiqarish o'rniga, ma'lum bir xatolik javobini (masalan, 401 Unauthorized yoki 500 Internal Server Error) qaytaring.
• Jurnalga yozish (Logging): Nosozliklarni tuzatish va monitoring qilishga yordam berish uchun xatoliklarni jurnalga yozib boring. Batafsil xatolik ma'lumotlarini yozib olish va ijro oqimini kuzatib borish imkoniyatiga ega bo'lgan mustahkam jurnal tizimidan foydalaning.

`authenticate` middleware'da xatoliklarni qayta ishlashga misol:

            async function authenticate(request: NextRequest): Promise<NextResponse | null> {
  try {
    // Autentifikatsiya mantig'i (masalan, JWT tokenini tekshirish)
    const token = request.cookies.get('token')

    if (!token) {
      // Agar autentifikatsiyadan o'tmagan bo'lsa, login sahifasiga yo'naltirish
      const url = new URL(`/login`, request.url)
      return NextResponse.redirect(url)
    }

    // ... keyingi autentifikatsiya qadamlari ...

    return NextResponse.next()
  } catch (error) {
    console.error('Authentication error:', error);
    // Xatolik sahifasiga yo'naltirish yoki 500 xatoligini qaytarish
    const url = new URL(`/error`, request.url)
    return NextResponse.redirect(url)
    //Shu bilan bir qatorda JSON javobini qaytarish
    //return NextResponse.json({ message: 'Authentication failed' }, { status: 401 });
  }
}

            

              
                Copy
              
            
          

Ilg'or zanjirlash usullari

Oddiy ketma-ket qayta ishlashdan tashqari, murakkab stsenariylarni hal qilish uchun yanada ilg'or zanjirlash usullarini qo'llashingiz mumkin:

Shartli zanjirlash

Muayyan shartlarga asoslanib qaysi middleware funksiyalari bajarilishini dinamik ravishda aniqlang. Masalan, foydalanuvchining rolidan yoki so'ralgan resursdan kelib chiqib, turli xil avtorizatsiya qoidalarini qo'llashni xohlashingiz mumkin.

            async function middleware(request: NextRequest) {
  const userRole = 'admin'; // Haqiqiy foydalanuvchi rolini olish bilan almashtiring

  if (userRole === 'admin') {
    // Adminga xos middleware'ni qo'llash
    const authorizationResult = await authorizeAdmin(request);
    if (authorizationResult) return authorizationResult;
  } else {
    // Oddiy foydalanuvchi middleware'ni qo'llash
    const authorizationResult = await authorizeUser(request);
    if (authorizationResult) return authorizationResult;
  }

  return NextResponse.next();
}

            

              
                Copy
              
            
          

Middleware Fabrikalari

Muayyan konfiguratsiyalarga ega middleware funksiyalarini yaratadigan funksiyalar yarating. Bu sizga middleware mantig'ini turli parametrlar bilan qayta ishlatish imkonini beradi.

            function createAuthorizeMiddleware(requiredRole: string) {
  return async function authorize(request: NextRequest): Promise<NextResponse | null> {
    // Avtorizatsiya mantig'i (masalan, foydalanuvchi rollari yoki ruxsatlarini tekshirish)
    const userRole = 'editor'; // Haqiqiy foydalanuvchi rolini olish bilan almashtiring

    if (userRole !== requiredRole) {
      // Agar ruxsat berilmagan bo'lsa, ruxsatsiz sahifaga yo'naltirish
      const url = new URL(`/unauthorized`, request.url)
      return NextResponse.redirect(url)
    }

    return NextResponse.next()
  }
}

export async function middleware(request: NextRequest) {
  const authorizeEditor = createAuthorizeMiddleware('editor');
  const authorizationResult = await authorizeEditor(request);
  if (authorizationResult) return authorizationResult;

  return NextResponse.next();
}

            

              
                Copy
              
            
          

Haqiqiy hayotdagi qo'llash holatlari

Middleware zanjiri Next.js ilovalarida keng ko'lamli stsenariylar uchun qo'llaniladi:

• Autentifikatsiya va Avtorizatsiya: Nozik resurslarni himoya qilish uchun mustahkam autentifikatsiya va avtorizatsiya ish oqimlarini amalga oshiring.
• Funksiya Bayroqlari (Feature Flags): Foydalanuvchi segmentlari yoki A/B testlariga asoslanib funksiyalarni dinamik ravishda yoqing yoki o'chiring. Turli foydalanuvchi guruhlariga funksiyaning turli versiyalarini taqdim eting va ularning ta'sirini o'lchang.
• Mahalliylashtirish: Foydalanuvchining afzal ko'rgan tilini aniqlang va ularni saytning mos mahalliylashtirilgan versiyasiga yo'naltiring. Foydalanuvchining joylashuvi va til afzalliklariga qarab kontent va foydalanuvchi tajribasini moslashtiring.
• So'rovlarni jurnalga yozish: Audit va monitoring maqsadlarida kiruvchi so'rovlar va javoblarni jurnalga yozib boring. Ishlash tahlili uchun so'rov tafsilotlarini, foydalanuvchi ma'lumotlarini va javob vaqtlarini yozib oling.
• Botlarni aniqlash: Ilovangizga kirishdan zararli botlarni aniqlang va bloklang. Qonuniy foydalanuvchilar va avtomatlashtirilgan botlarni farqlash uchun so'rov naqshlari va foydalanuvchi xatti-harakatlarini tahlil qiling.

Misol: Global elektron tijorat platformasi

Foydalanuvchining joylashuvi va afzalliklariga qarab turli talablarni bajarishi kerak bo'lgan global elektron tijorat platformasini ko'rib chiqing. Middleware zanjiri quyidagilarni bajarish uchun ishlatilishi mumkin:

1. Foydalanuvchining joylashuvini ularning IP manziliga qarab aniqlash.
2. Foydalanuvchining afzal ko'rgan tilini brauzer sozlamalari yoki cookie-fayllarga qarab aniqlash.
3. Foydalanuvchini saytning mos mahalliylashtirilgan versiyasiga (masalan, `/en-US`, `/fr-CA`, `/de-DE`) yo'naltirish.
4. Foydalanuvchining joylashuviga qarab mos valyutani o'rnatish.
5. Mintaqaga xos aksiyalar yoki chegirmalarni qo'llash.

Middleware zanjiri uchun eng yaxshi amaliyotlar

Qo'llab-quvvatlanadigan va samarali middleware zanjirlarini ta'minlash uchun quyidagi eng yaxshi amaliyotlarga rioya qiling:

• Middleware funksiyalarini kichik va yo'naltirilgan holda saqlang: O'qishni va testlashni osonlashtirish uchun har bir middleware funksiyasi bitta mas'uliyatga ega bo'lishi kerak. Murakkab mantiqni kichikroq, boshqariladigan funksiyalarga ajrating.
• Bloklovchi operatsiyalardan saqlaning: Ishlashdagi to'siqlarning oldini olish uchun bloklovchi operatsiyalarni (masalan, sinxron I/O) minimallashtiring. Ishlashni optimallashtirish uchun asinxron operatsiyalar va keshdan foydalaning.
• Natijalarni keshlang: Kechikishni kamaytirish va ishlashni yaxshilash uchun qimmat operatsiyalar (masalan, ma'lumotlar bazasi so'rovlari) natijalarini keshlang. Orqa tizimdagi yukni minimallashtirish uchun keshlash strategiyalarini amalga oshiring.
• Puxta sinovdan o'tkazing: Har bir middleware funksiyasining kutilganidek ishlashini ta'minlash uchun birlik testlarini yozing. Middleware zanjirining boshidan oxirigacha bo'lgan xatti-harakatlarini tekshirish uchun integratsiya testlaridan foydalaning.
• Middleware'ingizni hujjatlashtiring: Qo'llab-quvvatlashni yaxshilash uchun har bir middleware funksiyasining maqsadi va xatti-harakatlarini aniq hujjatlashtiring. Mantiq, bog'liqliklar va potentsial yon ta'sirlar haqida aniq tushuntirishlar bering.
• Ishlash oqibatlarini hisobga oling: Har bir middleware funksiyasining ishlashga ta'sirini tushuning va shunga mos ravishda optimallashtiring. Har bir middleware funksiyasining bajarilish vaqtini o'lchang va potentsial to'siqlarni aniqlang.
• Middleware'ingizni kuzatib boring: Muammolarni aniqlash va hal qilish uchun ishlab chiqarishdagi middleware'ingizning ishlashi va xatolik darajasini kuzatib boring. Ishlashning pasayishi yoki xatoliklar haqida sizni xabardor qilish uchun ogohlantirishlarni sozlang.

Middleware zanjiriga alternativlar

Middleware zanjiri kuchli usul bo'lsa-da, sizning maxsus talablaringizga qarab ko'rib chiqilishi kerak bo'lgan muqobil yondashuvlar mavjud:

• Marshrut ishlovchilari (Route Handlers): So'rovlarni qayta ishlash mantig'ini to'g'ridan-to'g'ri marshrut ishlovchilari ichida bajaring. Bu yondashuv oddiy stsenariylar uchun soddaroq bo'lishi mumkin, ammo murakkabroq ish oqimlari uchun kod takrorlanishiga olib kelishi mumkin.
• API marshrutlari: Autentifikatsiya yoki avtorizatsiya kabi maxsus vazifalarni bajarish uchun maxsus API marshrutlarini yarating. Bu mas'uliyatlarni yaxshiroq ajratishni ta'minlashi mumkin, ammo ilovangizning murakkabligini oshirishi mumkin.
• Server Komponentlari: Server tomonida ma'lumotlarni olish va mantiqni bajarish uchun server komponentlaridan foydalaning. Bu dinamik tarkibni render qilish uchun yaxshi variant bo'lishi mumkin, ammo so'rovlarni qayta ishlashning barcha turlariga mos kelmasligi mumkin.

Xulosa

Next.js middleware zanjiri ketma-ket so'rovlarni qayta ishlashni amalga oshirishning moslashuvchan va kuchli usulini taqdim etadi. Middleware asoslarini tushunib va eng yaxshi amaliyotlarni qo'llab, siz zamonaviy veb-dasturlash talablariga javob beradigan mustahkam va samarali ilovalarni yaratishingiz mumkin. Ehtiyotkorlik bilan rejalashtirish, modulli dizayn va puxta sinovdan o'tkazish samarali middleware zanjirlarini yaratishning kalitidir.