موارد خاص میدل‌ور Next.js: تسلط بر الگوهای اصلاح درخواست

میدل‌ور Next.js یک مکانیزم قدرتمند برای رهگیری و اصلاح درخواست‌ها قبل از رسیدن به مسیرهای اپلیکیشن شما فراهم می‌کند. این قابلیت طیف گسترده‌ای از امکانات را باز می‌کند، از بررسی‌های ساده احراز هویت گرفته تا سناریوهای پیچیده تست A/B و استراتژی‌های بین‌المللی‌سازی. با این حال، استفاده مؤثر از میدل‌ور نیازمند درک عمیق از موارد خاص و مشکلات احتمالی آن است. این راهنمای جامع به بررسی الگوهای پیشرفته اصلاح درخواست می‌پردازد و مثال‌های عملی و بینش‌های کاربردی را برای کمک به شما در ساخت اپلیکیشن‌های Next.js قوی و با عملکرد بالا ارائه می‌دهد.

درک مبانی میدل‌ور Next.js

قبل از پرداختن به الگوهای پیشرفته، بیایید مبانی میدل‌ور Next.js را مرور کنیم. توابع میدل‌ور قبل از تکمیل یک درخواست اجرا می‌شوند و به شما امکان می‌دهند:

• بازنویسی URLها (Rewrite URLs): کاربران را بر اساس معیارهای خاص به صفحات مختلف هدایت کنید.
• ریدایرکت کاربران (Redirect Users): کاربران را به URLهای کاملاً متفاوت بفرستید، که اغلب برای اهداف احراز هویت یا مجوزدهی استفاده می‌شود.
• اصلاح هدرها (Modify Headers): هدرهای HTTP را اضافه، حذف یا به‌روزرسانی کنید.
• پاسخ مستقیم (Respond Directly): پاسخی را مستقیماً از میدل‌ور برگردانید و از مسیرهای Next.js عبور کنید.

توابع میدل‌ور در فایل middleware.js یا middleware.ts در دایرکتوری /pages یا /app شما قرار دارند (بسته به نسخه و تنظیمات 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*'],
}

            

              
                Copy
              
            
          

این میدل‌ور فقط برای مسیرهایی اجرا می‌شود که با /protected/:path* مطابقت دارند. این میدل‌ور وجود کوکی authToken را بررسی می‌کند. اگر کوکی وجود نداشته باشد، کاربر به صفحه /login ریدایرکت می‌شود. در غیر این صورت، با استفاده از NextResponse.next() اجازه داده می‌شود که درخواست به طور عادی ادامه یابد.

الگوهای پیشرفته اصلاح درخواست

اکنون، بیایید برخی از الگوهای پیشرفته اصلاح درخواست را که قدرت واقعی میدل‌ور Next.js را به نمایش می‌گذارند، بررسی کنیم.

۱. تست 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: ['/'],
}

            

              
                Copy
              
            
          

در این مثال، زمانی که یک کاربر برای اولین بار از مسیر ریشه (/) بازدید می‌کند، میدل‌ور به طور تصادفی او را به یکی از نسخه‌های variantA یا variantB اختصاص می‌دهد. این نسخه در یک کوکی ذخیره می‌شود. درخواست‌های بعدی از همان کاربر بسته به نسخه تخصیص داده شده به آنها، به /variant-a یا /variant-b بازنویسی می‌شوند. این به شما امکان می‌دهد صفحات فرود مختلفی را ارائه دهید و ردیابی کنید که کدام یک عملکرد بهتری دارد. اطمینان حاصل کنید که مسیرهایی برای /variant-a و /variant-b در اپلیکیشن Next.js خود تعریف کرده‌اید.

ملاحظات جهانی: هنگام انجام تست A/B، تغییرات منطقه‌ای را در نظر بگیرید. طرحی که در آمریکای شمالی طنین‌انداز می‌شود ممکن است در آسیا به همان اندازه مؤثر نباشد. می‌توانید از داده‌های موقعیت جغرافیایی (که از طریق جستجوی آدرس IP یا ترجیحات کاربر به دست می‌آید) برای تطبیق تست A/B با مناطق خاص استفاده کنید.

۲. محلی‌سازی (i18n) با بازنویسی URL

بین‌المللی‌سازی (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).*)'
  ],
}

            

              
                Copy
              
            
          

این میدل‌ور هدر Accept-Language را از درخواست استخراج کرده و زبان ترجیحی کاربر را تعیین می‌کند. اگر URL از قبل حاوی پیشوند زبان نباشد (مثلاً /en/about)، میدل‌ور کاربر را به URL محلی‌سازی شده مناسب (مثلاً /fr/about برای زبان فرانسه) ریدایرکت می‌کند. اطمینان حاصل کنید که ساختار پوشه مناسبی در دایرکتوری `/pages` یا `/app` خود برای زبان‌های مختلف دارید. برای مثال، شما به یک فایل `/pages/en/about.js` و `/pages/fr/about.js` نیاز خواهید داشت.

ملاحظات جهانی: اطمینان حاصل کنید که پیاده‌سازی i18n شما به درستی از زبان‌های راست به چپ (مانند عربی، عبری) پشتیبانی می‌کند. همچنین، استفاده از یک شبکه تحویل محتوا (CDN) را برای ارائه دارایی‌های محلی‌سازی شده از سرورهای نزدیک‌تر به کاربران خود در نظر بگیرید تا عملکرد بهبود یابد.

۳. پرچم‌های ویژگی (Feature Flags)

پرچم‌های ویژگی به شما امکان می‌دهند ویژگی‌ها را در اپلیکیشن خود بدون استقرار کد جدید فعال یا غیرفعال کنید. این امر به ویژه برای عرضه تدریجی ویژگی‌های جدید یا برای آزمایش ویژگی‌ها در محیط پروداکشن مفید است. میدل‌ور می‌تواند برای بررسی وضعیت یک پرچم ویژگی و اصلاح درخواست بر اساس آن استفاده شود.

مثال: فعال‌سازی یک ویژگی بتا

            
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*'],
}

            

              
                Copy
              
            
          

این میدل‌ور مقدار متغیر محیطی BETA_FEATURE_ENABLED را بررسی می‌کند. اگر این مقدار روی true تنظیم شده باشد و کاربر در تلاش برای دسترسی به مسیری تحت /new-feature باشد، درخواست اجازه عبور پیدا می‌کند. در غیر این صورت، کاربر به صفحه /feature-unavailable ریدایرکت می‌شود. به یاد داشته باشید که متغیرهای محیطی را برای محیط‌های مختلف (توسعه، استیجینگ، پروداکشن) به درستی پیکربندی کنید.

ملاحظات جهانی: هنگام استفاده از پرچم‌های ویژگی، پیامدهای قانونی فعال‌سازی ویژگی‌هایی را که ممکن است با مقررات همه مناطق سازگار نباشند، در نظر بگیرید. به عنوان مثال، ویژگی‌های مربوط به حریم خصوصی داده‌ها ممکن است نیاز به غیرفعال شدن در برخی کشورها داشته باشند.

۴. تشخیص دستگاه و مسیریابی تطبیقی

اپلیکیشن‌های وب مدرن باید واکنش‌گرا باشند و با اندازه‌های مختلف صفحه نمایش و قابلیت‌های دستگاه‌ها سازگار شوند. میدل‌ور می‌تواند برای تشخیص نوع دستگاه کاربر و هدایت آنها به نسخه‌های بهینه‌سازی شده سایت شما استفاده شود.

مثال: ریدایرکت کاربران موبایل به یک زیردامنه بهینه‌سازی شده برای موبایل

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

            

              
                Copy
              
            
          

این مثال از کتابخانه `detection` برای تعیین نوع دستگاه کاربر بر اساس هدر User-Agent استفاده می‌کند. اگر کاربر از تلفن همراه استفاده می‌کند، به زیردامنه m.example.com ریدایرکت می‌شود (با فرض اینکه شما یک نسخه بهینه‌سازی شده برای موبایل از سایت خود را در آنجا میزبانی می‌کنید). به یاد داشته باشید که بسته `detection` را نصب کنید: `npm install detection`.

ملاحظات جهانی: اطمینان حاصل کنید که منطق تشخیص دستگاه شما تغییرات منطقه‌ای در استفاده از دستگاه‌ها را در نظر می‌گیرد. به عنوان مثال، تلفن‌های ساده (feature phones) هنوز در برخی از کشورهای در حال توسعه رایج هستند. برای یک راه حل قوی‌تر، ترکیبی از تشخیص User-Agent و تکنیک‌های طراحی واکنش‌گرا را در نظر بگیرید.

۵. غنی‌سازی هدر درخواست

میدل‌ور می‌تواند اطلاعاتی را قبل از پردازش توسط مسیرهای اپلیکیشن شما به هدرهای درخواست اضافه کند. این کار برای افزودن متادیتای سفارشی مانند نقش‌های کاربر، وضعیت احراز هویت یا شناسه‌های درخواست که می‌تواند توسط منطق اپلیکیشن شما استفاده شود، مفید است.

مثال: افزودن شناسه درخواست

            
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
}

            

              
                Copy
              
            
          

این میدل‌ور با استفاده از کتابخانه uuid یک شناسه درخواست منحصر به فرد تولید می‌کند و آن را به هدر x-request-id اضافه می‌کند. سپس این شناسه می‌تواند برای اهداف لاگ‌گیری، ردیابی و دیباگ استفاده شود. به یاد داشته باشید که بسته `uuid` را نصب کنید: `npm install uuid`.

ملاحظات جهانی: هنگام افزودن هدرهای سفارشی، به محدودیت‌های اندازه هدر توجه داشته باشید. فراتر رفتن از این محدودیت‌ها می‌تواند منجر به خطاهای غیرمنتظره شود. همچنین، اطمینان حاصل کنید که هرگونه اطلاعات حساس اضافه شده به هدرها به درستی محافظت می‌شود، به خصوص اگر اپلیکیشن شما پشت یک پروکسی معکوس یا CDN قرار دارد.

۶. بهبودهای امنیتی: محدودسازی نرخ درخواست (Rate Limiting)

میدل‌ور می‌تواند با پیاده‌سازی محدودسازی نرخ درخواست به عنوان اولین خط دفاعی در برابر حملات مخرب عمل کند. این کار با محدود کردن تعداد درخواست‌هایی که یک کلاینت می‌تواند در یک بازه زمانی مشخص انجام دهد، از سوءاستفاده جلوگیری می‌کند.

مثال: محدودسازی نرخ درخواست پایه با استفاده از یک ذخیره‌ساز ساده

            
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
}

            

              
                Copy
              
            
          

این مثال یک ذخیره‌ساز ساده در حافظه (requestCounts) را برای ردیابی تعداد درخواست‌ها از هر آدرس IP نگهداری می‌کند. اگر یک کلاینت از MAX_REQUESTS_PER_WINDOW در بازه زمانی WINDOW_SIZE_MS فراتر رود، میدل‌ور یک خطای 429 Too Many Requests برمی‌گرداند. مهم: این یک مثال ساده‌سازی شده است و برای محیط‌های پروداکشن مناسب نیست زیرا مقیاس‌پذیر نیست و در برابر حملات محروم‌سازی از سرویس آسیب‌پذیر است. برای استفاده در پروداکشن، از یک راه حل قوی‌تر برای محدودسازی نرخ درخواست مانند Redis یا یک سرویس اختصاصی محدودسازی نرخ استفاده کنید.

ملاحظات جهانی: استراتژی‌های محدودسازی نرخ درخواست باید متناسب با ویژگی‌های خاص اپلیکیشن شما و توزیع جغرافیایی کاربران شما تنظیم شوند. استفاده از محدودیت‌های نرخ متفاوت برای مناطق مختلف یا بخش‌های کاربری مختلف را در نظر بگیرید.

موارد خاص و مشکلات احتمالی

در حالی که میدل‌ور یک ابزار قدرتمند است، آگاهی از محدودیت‌ها و مشکلات احتمالی آن ضروری است:

• تأثیر بر عملکرد: میدل‌ور به هر درخواست سربار اضافه می‌کند. از انجام عملیات محاسباتی سنگین در میدل‌ور خودداری کنید، زیرا این کار می‌تواند به طور قابل توجهی بر عملکرد تأثیر بگذارد. میدل‌ور خود را پروفایل کنید تا هرگونه گلوگاه عملکرد را شناسایی و بهینه‌سازی کنید.
• پیچیدگی: استفاده بیش از حد از میدل‌ور می‌تواند درک و نگهداری اپلیکیشن شما را دشوارتر کند. از میدل‌ور با احتیاط استفاده کنید و اطمینان حاصل کنید که هر تابع میدل‌ور یک هدف مشخص و به خوبی تعریف شده دارد.
• تست: تست میدل‌ور می‌تواند چالش‌برانگیز باشد، زیرا نیازمند شبیه‌سازی درخواست‌های HTTP و بازرسی پاسخ‌های حاصل است. از ابزارهایی مانند Jest و Supertest برای نوشتن تست‌های جامع واحد و یکپارچه‌سازی برای توابع میدل‌ور خود استفاده کنید.
• مدیریت کوکی: هنگام تنظیم کوکی‌ها در میدل‌ور مراقب باشید، زیرا این کار می‌تواند بر رفتار کش تأثیر بگذارد. اطمینان حاصل کنید که پیامدهای کش مبتنی بر کوکی را درک کرده و هدرهای کش خود را بر این اساس پیکربندی می‌کنید.
• متغیرهای محیطی: اطمینان حاصل کنید که تمام متغیرهای محیطی مورد استفاده در میدل‌ور شما برای محیط‌های مختلف (توسعه، استیجینگ، پروداکشن) به درستی پیکربندی شده‌اند. از ابزاری مانند Dotenv برای مدیریت متغیرهای محیطی خود استفاده کنید.
• محدودیت‌های توابع اج (Edge Functions): به یاد داشته باشید که میدل‌ور به عنوان توابع اج اجرا می‌شود که محدودیت‌هایی در زمان اجرا، استفاده از حافظه و اندازه کد بسته‌بندی شده دارند. توابع میدل‌ور خود را سبک و کارآمد نگه دارید.

بهترین شیوه‌ها برای استفاده از میدل‌ور Next.js

برای به حداکثر رساندن مزایای میدل‌ور Next.js و جلوگیری از مشکلات احتمالی، این بهترین شیوه‌ها را دنبال کنید:

• ساده نگه دارید: هر تابع میدل‌ور باید یک مسئولیت واحد و به خوبی تعریف شده داشته باشد. از ایجاد توابع میدل‌ور بیش از حد پیچیده که چندین کار را انجام می‌دهند، خودداری کنید.
• برای عملکرد بهینه‌سازی کنید: میزان پردازش انجام شده در میدل‌ور را به حداقل برسانید تا از گلوگاه‌های عملکرد جلوگیری کنید. از استراتژی‌های کش برای کاهش نیاز به محاسبات مکرر استفاده کنید.
• به طور کامل تست کنید: تست‌های جامع واحد و یکپارچه‌سازی برای توابع میدل‌ور خود بنویسید تا اطمینان حاصل کنید که طبق انتظار رفتار می‌کنند.
• کد خود را مستند کنید: هدف و عملکرد هر تابع میدل‌ور را به وضوح مستند کنید تا قابلیت نگهداری را بهبود بخشید.
• اپلیکیشن خود را نظارت کنید: از ابزارهای نظارتی برای ردیابی عملکرد و نرخ خطای توابع میدل‌ور خود استفاده کنید.
• ترتیب اجرا را درک کنید: از ترتیبی که توابع میدل‌ور اجرا می‌شوند آگاه باشید، زیرا این امر می‌تواند بر رفتار آنها تأثیر بگذارد.
• از متغیرهای محیطی هوشمندانه استفاده کنید: از متغیرهای محیطی برای پیکربندی توابع میدل‌ور خود برای محیط‌های مختلف استفاده کنید.

نتیجه‌گیری

میدل‌ور Next.js راهی قدرتمند برای اصلاح درخواست‌ها و سفارشی‌سازی رفتار اپلیکیشن شما در لبه (edge) ارائه می‌دهد. با درک الگوهای پیشرفته اصلاح درخواست که در این راهنما مورد بحث قرار گرفت، می‌توانید اپلیکیشن‌های Next.js قوی، با عملکرد بالا و آگاه از مسائل جهانی بسازید. به یاد داشته باشید که موارد خاص و مشکلات احتمالی را با دقت در نظر بگیرید و بهترین شیوه‌های ذکر شده در بالا را دنبال کنید تا اطمینان حاصل کنید که توابع میدل‌ور شما قابل اعتماد و قابل نگهداری هستند. از قدرت میدل‌ور برای ایجاد تجربیات کاربری استثنایی و باز کردن امکانات جدید برای اپلیکیشن‌های وب خود استقبال کنید.