Next.js Middleware দিয়ে রিয়েল লাইফ ইউজ কেস

Next.jsহলReactভিত্তিক একটি শক্তিশালী ফ্রেমওয়ার্ক, যা দিয়ে আমরা সহজে SEO-ফ্রেন্ডলি এবং ফাস্ট ওয়েব অ্যাপ বানাতে পারি। আর Next.js 12+ ভার্সন থেকেMiddlewareনামে একটি ফিচার এসেছে, যা দিয়ে আমরা রিকোয়েস্ট আসার আগেই কিছু প্রক্রিয়া করতে পারি।

এই পোস্টে আমরা শেখাবো:

• Next.js Middleware কী?
• এটা কবে ব্যবহার করব?
• রিয়েল লাইফ উদাহরণ (যেমনঃ বাংলাদেশি ইউজারদের জন্য আলাদা পেজ রিডাইরেকশন)
• এবং সম্পূর্ণ কোড সহ ব্যাখ্যা।

Next.jsMiddlewareমানে কী?

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

• রিডাইরেক্ট করতে পারেন
• রেসপন্স ব্লক করতে পারেন
• হেডার, কুকি ইত্যাদি সেট করতে পারেন

এটি সার্ভার ও ক্লায়েন্ট দুই দিকেই কার্যকর।

Next.jsMiddlewareরিয়েল লাইফ ইউজ কেস

ধরেন আপনার সাইটে ইউজার আসছে বিভিন্ন দেশ থেকে। আপনি চান বাংলাদেশি ইউজার আসলে তারা /bd-home নামে আলাদা হোমপেজ দেখুক।

Middleware দিয়ে এটা খুব সহজ।

Step-by-step Middleware কোড উদাহরণ

📁 Next.jsMiddlewareফাইল স্ট্রাকচার:

/your-project
  └─ /middleware.ts (বা middleware.js)

Next.jsMiddlewareকোড:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

// Middleware function
export function middleware(request: NextRequest) {
  const country = request.geo?.country || 'UNKNOWN';

  // যদি ইউজার বাংলাদেশ থেকে আসে, তাকে bd-home এ রিডাইরেক্ট করো
  if (country === 'BD') {
    const url = request.nextUrl.clone();
    url.pathname = '/bd-home';
    return NextResponse.redirect(url);
  }

  // অন্যথায়, নরমাল রেসপন্স
  return NextResponse.next();
}

// কোন রুটে middleware চালু হবে তা নির্ধারণ করি
export const config = {
  matcher: ['/', '/home'],
};

🌐 Geo-location কিভাবে কাজ করে?

• Next.js Middleware request.geo.country ব্যবহার করে ইউজারের লোকেশন বের করে।
• এটি Vercel হোস্টিং-এ ডিফল্টভাবে Geo IP ডেটা দেয়।
• যদি আপনি লোকালি রান করেন, Geo ডেটা আসবে না, তাই ভেরসেল বা অন্য edge-support হোস্টে এটা চেক করা ভালো।

✅ অন্য ইউজ কেস যেখানে Middleware দরকার হতে পারে

🔐 লগইন রিডাইরেকশন উদাহরণ (এক্সট্রা):

export function middleware(request: NextRequest) {
  const token = request.cookies.get('auth_token');

  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    const loginUrl = request.nextUrl.clone();
    loginUrl.pathname = '/login';
    return NextResponse.redirect(loginUrl);
  }

  return NextResponse.next();
}

📘 শেষ কথা

Next.js Middleware আপনার সাইটকে আরও স্মার্ট করে তোলে। আপনি চাইলে Geo-location, লগইন চেক, URL রিডাইরেকশন এসব কাজ খুব সহজেই করতে পারবেন। উপরের উদাহরণ ব্যবহার করে আপনার পরবর্তী প্রজেক্টে এক্সপেরিমেন্ট করে দেখুন!