M

MLOG

বাংলা

Next.js মিডলওয়্যার ব্যবহার করে উন্নত রিকোয়েস্ট মডিফিকেশন কৌশল জানুন। শক্তিশালী ওয়েব অ্যাপ্লিকেশনের জন্য জটিল রাউটিং, অথেন্টিকেশন, A/B টেস্টিং এবং লোকালাইজেশন কৌশল শিখুন।

Next.js মিডলওয়্যার এজ কেস: রিকোয়েস্ট মডিফিকেশন প্যাটার্ন আয়ত্ত করা

Next.js মিডলওয়্যার আপনার অ্যাপ্লিকেশনের রুটে পৌঁছানোর আগে রিকোয়েস্ট আটকানো এবং পরিবর্তন করার জন্য একটি শক্তিশালী ব্যবস্থা প্রদান করে। এই ক্ষমতাটি সাধারণ অথেন্টিকেশন চেক থেকে শুরু করে জটিল A/B টেস্টিং পরিস্থিতি এবং আন্তর্জাতিকীকরণ কৌশল পর্যন্ত বিস্তৃত সম্ভাবনার দ্বার উন্মুক্ত করে। তবে, মিডলওয়্যারকে কার্যকরভাবে ব্যবহার করার জন্য এর এজ কেস এবং সম্ভাব্য সমস্যাগুলো সম্পর্কে গভীর ধারণা থাকা প্রয়োজন। এই বিস্তারিত গাইডটি উন্নত রিকোয়েস্ট মডিফিকেশন প্যাটার্নগুলো অন্বেষণ করে, যা আপনাকে শক্তিশালী এবং পারফরম্যান্ট Next.js অ্যাপ্লিকেশন তৈরি করতে সাহায্য করার জন্য বাস্তব উদাহরণ এবং কার্যকরী অন্তর্দৃষ্টি প্রদান করে।

Next.js মিডলওয়্যারের মূল বিষয়গুলো বোঝা

উন্নত প্যাটার্নে যাওয়ার আগে, আসুন 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*'],
}

এই মিডলওয়্যারটি শুধুমাত্র /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: ['/'],
}

এই উদাহরণে, যখন একজন ব্যবহারকারী প্রথমবারের জন্য রুট পাথে (/) আসে, মিডলওয়্যারটি তাদের এলোমেলোভাবে variantA বা variantB-তে বরাদ্দ করে। এই ভ্যারিয়েন্টটি একটি কুকিতে সংরক্ষণ করা হয়। একই ব্যবহারকারীর পরবর্তী রিকোয়েস্টগুলো তাদের নির্ধারিত ভ্যারিয়েন্টের উপর নির্ভর করে /variant-a বা /variant-b-তে পুনর্লিখন করা হবে। এটি আপনাকে বিভিন্ন ল্যান্ডিং পেজ পরিবেশন করতে এবং কোনটি ভালো পারফর্ম করছে তা ট্র্যাক করতে দেয়। নিশ্চিত করুন যে আপনার Next.js অ্যাপ্লিকেশনে /variant-a এবং /variant-b এর জন্য রুট সংজ্ঞায়িত করা আছে।

গ্লোবাল বিবেচ্য বিষয়: A/B টেস্টিং করার সময়, আঞ্চলিক ভিন্নতা বিবেচনা করুন। উত্তর আমেরিকায় যে ডিজাইনটি ভালো কাজ করে, তা এশিয়াতে ততটা কার্যকর নাও হতে পারে। নির্দিষ্ট অঞ্চলের জন্য A/B টেস্টটি তৈরি করতে আপনি ভূ-অবস্থান ডেটা (আইপি ঠিকানা অনুসন্ধান বা ব্যবহারকারীর পছন্দের মাধ্যমে প্রাপ্ত) ব্যবহার করতে পারেন।

২. 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) ব্যবহার করার কথা বিবেচনা করুন, যা পারফরম্যান্স উন্নত করবে।

৩. ফিচার ফ্ল্যাগ

ফিচার ফ্ল্যাগ আপনাকে নতুন কোড স্থাপন না করেই আপনার অ্যাপ্লিকেশনের ফিচারগুলো সক্রিয় বা নিষ্ক্রিয় করতে দেয়। এটি নতুন ফিচার ধীরে ধীরে চালু করার জন্য বা প্রোডাকশনে ফিচার পরীক্ষা করার জন্য বিশেষভাবে কার্যকর। মিডলওয়্যার একটি ফিচার ফ্ল্যাগের অবস্থা পরীক্ষা করতে এবং সেই অনুযায়ী রিকোয়েস্টটি পরিবর্তন করতে ব্যবহার করা যেতে পারে।

উদাহরণ: একটি বিটা ফিচার সক্রিয় করা


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 পেজে রিডাইরেক্ট করা হয়। বিভিন্ন এনভায়রনমেন্টের (ডেভেলপমেন্ট, স্টেজিং, প্রোডাকশন) জন্য এনভায়রনমেন্ট ভেরিয়েবলগুলো যথাযথভাবে কনফিগার করতে ভুলবেন না।

গ্লোবাল বিবেচ্য বিষয়: ফিচার ফ্ল্যাগ ব্যবহার করার সময়, এমন ফিচার সক্রিয় করার আইনি প্রভাব বিবেচনা করুন যা সমস্ত অঞ্চলের প্রবিধানের সাথে সঙ্গতিপূর্ণ নাও হতে পারে। উদাহরণস্বরূপ, ডেটা গোপনীয়তা সম্পর্কিত ফিচারগুলো নির্দিষ্ট কিছু দেশে নিষ্ক্রিয় করার প্রয়োজন হতে পারে।

৪. ডিভাইস সনাক্তকরণ এবং অ্যাডাপ্টিভ রাউটিং

আধুনিক ওয়েব অ্যাপ্লিকেশনগুলোকে প্রতিক্রিয়াশীল হতে হবে এবং বিভিন্ন স্ক্রীন সাইজ ও ডিভাইসের ক্ষমতার সাথে খাপ খাইয়ে নিতে হবে। মিডলওয়্যার ব্যবহারকারীর ডিভাইসের ধরন সনাক্ত করতে এবং তাদের আপনার সাইটের অপ্টিমাইজ করা সংস্করণে রিডাইরেক্ট করতে ব্যবহার করা যেতে পারে।

উদাহরণ: মোবাইল ব্যবহারকারীদের একটি মোবাইল-অপ্টিমাইজ করা সাবডোমেনে রিডাইরেক্ট করা


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

গ্লোবাল বিবেচ্য বিষয়: আপনার ডিভাইস সনাক্তকরণ যুক্তি যেন ডিভাইস ব্যবহারের আঞ্চলিক ভিন্নতা বিবেচনা করে তা নিশ্চিত করুন। উদাহরণস্বরূপ, কিছু উন্নয়নশীল দেশে ফিচার ফোন এখনও প্রচলিত। আরও শক্তিশালী সমাধানের জন্য ইউজার-এজেন্ট সনাক্তকরণ এবং প্রতিক্রিয়াশীল ডিজাইন কৌশলের সংমিশ্রণ ব্যবহার করার কথা বিবেচনা করুন।

৫. রিকোয়েস্ট হেডার সমৃদ্ধকরণ

মিডলওয়্যার আপনার অ্যাপ্লিকেশন রুট দ্বারা প্রক্রিয়া করার আগে রিকোয়েস্ট হেডারে তথ্য যোগ করতে পারে। এটি কাস্টম মেটাডেটা, যেমন ব্যবহারকারীর ভূমিকা, প্রমাণীকরণের অবস্থা, বা রিকোয়েস্ট আইডি যোগ করার জন্য কার্যকর, যা আপনার অ্যাপ্লিকেশন লজিক দ্বারা ব্যবহার করা যেতে পারে।

উদাহরণ: একটি রিকোয়েস্ট আইডি যোগ করা


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-এর পিছনে থাকে।

৬. নিরাপত্তা বৃদ্ধি: রেট লিমিটিং

মিডলওয়্যার রেট লিমিটিং প্রয়োগ করে ক্ষতিকারক আক্রমণের বিরুদ্ধে প্রথম প্রতিরক্ষা স্তর হিসাবে কাজ করতে পারে। এটি একটি নির্দিষ্ট সময়ের মধ্যে একজন ক্লায়েন্ট কতগুলো রিকোয়েস্ট করতে পারে তা সীমিত করে অপব্যবহার রোধ করে।

উদাহরণ: একটি সাধারণ স্টোর ব্যবহার করে বেসিক রেট লিমিটিং


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 Too Many Requests ত্রুটি ফেরত দেয়। গুরুত্বপূর্ণ: এটি একটি সরলীকৃত উদাহরণ এবং প্রোডাকশন পরিবেশের জন্য উপযুক্ত নয় কারণ এটি স্কেল করে না এবং ডিনায়াল-অফ-সার্ভিস আক্রমণের জন্য ঝুঁকিপূর্ণ। প্রোডাকশন ব্যবহারের জন্য, Redis বা একটি ডেডিকেটেড রেট-লিমিটিং পরিষেবার মতো আরও শক্তিশালী সমাধান ব্যবহার করার কথা বিবেচনা করুন।

গ্লোবাল বিবেচ্য বিষয়: রেট-লিমিটিং কৌশলগুলো আপনার অ্যাপ্লিকেশনের নির্দিষ্ট বৈশিষ্ট্য এবং আপনার ব্যবহারকারীদের ভৌগলিক বণ্টনের সাথে সামঞ্জস্যপূর্ণ হওয়া উচিত। বিভিন্ন অঞ্চল বা ব্যবহারকারী বিভাগের জন্য বিভিন্ন রেট সীমা ব্যবহার করার কথা বিবেচনা করুন।

এজ কেস এবং সম্ভাব্য সমস্যা

যদিও মিডলওয়্যার একটি শক্তিশালী টুল, তবে এর সীমাবদ্ধতা এবং সম্ভাব্য সমস্যাগুলো সম্পর্কে সচেতন থাকা অপরিহার্য:

Next.js মিডলওয়্যার ব্যবহারের সেরা অনুশীলন

Next.js মিডলওয়্যারের সুবিধাগুলো সর্বাধিক করতে এবং সম্ভাব্য সমস্যাগুলো এড়াতে, এই সেরা অনুশীলনগুলো অনুসরণ করুন:

উপসংহার

Next.js মিডলওয়্যার রিকোয়েস্ট পরিবর্তন করতে এবং এজে আপনার অ্যাপ্লিকেশনের আচরণ কাস্টমাইজ করার একটি শক্তিশালী উপায় সরবরাহ করে। এই গাইডে আলোচিত উন্নত রিকোয়েস্ট মডিফিকেশন প্যাটার্নগুলো বোঝার মাধ্যমে, আপনি শক্তিশালী, পারফরম্যান্ট এবং বিশ্বব্যাপী সচেতন Next.js অ্যাপ্লিকেশন তৈরি করতে পারেন। এজ কেস এবং সম্ভাব্য সমস্যাগুলো সাবধানে বিবেচনা করতে ভুলবেন না এবং আপনার মিডলওয়্যার ফাংশনগুলো নির্ভরযোগ্য এবং রক্ষণাবেক্ষণযোগ্য কিনা তা নিশ্চিত করতে উপরে বর্ণিত সেরা অনুশীলনগুলো অনুসরণ করুন। ব্যতিক্রমী ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে এবং আপনার ওয়েব অ্যাপ্লিকেশনগুলোর জন্য নতুন সম্ভাবনা উন্মোচন করতে মিডলওয়্যারের শক্তিকে আলিঙ্গন করুন।