Next.js এর Middleware এবং API Integration গাইড ও নোট

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

Next.js Middleware

Next.js 12 থেকে Middleware ফিচারটি প্রবর্তন করা হয়েছে, যা সার্ভারের রিকোয়েস্ট/রেসপন্স সাইকেলে হস্তক্ষেপ করতে সক্ষম। Middleware এর মাধ্যমে আপনি ইউজার রিকোয়েস্টের আগে বা পরে কিছু কাস্টম লজিক প্রয়োগ করতে পারেন, যেমন:

• অথেন্টিকেশন
• রাউট রিডিরেকশন
• কুকি/সেশন চেক
• ডাটা প্রিপ্রসেসিং ইত্যাদি

Middleware একটি কাস্টম ফাংশন যা middleware.js বা middleware.ts ফাইলে থাকে এবং pages/_middleware.js এর মাধ্যমে প্রজেক্টে ব্যবহৃত হয়।

Middleware তৈরি করার উদাহরণ:

// pages/_middleware.js

export function middleware(req) {
  // রিকোয়েস্টের হেডার থেকে ইউজারের তথ্য পরীক্ষা
  const userAgent = req.headers.get('user-agent');
  if (userAgent && userAgent.includes('Mobile')) {
    // যদি ইউজার মোবাইল থেকে আসে, রিডিরেক্ট করা হবে
    return new Response('Mobile users are not allowed!', {
      status: 403,
    });
  }
  // অন্যথায়, রিকোয়েস্ট চালিয়ে যেতে দিবে
  return Response.next();
}

উপরের কোডে, middleware ফাংশনটি ইউজারের ডিভাইস চেক করছে এবং যদি ইউজার মোবাইল ডিভাইস থেকে আসে, তবে 403 (Forbidden) স্ট্যাটাস কোড সহ একটি রেসপন্স ফেরত দেওয়া হবে। অন্যথায়, রিকোয়েস্ট পরবর্তী ধাপে যাবে।

API Routes Integration in Next.js

Next.js API Routes ব্যবহার করে আপনি সহজে সার্ভার-সাইড লজিক এবং ডাটা ফেচিং পরিচালনা করতে পারেন। Next.js API Routes ব্যবহার করে আপনি RESTful API, ডাটাবেস সংযোগ, অথেন্টিকেশন বা অন্য কোনো সার্ভিসের সাথে ইন্টিগ্রেট করতে পারেন।

API Routes সাধারণত pages/api/ ফোল্ডারে রাখা হয়, যেখানে প্রতিটি ফাইল একটি API এন্ডপয়েন্ট হিসেবে কাজ করে।

API Route তৈরি করার উদাহরণ:

// pages/api/user.js

export default async function handler(req, res) {
  if (req.method === 'GET') {
    const users = await fetchUsersFromDatabase();
    res.status(200).json(users);  // GET রিকোয়েস্টে ডাটাবেস থেকে ইউজার তালিকা রিটার্ন
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });  // অন্য মেথডে 405 এরর
  }
}

async function fetchUsersFromDatabase() {
  // আপনার ডাটাবেস থেকে ইউজারের তথ্য ফেচ করুন
  return [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Smith' },
  ];
}

এখানে /api/user URL এ GET রিকোয়েস্ট পাঠালে, এটি ডাটাবেস (এখানে ফেক ডাটাবেস ব্যবহার করা হয়েছে) থেকে ইউজারদের একটি তালিকা ফেরত দিবে। আপনি এই API এন্ডপয়েন্ট থেকে ডাটা ফেচ করার জন্য fetch বা axios ব্যবহার করতে পারেন।

API Route কিভাবে ব্যবহার করবেন?

Next.js এর API রাউটকে কিভাবে ব্যবহার করতে হয় তার উদাহরণ:

ক্লায়েন্ট সাইডে API কল করা:

import { useEffect, useState } from 'react';

function UsersList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      const res = await fetch('/api/user');
      const data = await res.json();
      setUsers(data);
    };

    fetchUsers();
  }, []);

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UsersList;

এখানে, fetch('/api/user') কলটি API রুটের মাধ্যমে সার্ভার থেকে ডাটা ফেচ করে এবং সেটা স্টেট হিসেবে setUsers এ সেট করা হয়।

Serverless Functions in Next.js

Next.js API Routes ব্যবহার করে আপনি Serverless Functions তৈরি করতে পারেন, যা ক্লাউড প্ল্যাটফর্মে সহজেই ডিপ্লয় করা যায়। Next.js এর API Routes এর মাধ্যমে আপনি স্বয়ংক্রিয়ভাবে serverless ফাংশন তৈরি করতে পারেন, যা বিভিন্ন সার্ভিসের সাথে ইন্টিগ্রেট করতে পারে।

এটা খুবই উপকারী যখন আপনি ছোট ফাংশন, ডাটা প্রসেসিং, বা ক্লাউড ফাংশন তৈরি করতে চান এবং সার্ভার মেইনটেন্যান্সের ঝামেলা এড়াতে চান।

Middleware এবং API Routes এর পার্থক্য

সারাংশ

• Middleware আপনাকে HTTP রিকোয়েস্টের প্রক্রিয়ায় হস্তক্ষেপ করতে দেয় এবং বিভিন্ন কাস্টম লজিক প্রয়োগ করতে সাহায্য করে।
• API Routes ব্যবহার করে আপনি সহজে সার্ভার সাইড API তৈরি করতে পারেন এবং আপনার অ্যাপ্লিকেশনকে ডাটা বা অন্যান্য সার্ভিসের সাথে ইন্টিগ্রেট করতে পারেন।
• Middleware এবং API Routes উভয়ই সার্ভার সাইডে কাজ করে এবং আপনার অ্যাপ্লিকেশনের পারফরম্যান্স ও নিরাপত্তা উন্নত করতে সাহায্য করে।

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 হিসেবে এটি গ্লোবাল স্কেলিং এবং দ্রুত পারফরম্যান্সের জন্য অপ্টিমাইজড।

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

Middleware কী?

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

Next.js এর API Routes এর সাথে Middleware ব্যবহার করার ফলে আপনি রিকোয়েস্ট হ্যান্ডলারগুলির আগেও কাস্টম লজিক যোগ করতে পারেন।

১. Next.js API Route তৈরি করা

প্রথমে, আপনি একটি API Route তৈরি করুন। এটি pages/api/ ফোল্ডারের মধ্যে হতে হবে। উদাহরণস্বরূপ, একটি সিম্পল API রাউট তৈরি করা যাক।

উদাহরণ:

// pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, Next.js!' })
}

এই API রাউটটি খুব সহজ এবং সরাসরি ক্লায়েন্টের কাছে একটি JSON রেসপন্স পাঠায়।

২. Middleware যোগ করা

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

উদাহরণ:

ধরা যাক, আমরা একটি মিডলওয়্যার তৈরি করতে চাই যা চেক করবে ব্যবহারকারী একটি নির্দিষ্ট API কিও প্রেরণ করেছে কিনা।

// lib/middleware/checkApiKey.js

export function checkApiKey(req, res, next) {
  const apiKey = req.headers['x-api-key']
  if (apiKey !== 'my-secret-api-key') {
    return res.status(403).json({ message: 'Forbidden: Invalid API Key' })
  }
  next()
}

এই মিডলওয়্যারটি x-api-key হেডারে প্রেরিত API কির মান যাচাই করবে এবং যদি তা সঠিক না হয়, তবে এটি 403 স্ট্যাটাস কোড সহ একটি ত্রুটি মেসেজ ফিরিয়ে দেবে।

৩. API Route এ Middleware ব্যবহার করা

এখন, আপনি আপনার API রাউটে মিডলওয়্যার যোগ করতে পারবেন। Next.js API Routes এ Middleware ব্যবহার করার জন্য handler ফাংশনের আগে মিডলওয়্যার ফাংশনটি কল করতে হবে।

উদাহরণ:

// pages/api/hello.js

import { checkApiKey } from '../../lib/middleware/checkApiKey'

export default function handler(req, res) {
  // Middleware কল করুন
  checkApiKey(req, res, () => {
    // যদি API কিও ঠিক থাকে, তাহলে মূল হ্যান্ডলার চালানো হবে
    res.status(200).json({ message: 'Hello, Next.js with Middleware!' })
  })
}

এখানে, checkApiKey মিডলওয়্যার ফাংশনটি req, res, এবং একটি next ফাংশনকে আর্গুমেন্ট হিসেবে নেবে। যদি API কিও ঠিক থাকে, তবে next() কল করা হবে এবং API হ্যান্ডলারটি রান করবে।

৪. Multiple Middleware চেইন করা

Next.js API Routes এ একাধিক মিডলওয়্যার চেইন করতে চাইলে, আপনি একাধিক মিডলওয়্যার ফাংশনকে পরপর কল করতে পারেন। যেমন, প্রথমে অটেনটিকেশন চেক, তারপর লগিং এবং তারপর আসল API রেসপন্স।

উদাহরণ:

// lib/middleware/authenticate.js
export function authenticate(req, res, next) {
  const token = req.headers['authorization']
  if (!token || token !== 'Bearer my-secret-token') {
    return res.status(401).json({ message: 'Unauthorized' })
  }
  next()
}

// lib/middleware/logRequest.js
export function logRequest(req, res, next) {
  console.log(`Request to: ${req.url}`)
  next()
}

// pages/api/hello.js
import { authenticate } from '../../lib/middleware/authenticate'
import { logRequest } from '../../lib/middleware/logRequest'

export default function handler(req, res) {
  logRequest(req, res, () => {
    authenticate(req, res, () => {
      res.status(200).json({ message: 'Hello, Next.js with multiple Middleware!' })
    })
  })
}

এখানে, প্রথমে logRequest মিডলওয়্যার কল করা হবে, তারপর authenticate মিডলওয়্যার। যদি উভয় মিডলওয়্যার সফল হয়, তবেই মূল API রেসপন্স প্রদান করা হবে।

৫. Custom Middleware ব্যবহার করে কাস্টম রিকোয়েস্ট হ্যান্ডলিং

Next.js এ আপনি আরও জটিল মিডলওয়্যার তৈরি করতে পারেন যা আপনার API রিকোয়েস্টের আগে আরো কাস্টম লজিক প্রক্রিয়াকরণ করবে। যেমন, আপনি ডেটাবেস চেক, রেট লিমিটিং, কুকি চেক ইত্যাদি কাজ করতে পারেন।

উদাহরণ:

// lib/middleware/ratelimit.js
let requestCount = 0
const RATE_LIMIT = 100 // 100 requests per minute

export function rateLimit(req, res, next) {
  requestCount++
  if (requestCount > RATE_LIMIT) {
    return res.status(429).json({ message: 'Too many requests, please try again later.' })
  }
  next()
}

// pages/api/hello.js
import { rateLimit } from '../../lib/middleware/ratelimit'

export default function handler(req, res) {
  rateLimit(req, res, () => {
    res.status(200).json({ message: 'Request successful!' })
  })
}

এখানে, rateLimit মিডলওয়্যারটি রিকোয়েস্টের সংখ্যা ট্র্যাক করে এবং একটি নির্দিষ্ট সীমা পেরিয়ে গেলে রিকোয়েস্ট রিজেক্ট করে।

Next.js API Routes এর সাথে Middleware যুক্ত করে আপনি সার্ভার সাইড রিকোয়েস্ট প্রসেসিংয়ে কাস্টম লজিক যোগ করতে পারেন, যেমন অটেনটিকেশন, অথরাইজেশন, লগিং, রেট লিমিটিং ইত্যাদি। এইভাবে, আপনি আপনার অ্যাপ্লিকেশনটিকে আরও সুরক্ষিত এবং অপটিমাইজড করতে পারেন, যা ব্যবহারকারীর জন্য ভালো অভিজ্ঞতা প্রদান করবে।

Next.js এ third-party API integration একটি সাধারণ কাজ, যা আপনার অ্যাপ্লিকেশনে বাইরের API থেকে ডেটা ফেচ করতে সহায়তা করে। Third-party API গুলি যেমন REST API বা GraphQL API এর মাধ্যমে আপনি বিভিন্ন ধরনের ডেটা ফেচ, পুশ, অথবা পোস্ট করতে পারেন। Next.js এ API ইন্টিগ্রেশন সাধারণত getStaticProps, getServerSideProps বা client-side JavaScript এর মাধ্যমে করা হয়, তবে ব্যবহারের জন্য কোন পদ্ধতি সেরা তা নির্ভর করে ডেটার ধরন এবং প্রয়োজনীয়তা অনুযায়ী।

এখানে Next.js এ third-party API ইন্টিগ্রেশনের মাধ্যমে ডেটা ফেচ করার কিছু পদ্ধতি নিয়ে বিস্তারিত আলোচনা করা হলো।

১. getStaticProps এর মাধ্যমে Third-party API Integration

যদি আপনি স্ট্যাটিক পেজের জন্য থার্ড-পার্টি API থেকে ডেটা ফেচ করতে চান, তবে getStaticProps ব্যবহার করা সবচেয়ে উপযুক্ত পদ্ধতি। এটি Static Generation এর জন্য ব্যবহৃত হয়, যেখানে ডেটা বিল্ড টাইমে একবার ফেচ হয়ে পেজটি তৈরি হয় এবং পরবর্তী সব ভিজিটে একই ডেটা ব্যবহার করা হয়।

উদাহরণ:

ধরা যাক, আপনি একটি ব্লগ পেজ তৈরি করছেন যেখানে আপনি JSONPlaceholder API থেকে পোস্টের ডেটা ফেচ করতে চান।

// pages/blog.js

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
  }
}

export default function Blog({ posts }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  )
}

ব্যাখ্যা:

• getStaticProps: এই ফাংশনটি JSONPlaceholder API থেকে পোস্টের ডেটা ফেচ করে এবং সেই ডেটা posts প্রপস হিসেবে Blog কম্পোনেন্টে পাঠায়।
• Static Generation: এটি ডেটা ফেচ করার পরে পেজটি স্ট্যাটিকভাবে তৈরি হয় এবং পরবর্তী সব ভিজিটে একই ডেটা দেখানো হয়।

২. getServerSideProps এর মাধ্যমে Third-party API Integration

যদি আপনি ডাইনামিক ডেটা ফেচ করতে চান, যেখানে প্রতিবার পেজ রিফ্রেশ বা রিকোয়েস্টের সময় নতুন ডেটা ফেচ হবে, তবে getServerSideProps ব্যবহার করা উচিত। এটি Server-side Rendering (SSR) এর জন্য ব্যবহৃত হয় এবং প্রতিবার পেজ রিকোয়েস্টের সময় API থেকে ডেটা ফেচ করা হয়।

উদাহরণ:

ধরা যাক, আপনি একটি ব্যবহারকারীর প্রোফাইল পেজ তৈরি করছেন যেখানে প্রতিবার রিকোয়েস্টে ব্যবহারকারীর ডেটা থার্ড-পার্টি API থেকে ফেচ করা হবে।

// pages/profile.js

export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users/1')
  const user = await res.json()

  return {
    props: {
      user,
    },
  }
}

export default function Profile({ user }) {
  return (
    <div>
      <h1>{user.name}'s Profile</h1>
      <p>Email: {user.email}</p>
      <p>Phone: {user.phone}</p>
    </div>
  )
}

ব্যাখ্যা:

• getServerSideProps: এই ফাংশনটি সার্ভার সাইডে API থেকে ব্যবহারকারীর ডেটা ফেচ করে এবং সেই ডেটা user প্রপস হিসেবে Profile কম্পোনেন্টে পাঠায়।
• Server-side Rendering: প্রতিবার রিকোয়েস্টের সময় নতুন ডেটা সার্ভার থেকে ফেচ হয়ে ক্লায়েন্টে পাঠানো হয়।

৩. Client-side API Integration

ক্লায়েন্ট-সাইড API ইন্টিগ্রেশন তখনই ব্যবহৃত হয় যখন আপনি পেজ লোডের পর ডেটা ফেচ করতে চান, যেমন ইউজার ইন্টারঅ্যাকশনের পর বা কোন ইভেন্টের মাধ্যমে। আপনি সাধারণ JavaScript fetch API বা অন্যান্য লাইব্রেরি (যেমন Axios বা SWR) ব্যবহার করতে পারেন।

উদাহরণ:

// pages/client-side.js
import { useEffect, useState } from 'react'

export default function ClientSidePage() {
  const [data, setData] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('https://jsonplaceholder.typicode.com/posts')
      const data = await res.json()
      setData(data)
    }

    fetchData()
  }, [])

  if (!data) {
    return <div>Loading...</div>
  }

  return (
    <div>
      <h1>Client-side API Data</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  )
}

ব্যাখ্যা:

• useEffect: এই হুকটি ক্লায়েন্ট-সাইডে ডেটা ফেচ করার জন্য ব্যবহৃত হয়। পেজ লোডের পর এটি থার্ড-পার্টি API থেকে ডেটা ফেচ করে এবং স্টেট আপডেট করে।
• useState: API থেকে প্রাপ্ত ডেটা data স্টেটে সংরক্ষণ করা হয় এবং তারপর UI তে প্রদর্শন করা হয়।

৪. SWR ব্যবহার করে Third-party API Integration

Next.js এর সাথে SWR (Stale While Revalidate) একটি জনপ্রিয় হুক লাইব্রেরি যা ডেটা ফেচিং, ক্যাশিং এবং রি-ফেচিং খুব সহজে পরিচালনা করতে সাহায্য করে। এটি ক্লায়েন্ট-সাইড ডেটা ফেচিং এর জন্য খুবই কার্যকর।

উদাহরণ:

// pages/swr-example.js
import useSWR from 'swr'

const fetcher = (url) => fetch(url).then((res) => res.json())

export default function SWRExample() {
  const { data, error } = useSWR('https://jsonplaceholder.typicode.com/posts', fetcher)

  if (error) return <div>Error loading data</div>
  if (!data) return <div>Loading...</div>

  return (
    <div>
      <h1>SWR API Data</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  )
}

ব্যাখ্যা:

• useSWR: SWR হুকটি ব্যবহার করে আপনি API থেকে ডেটা ফেচ করেন এবং রেসপন্স স্টেটটি হ্যান্ডেল করেন (যেমন data, error এবং loading অবস্থায়)। fetcher ফাংশনটি ফেচিং লজিক কাস্টমাইজ করতে ব্যবহৃত হয়।

সারাংশ

Next.js তে third-party API ইন্টিগ্রেশন খুব সহজ এবং পদ্ধতির উপর নির্ভর করে আপনি বিভিন্ন প্রকারে ডেটা ফেচ করতে পারেন। আপনি getStaticProps ব্যবহার করে Static Generation করতে পারেন, getServerSideProps ব্যবহার করে Server-side Rendering করতে পারেন, এবং ক্লায়েন্ট-সাইড API ফেচিং করতে পারেন fetch বা SWR এর মাধ্যমে।

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

নিচে Next.js এ Authentication Middleware তৈরি এবং ব্যবহারের জন্য কিছু Best Practices দেওয়া হলো।

১. Middleware ব্যবহার করা

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

উদাহরণ: Middleware সেটআপ

Next.js এর মেইন middleware.js ফাইলের মাধ্যমে অ্যাপ্লিকেশনটির রিকোয়েস্ট ট্র্যাক এবং প্রক্রিয়া করতে পারেন।

// middleware.js

import { NextResponse } from 'next/server';
import jwt from 'jsonwebtoken';

export function middleware(req) {
  // JWT টোকেন চেক করুন
  const token = req.cookies.get('auth_token');

  if (!token) {
    // যদি টোকেন না থাকে, তবে রিডিরেক্ট করুন
    return NextResponse.redirect(new URL('/login', req.url));
  }

  try {
    // টোকেন ভ্যালিডেশন
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    
    // টোকেন সঠিক হলে, রিকোয়েস্ট প্রসেস করতে দিন
    req.user = decoded; // ইউজারের ডেটা রিকোয়েস্টে যুক্ত করা হচ্ছে
    return NextResponse.next();
  } catch (error) {
    // টোকেন যদি অবৈধ হয়, রিডিরেক্ট করুন
    return NextResponse.redirect(new URL('/login', req.url));
  }
}

ব্যাখ্যা:

• req.cookies.get('auth_token'): এখানে আমরা ইউজারের কুকি থেকে JWT টোকেন নিয়ে যাচাই করছি।
• jwt.verify(): এই ফাংশনটি JWT টোকেনকে ভ্যালিডেট করে।
• NextResponse.redirect(): যদি টোকেন না থাকে বা ভুল হয়, তাহলে ইউজারকে লগইন পেজে রিডিরেক্ট করা হয়।
• NextResponse.next(): যদি টোকেন সঠিক হয়, তাহলে রিকোয়েস্ট পরবর্তী ধাপে পাঠানো হয়।

২. Token-based Authentication ব্যবহার করা

Token-based authentication (বিশেষ করে JWT - JSON Web Tokens) বর্তমানে খুবই জনপ্রিয় এবং নিরাপদ। Middleware এর মাধ্যমে আপনি সহজে ইউজারের অথেন্টিকেশন যাচাই করতে পারেন এবং টোকেন ব্যবহারের মাধ্যমে সেশন স্টোর না করে স্টেটলেস অথেন্টিকেশন পরিচালনা করতে পারেন।

JWT টোকেন তৈরির উদাহরণ:

import jwt from 'jsonwebtoken';

const createToken = (user) => {
  return jwt.sign({ id: user.id, email: user.email }, process.env.JWT_SECRET, {
    expiresIn: '1h', // 1 ঘণ্টা পর টোকেন মেয়াদোত্তীর্ণ হবে
  });
};

এখানে আমরা একটি টোকেন তৈরি করছি যেটি ইউজারের আইডি এবং ইমেইল সহ একটি সিক্রেট কী ব্যবহার করে JWT টোকেন জেনারেট করছে। এটি হ্যাশড থাকে এবং ১ ঘণ্টা পর মেয়াদ শেষ হবে।

৩. Authentication জন্য Cookie ব্যবহারের Best Practices

Next.js অ্যাপ্লিকেশনে নিরাপদ অথেন্টিকেশন প্রক্রিয়া পরিচালনার জন্য HTTP-only cookies ব্যবহৃত হয়। এই কুকিগুলি ক্লায়েন্ট সাইড স্ক্রিপ্ট থেকে অ্যাক্সেসযোগ্য হয় না, যা নিরাপত্তার জন্য গুরুত্বপূর্ণ।

উদাহরণ: HTTP-only Cookie সেট করা

import { serialize } from 'cookie';

export function setTokenCookie(res, token) {
  const cookie = serialize('auth_token', token, {
    httpOnly: true, // শুধুমাত্র সার্ভারের মাধ্যমে অ্যাক্সেসযোগ্য
    secure: process.env.NODE_ENV === 'production', // প্রোডাকশন এনভায়রনমেন্টে Secure চেক
    maxAge: 60 * 60 * 1, // 1 ঘণ্টা টোকেনের মেয়াদ
    path: '/', // গোটা সাইটের জন্য পাথ
  });

  res.setHeader('Set-Cookie', cookie);
}

ব্যাখ্যা:

• httpOnly: true: কুকি সার্ভারের বাইরে অ্যাক্সেসযোগ্য হবে না (JavaScript থেকে এটি অ্যাক্সেস করা যাবে না)।
• secure: true: প্রোডাকশন এনভায়রনমেন্টে কুকি শুধুমাত্র HTTPS এর মাধ্যমে ট্রান্সফার হবে।
• maxAge: 60 * 60 * 1: টোকেনের মেয়াদ ১ ঘণ্টা নির্ধারণ করা হয়েছে।

৪. Authorized Routes এবং Role-based Access Control

Next.js এ বিভিন্ন রোল বা পারমিশন ভিত্তিক অ্যাক্সেস কন্ট্রোল পরিচালনা করা গুরুত্বপূর্ণ। আপনি Middleware ব্যবহার করে নির্দিষ্ট রোলের জন্য অথেন্টিকেশন চেক করতে পারেন।

উদাহরণ: রোল-বেসড অ্যাক্সেস

// middleware.js

export function middleware(req) {
  const token = req.cookies.get('auth_token');
  
  if (!token) {
    return NextResponse.redirect(new URL('/login', req.url));
  }

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    
    // রোল চেক করা
    if (decoded.role !== 'admin') {
      return NextResponse.redirect(new URL('/unauthorized', req.url));
    }

    req.user = decoded;
    return NextResponse.next();
  } catch (error) {
    return NextResponse.redirect(new URL('/login', req.url));
  }
}

ব্যাখ্যা:

• decoded.role !== 'admin': এখানে আমরা চেক করছি যে ইউজারের রোল অ্যাডমিন না হলে তাকে অনুমতি দেওয়া হবে না।
• NextResponse.redirect('/unauthorized'): ইউজার যদি অরডিনারি রোলের হয়, তবে তাকে অনুমতি না দিয়ে "Unauthorized" পেজে রিডিরেক্ট করা হয়।

৫. Authentication Error Handling

Authentication Middleware ব্যবহারের সময় যথাযথ এরর হ্যান্ডলিং করা খুবই গুরুত্বপূর্ণ। যেমন, যদি কোনো ইউজারের টোকেন মেয়াদ শেষ হয়ে যায়, তখন তাকে লগইন পেজে রিডিরেক্ট করতে হবে এবং একটি ক্লিয়ার এরর মেসেজ দেখানো উচিত।

উদাহরণ: Error Handling

try {
  const decoded = jwt.verify(token, process.env.JWT_SECRET);
  req.user = decoded;
} catch (error) {
  console.error("Authentication Error: ", error);
  return NextResponse.redirect(new URL('/login', req.url));
}

ব্যাখ্যা:

• console.error: সঠিক লগিং এর মাধ্যমে যে কোনো সমস্যা ট্র্যাক করা সহজ হবে।
• NextResponse.redirect('/login'): ইউজারের টোকেন অবৈধ বা মেয়াদ শেষ হলে লগইন পেজে রিডিরেক্ট করা হচ্ছে।

সারাংশ

Next.js এ Authentication Middleware তৈরি করার জন্য এই best practices গুলি মেনে চললে, আপনি একটি নিরাপদ এবং স্কেলেবল অথেন্টিকেশন সিস্টেম তৈরি করতে পারবেন। এখানে উল্লেখিত টোকেন, কুকি, রোল-বেসড অ্যাক্সেস কন্ট্রোল এবং এরর হ্যান্ডলিং এর মতো স্ট্রাটেজিগুলি আপনার অ্যাপ্লিকেশনের নিরাপত্তা নিশ্চিত করবে।