Middleware কী এবং কিভাবে কাজ করে?

Next.js তে Middleware হল এমন একটি ফিচার যা অ্যাপ্লিকেশনের রিকোয়েস্টের প্রক্রিয়া চলাকালীন সময়ে কোড এক্সিকিউট করতে সাহায্য করে, কিন্তু এটি ইউজারের চাহিদা অনুসারে পেজ রেন্ডারিং এর আগে কার্যকর হয়। Middleware এর মাধ্যমে আপনি রিকোয়েস্ট এবং রেসপন্স ম্যানিপুলেট করতে পারেন, যেমন: ইউজার অথেন্টিকেশন, অথোরাইজেশন, লগিং, রিডাইরেকশন, ক্যাশিং, API কল ইত্যাদি।

Next.js 12 এ Middleware একটি নতুন ফিচার হিসেবে অন্তর্ভুক্ত হয়েছে, যা রিকোয়েস্ট হ্যান্ডলিংয়ের জন্য আরও উন্নত এবং কাস্টমাইজেবল মেকানিজম প্রদান করে। এটি আপনাকে Edge Functions হিসেবে কোড চালানোর সুযোগ দেয়, যা দ্রুত এবং স্কেলেবল হয়, কারণ এটি সারা বিশ্বে বিভিন্ন Edge Locations এ রান করতে পারে।

Middleware কী?

Middleware হলো একটি ফাংশন যা HTTP রিকোয়েস্টের প্রক্রিয়ায় আগত এবং রেসপন্স প্রেরণের পূর্বে কার্যকর হয়। এটি সাধারণত রিকোয়েস্ট ট্রান্সফরমেশন বা লজিকাল চেকিং করতে ব্যবহৃত হয়। যেমন:

• ইউজারের অথেন্টিকেশন যাচাই
• রিকোয়েস্ট এবং রেসপন্স হেডার পরিবর্তন
• রিডাইরেকশন (পেজ রিডাইরেকশন)
• রেট লিমিটিং
• লগিং

Next.js Middleware মূলত middleware.js বা middleware.ts ফাইলের মাধ্যমে তৈরি করা হয়। Middleware গুলি Edge Functions হিসেবে কাজ করে এবং Server-side Rendering (SSR) অথবা Static Site Generation (SSG) এর পরিপূরক হিসেবে কাজ করে।

Middleware কিভাবে কাজ করে?

Next.js তে Middleware কনফিগার করতে হলে আপনাকে একটি ফাইল তৈরি করতে হবে, যার মধ্যে আপনি কাস্টম লজিক লিখবেন। যখন ব্যবহারকারী একটি রিকোয়েস্ট পাঠাবে, তখন Middleware ফাংশনটি রিকোয়েস্টের সাথে প্রক্রিয়াভুক্ত হয়ে প্রয়োজনীয় অ্যাকশন নিবে এবং তারপর রেসপন্স ফেরত দেবে।

এখানে, Middleware একটি সাধারণ রিকোয়েস্ট ও রেসপন্স চেইন তৈরি করে এবং পরবর্তী স্টেপে যাচাইয়ের মাধ্যমে এক্সিকিউট হয়। এটি সাধারণত সার্ভারে প্রি-হ্যান্ডলিং পর্যায়ে চলে, অর্থাৎ রাউটিং বা রেন্ডারিংয়ের আগে।

Next.js তে Middleware ব্যবহার করার উদাহরণ

Next.js 12 এবং তার পরবর্তী সংস্করণে, Middleware ব্যবহার করার জন্য middleware.js বা middleware.ts ফাইল তৈরি করতে হয়। এই ফাইলটি সাধারণত /pages ডিরেক্টরির বাইরে থাকে।

১. সাধারণ Middleware উদাহরণ: ইউজার অথেন্টিকেশন চেক

// middleware.js

import { NextResponse } from 'next/server';

export function middleware(req) {
  // চেক করুন যে ইউজার লগইন করেছে কি না
  const user = req.cookies.get('user');
  
  // যদি ইউজার লগইন না করে থাকে, তবে রিডাইরেক্ট করুন
  if (!user) {
    return NextResponse.redirect(new URL('/login', req.url));
  }

  // যদি ইউজার লগইন করে থাকে, তাহলে রিকোয়েস্ট অনুমোদন দিন
  return NextResponse.next();
}

এখানে:

• NextResponse.redirect ব্যবহার করে রিডাইরেকশন করা হচ্ছে, যদি ইউজার লগইন না করে থাকে।
• NextResponse.next ব্যবহার করা হচ্ছে রিকোয়েস্টকে পরবর্তী প্রসেসে পাঠানোর জন্য।

২. রিডাইরেকশন Middleware উদাহরণ

// middleware.js

import { NextResponse } from 'next/server';

export function middleware(req) {
  const url = req.nextUrl.clone();
  
  // যদি রিকোয়েস্ট URL 'old-page' থাকে, তবে রিডাইরেক্ট করুন
  if (url.pathname === '/old-page') {
    url.pathname = '/new-page';
    return NextResponse.redirect(url);
  }

  return NextResponse.next();
}

এখানে:

• middleware.js ব্যবহার করে, /old-page থেকে /new-page এ রিডাইরেক্ট করা হচ্ছে।

৩. অথেনটিকেশন চেক এবং পেজ রেন্ডারিংয়ের আগে রেসপন্স পরিবর্তন

// middleware.js

import { NextResponse } from 'next/server';

export function middleware(req) {
  const user = req.cookies.get('user');
  
  // যদি ইউজার অথেন্টিকেশন সফল না হয়
  if (!user) {
    return new Response('Unauthorized', { status: 401 });
  }

  return NextResponse.next();
}

এখানে, ইউজারের অথেন্টিকেশন চেক করার পর যদি ইউজার অননুমোদিত হয়, তবে 401 Unauthorized রেসপন্স প্রদান করা হয়।

Next.js Middleware এর বিশেষ বৈশিষ্ট্য

১. Edge Functions

Next.js এর Middleware কে Edge Functions হিসেবে চালানো হয়, যা আপনাকে আপনার অ্যাপ্লিকেশনটি বিশ্বব্যাপী বিভিন্ন Edge Locations এ দ্রুত এবং স্কেলেবলভাবে রান করার সুযোগ দেয়।

২. Route Matching

Next.js Middleware ব্যবহার করার সময় আপনি কোন রাউটসের জন্য Middleware প্রযোজ্য হবে তা নির্ধারণ করতে পারেন। আপনি চাইলে Middleware কে সমস্ত রাউটের জন্য ব্যবহার করতে পারেন অথবা নির্দিষ্ট কিছু রাউটের জন্য ব্যবহার করতে পারেন।

// middleware.js

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

এখানে, Middleware শুধুমাত্র /protected/* এবং /dashboard/* পাথের জন্য কার্যকর হবে।

৩. Flexible and Lightweight

Next.js Middleware কোডের আকারে হালকা এবং কাস্টমাইজেবল। এটি আপনাকে শুধু একটি ছোট কোড দিয়ে বৃহৎ কাজ করতে দেয়, যেমন ইউজার অথেন্টিকেশন, ডেটা ফেচিং, এবং রিডাইরেকশন।

সারাংশ

Next.js এর Middleware হল একটি শক্তিশালী ফিচার যা অ্যাপ্লিকেশন রিকোয়েস্টের প্রক্রিয়ার মধ্যে কোড ইনজেক্ট করার মাধ্যমে বিভিন্ন কাজ করতে সাহায্য করে। এটি ইউজারের অথেন্টিকেশন, রিডাইরেকশন, এবং রিকোয়েস্ট/রেসপন্স হেডার ম্যানিপুলেশন সহ অনেক কাস্টম লজিক কাজ করার সুযোগ দেয়। Edge Functions হিসেবে এটি গ্লোবাল স্কেলিং এবং দ্রুত পারফরম্যান্সের জন্য অপ্টিমাইজড।