Next.js-এ Upstash Redis ব্যবহার করে নিরাপদ সেশন ম্যানেজমেন্ট

এই গাইডে, আমরা Next.js অ্যাপে Upstash Redis ব্যবহার করে সেশন ম্যানেজমেন্টের মাধ্যমে হয়ে যাবো, শিখবো "সেশন" একটি ওয়েব অ্যাপ্লিকেশনে কী বোঝায়, কেন Redis সেশন ম্যানেজমেন্টের জন্য একটি goto পছন্দ, কীভাবে একটি Upstash Redis ডেটাবেস সেট আপ করতে হয়, এবং শেষে, কীভাবে এটি একটি Next.js অ্যাপ্লিকেশনে ইন্টিগ্রেট করতে হয়।

"সেশন" কী?

একটি ওয়েব অ্যাপ্লিকেশনে, "সেশন" হলো একটি টেম্পোরারি, সার্ভার-সাইড স্টোরেজ মেকানিজম যা ব্যবহার করা হয় একটি ইউজারের অ্যাপ্লিকেশনের সাথে ইন্টারঅ্যাকশনের স্টেট মেইনটেইন করতে একাধিক HTTP রিকোয়েস্ট জুড়ে একটি নির্দিষ্ট টাইম ইন্টারভালে।

যেহেতু HTTP একটি স্টেটলেস প্রোটোকল, অর্থাৎ প্রতিটি রিকোয়েস্ট স্বাধীন এবং পূর্বের ইন্টারঅ্যাকশনগুলো "মনে রাখে" না, সেশনগুলো সার্ভারকে ইউজার-স্পেসিফিক ডেটা ট্র্যাক এবং স্টোর করতে দেয় যেমন অথেন্টিকেশন স্ট্যাটাস, পছন্দ, বা ইউজারের যেকোনো ধরনের অ্যাক্টিভিটি তাদের ওয়েবসাইটে रहने کے دوران।

সেশন عادةً কাজ করে একটি যুনিক সেশন আইডি ক্লায়েন্ট সাইডে স্টোর করে, সাধারণত একটি কুকিতে। সার্ভার এই আইডিটি ব্যবহার করে ইউজার সেশনের সাথে সম্পর্কিত ডেটা একটি সেশন স্টোরেজ থেকে রিট্রিভ করে, যেমন Redis এই ব্লগে, প্রতিবার ইউজার সাইটের সাথে ইন্টারঅ্যাক্ট করলে।

ওয়েব অ্যাপ্লিকেশনে সেশন ইউজার ইন্টারঅ্যাকশন এবং স্টেট ম্যানেজমেন্ট হ্যান্ডেল করার একটি চমৎকার উপায়:

• ইউজার অথেন্টিকেশন: সেশন ইউজারকে অথেন্টিকেট করতে সাহায্য করে এবং তাদের লগড-ইন স্টেট পেজ জুড়ে বা রিফ্রেশ করার পরেও মনে রাখে।
• পারসোনালাইজেশন: সেশন সার্ভারকে ডেটা স্টোর এবং রিট্রিভ করতে দেয় যেমন ইউজার পছন্দ, অথেন্টিকেশন স্ট্যাটাস, ইত্যাদি।
• সিকিউরিটি: সঠিক সেশন ম্যানেজমেন্ট অ্যাপ সিকিউরিটি বাড়াতে পারে, যেমন CSRF-র chốngে রক্ষা এবং অনঅথরাইজড ইউজাররা রস্ট্রিক্টেড এরিয়া অ্যাক্সেস না করে তা নিশ্চিত করে।

কেন সেশন ম্যানেজমেন্টের জন্য Redis?

কেন না :)

Redis সেশন স্টোর হিসেবে ব্যবহার করার জন্য একাধিক কারণ আছে। এখানে Redis-এর স্ট্রাকচার থেকে উত্থান কিছু সুবিধা:

• ডেটা আর্কিটেকচার: Redis একটি ইন-মেমরি কী-ভ্যালু স্টোর। কী-ভ্যালু পেয়ারগুলো হ্যাশে স্টোর করা যায়, যেখানে একটি হ্যাশ হলো একটি রেকর্ড টাইপ স্ট্রাকচার্ড আসএ ফিল্ড-ভ্যালু পেয়ার কালেকশন। এই স্ট্রাকচারটি সেশন ম্যানেজমেন্ট ডেটা টাইপের সাথে পারফেক্টলি ফিট করে সেশন ডেটার সব কিছু, যেমন ইউজারনেম, ইউজার পছন্দ ইত্যাদি একটি হ্যাশে প্রতি ইউজার সেশনে কী-ভ্যালু ফরম্যাটে মেইনটেইন করতে।

• ডেটা এক্সপায়ারি: Redis-এ এক্সপায়ার্ড ডেটা ডিলিট করার বিল্ট-ইন ফাংশনালিটি আছে। এটি ওয়েব অ্যাপ্লিকেশনগুলোক ইউজার সেশন টাইম-বাউন্ড রাখতে সাহায্য করে।

• লো লেটেন্সি: তার "ইন-মেমরি" প্রকৃতির কারণে, Redis অত্যন্ত দ্রুত। তাই এটি সাধারণত ইউজার সেশন এবং ক্যাশ ডেটার জন্য ব্যবহার হয়।

• স্কেলেবিলিটি: Redis বড় ভলিউমের ডেটা এবং হাই-থ্রুপুট ট্রাফিক হ্যান্ডেল করার জন্য তৈরি।

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

• ইউজার টেম্পারিং-এর কম ভালনারেবল: কুকিস ইউজারদের কাছে দৃশ্যমান এবং ইউজার দ্বারা ম্যানিপুলেট করা যায়। Redis আমাদের ইউজার ডেটা ইউজারদের দ্বারা ম্যানিপুলেট হোনো থেকে রক্ষা করতে দেয়।

• ক্লায়েন্ট এবং সার্ভারের মাঝপথে কম ডেটা ট্রান্সফার: যেহেতু আমরা সকল সেশন ইনফরমেশন Redis-এ স্টোর করি, আমাদের ক্লায়েন্ট মেশিনে কিছু স্টোর করার প্রয়োজন নেই।

• ক্লায়েন্ট মেশিনে শুধু "SessionId" স্টোর করা: যদি আমরা Redis ব্যবহার করি, তবে আমাদের শুধু sessionId প্রয়োজন প্রতিটি রিকোয়েস্টে জানতে এই রিকোয়েস্ট কোন সেশনে।

Upstash Redis ডেটাবেস তৈরি করা

Upstash Redis সেটআপে ঝাঁপড়াওড়ার আগে, আমাদের প্রথমে Upstash Redis-এর সুবিধা বুঝতে হবে। আমরা যে টুলগুলো ব্যবহার করতে যাচ্ছি সেগুলো কেন ব্যবহার করা উচিত তা বুঝা ছাড়া কোনো অর্থ থাকবে না, ঠিক ন?

আসুন Upstash Redis ব্যবহারের মূল সুবিধাগুলো দেখি:

• সার্ভারлес: Upstash Redis একটি সার্ভারлес ডেটাবেস। আপনাকে ইনফ্রাস্ট্রাকচার মেইনটেইন করতে হবে না, ডেটাবেসের স্কেলিং বা অন্য কোনো লো-লেভেল কনফিগারেশন নিয়ে চিন্তা করতে হবে না। আপনি শুধু ডেটাবেস তৈরি করুন এবং ব্যবহার করুন।

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

• পে এজ ইউ গো: কোনো এন্ট্রেন্স প্রাইস নেই। আপনি শুধু যতটুকু ব্যবহার করবেন ততটুকু পে করবেন। প্রাইসিং ডিটেইলস দেখতে পারেন।

ঠিক আছে, যদি আমাদের Upstash Redis সেশন ম্যানেজমেন্টের জন্য কেন ব্যবহার করছি তা নিয়ে আর কোনো প্রশ্ন না থাকে, তবে আমরা Upstash Redis ডেটাবেস তৈরি করতে পারি।

আমরা Upstash কনসোলের মাধ্যমে একটি Redis ডেটাবেস তৈরি করব।

“Create Database” বাটনে ক্লিক করে একটি Redis ডেটাবেস তৈরি করুন। এই টিউটোরিয়াল একবার আবার দেখাবে কতটুকু সহজ এবং দ্রুত একটি Upstash Redis ডেটাবেস তৈরি করা।

দেখানো মডালে, আমরা আমাদের ডেটাবেসের জন্য একটি নাম সিলেক্ট করব এবং একটি রিজন সিলেক্ট করব। এটি ভালো হয় আপনার সার্ভিসের সাথে একই রিজন সিলেক্ট করা।

নেক্সট বাটনে ক্লিক করার পর, আমরা প্রাইসিং প্ল্যান সিলেক্ট করব। Pay as you go with max budget limit আমার ফেভারিট!

এখন, আমাদের Redis ডেটাবেস রেডি। আমরা ডেটাবেস এন্ডপয়েন্ট, ডেটাবেসের সাথে কানেক্ট করার পাসওয়ার্ড এবং এর পোর্ট Redis ড্যাশবোর্ডে দেখতে পাচ্ছি। আমাদের এই ইনফরমেশন প্রয়োজন হবে যখন আমরা ওয়েব অ্যাপ্লিকেশন থেকে ডেটাবেসে কানেক্ট করতে চাইব।

সেটাই সব!

Nextjs অ্যাপে Upstash Redis ব্যবহার করা

আসুন দেখি Redis কীভাবে ওয়েব অ্যাপ্লিকেশন ইনফ্রাস্ট্রাকচারের মধ্যে কাজ করবে:

• আমরা প্রথমে ক্লায়েন্ট ব্রাউজার থেকে রিকোয়েস্ট পাই কোনো সেশনআইডি ছাড়া।

• যেহেতু রিকোয়েস্টে কোনো সেশনআইডি নেই, আমরা একটি সেশনআইডি তৈরি করি এবং Redis-এ একটি হ্যাশ তৈরি করি।

• রেসপন্সে ক্লায়েন্ট মেশিনে সেশনআইডি কুকি হিসেবে রিটার্ন করি।

• যখন আমরা সেশনআইডিসহ একটি নতুন HTTP রিকোয়েস্ট পাই, আমরা Redis থেকে প্রয়োজনীয় সেশন ডেটা রিট্রিভ করি এবং ক্লায়েন্টকে রেসপন্স দিতে সেটি ব্যবহার করি।

সার্ভিস এবং এর Redis-এর সাথে কানেকশনের সিকুয়েন্স ডায়াগ্রাম নিচে দেয়া হলো প্রসেস ভালোভাবে ভিজুয়ালাইজ করার জন্য:

যদি সব কিছু ঠিক থাকে, আমরা একটি Nextjs অ্যাপ তৈরি করতে পারি নিচের কমান্ড টার্মিনালে রান করে যদি না থাকে:

npx create-next-app@latest  

এখন আমাদের Upstash Redis Typescript SDK ইনস্টল করতে হবে।

cd  npm install @upstash/redis 

প্রয়োজনীয় ডিপেন্ডেন্সি ইনস্টল হওয়ার পর, আমরা এখন একটি ইন্টারফেস তৈরি করতে পারি সেশন আইডি ম্যানেজ করার জন্য ইউজারের ব্রাউজারের কুকিজে এবং Upstash Redis-এ ইন্টারঅ্যাক্ট করার জন্য, আমাদের অ্যাপের সেশন স্টোরেজ।

আমরা এই ইন্টারফেসটি /app/lib/sessionManager.tsx ফাইলে ইমপ্লিমেন্ট করব।

import { Redis } from '@upstash/redis' import { cookies } from 'next/headers' export const redis = new Redis({ url: '', token: 'UPSTASH-REDIS-TOKEN', }) type SessionId = string; type Key = 'userName' | 'sessionStatus'; // other keys of the session data can be added. export async function getSessionId(): SessionId | undefined { const cookieStore = await cookies(); return cookieStore.get("session-id")?.value; } async function setSessionId(sessionId: SessionId): void { const cookieStore = await cookies(); cookieStore.set("session-id", sessionId); } export async function getSessionIdAndCreateIfMissing() { const sessionId = await getSessionId(); if (!sessionId) { const newSessionId = crypto.randomUUID(); await setSessionId(newSessionId); return newSessionId; } return sessionId; } export async function get(key: Key, username: string = "") { const sessionId = await getSessionId(); if (!sessionId) { return null; } return await redis.hget(`session-${username}-${sessionId}`, key); } export async function getAll(username: string = "") { const sessionId = await getSessionId(); if (!sessionId) { return null; } return await redis.hgetall(`session-${username}-${sessionId}`); } export async function set(key: Key, value: string, username: string = "") { const sessionId = await getSessionIdAndCreateIfMissing(); await redis.hset(`session-${username}-${sessionId}`, { [key]: value }); return redis.expire(`session-${username}-${sessionId}`, 900); }

এই ফাংশনগুলো পরীক্ষা করি।

• getSessionId: আমরা সেশন আইডি ইউজারদের ব্রাউজারের কুকিজে স্টোর করব। এই ফাংশনটি হলো ব্রাউজার কুকিজ থেকে সেশন আইডি পেতে যা HTTP কলের ভিতরে API-তে পাঠানো হয়।

• setSessionId: এই ফাংশনটি সেশন আইডি কুকি সেট করে দিয়ে দেয় দিয়ে गये সেশন আইডি প্যারামিটার।

• getSessionIdAndCreateIfMissing: এই ফাংশনটি getSessionId কল করে এক্সিস্টিং সেশন আইডি কুকিজ থেকে পেতে এবং একটি নতুন র‍্যান্ডম UUID সেট করে নতুন সেশন আইডি হিসেবে যদি ইতিমধ্যে ইউজারের ব্রাউজারে কোনো সেশন আইডি না থাকে। এই ফাংশনটি নতুন সেশন আইডিও কুকিজে অ্যাড করে ব্রাউজারে পাঠাতে।

• getSessionData: আমরা এই ফাংশনটি কল করব সেশন ডেটা Redis থেকে পেতে। এটি দিয়ে गये কী সেশন ডেটা Upstash Redis থেকে পাবে এবং রিটার্ন করবে।

• getAllSessionData: এই ফাংশনটি সব সেশন ডেটা পায়। এটি সেশন হ্যাশের সব কী-ভ্যালু পেয়ার Upstash Redis থেকে পায়।

• setSessionData: আমরা দিয়ে गये সেশনের কী-ভ্যালু পেয়ার সেট করব এই ফাংশনে।

যেহেতু সেশন আইডি এবং Upstash Redis দিয়ে সেশন স্টোরেজ ম্যানেজ করার ইউটিলিটি ফাংশনগুলো রেডি, আমরা এখন একটি API ইমপ্লিমেন্ট করতে পারি যা এই ফাংশনগুলো ব্যবহার করে।

APIটি খুব সিম্পল হবে। এটি পথ থেকে ইউজারনেম রিসিভ করবে। একবার রিকোয়েস্ট পাওয়ার পর, এটি প্রথমে চেক করবে কুকিজে সেশন আইডি এক্সিস্ট করে কিনা। যদি কুকিজে কোনো সেশন আইডি না থাকে, তবে এটি একটি নতুন আইডি জেনারেট করবে এবং রেসপন্সে কুকিজে সেট করবে। যদি সেশন আইডি এক্সিস্ট করে, তবে এটি চেক করবে Upstash Redis-এ সেই সেশনকে রিপ্রেজেন্ট করার হ্যাশে কোনো কী আছে কিনা। যদি না থাকে, তবে সেটি সেই হ্যাশে কী-ভ্যালু পেয়ার তৈরি করবে।

চলুন কোড লিখি!

APIটি Nextjs-এর অ্যাপ রাউটার ব্যবহার করে তৈরি হবে।

আমাদের app/api/user/[username]namedroute.tsx` নামে একটি ফাইল তৈরি করতে হবে।

 import * as sessionStore from '../../lib/session' export async function GET(request: Request,{ params }: { params: Promise<{ user: string }> }){ const userName = (await params).user; const sessionId = await sessionStore.getSessionIdAndCreateIfMissing(); const sessionStatus = await sessionStore.get('sessionStatus', userName); if(sessionStatus == null) { console.log('There is no active session.'); await sessionStore.set('sessionStatus', 'ACTIVE', userName); } return Response.json({ userName: userName, sessionId: sessionId }); } 

এই রুট ফাইলটি Nextjs কে অনুমতি দেবে <URL>:3000/api/user/<username> পাঠানো রিকোয়েস্টকে নিজের ভিতরে ডিফাইন করা HTTP মেথডগুলোতে রিজল্ভ করতে।

এখন, আমরা একশনে দেখব। Nextjs অ্যাপটি রান করি টার্মিনাল থেকে রুট ডিরেক্টরিতে যেয়ে নিচের কমান্ড রান করে:

npm run dev 

এখন, আমরা API এন্ডপয়েন্ট, https://localhost:3000/api/user/noah ব্রাউজারে খুলতে পারি। আপনি যখন খুলবেন, আপনার ইউজারনেম এবং সেশন আইডি রিটার্নড দেখতে পাবেন:

{"userName":"noah","sessionId":"804814dc-10fc-4b0a-a4c1-321f4b54d399"} 

আপনি রাইট-ক্লিক করে ইন্সপেক্ট করলে, আপনি "Application" ট্যাবে যেতে সেশন-আইডি কুকিজে সেট করা দেখতে পাবেন।

আমরা Upstash Redis-ও চেক করতে পারি সেশন ডেটাবেসে তৈরি হয়েছে কিনা। চেক করতে, আমাদের Upstash Redis কনসোলে ফিরে যেতে হবে, Redis ডেটাবেস খুলতে হবে এবং Data Browser ট্যাব খুলতে হবে।

Data Browser ট্যাবটি নিচের মতো সেশন ডেটা দেখাবে।

উপসংহার

Next.js অ্যাপে Upstash Redis দিয়ে সেশন ম্যানেজ করা একটি স্কেলেবল এবং ইফিশিয়েন্ট সমাধান প্রদান করে। এই ব্লগ পোস্টে, আমরা একটি Nextjs অ্যাপ তৈরি করেছি এবং এটি Upstash Redis-র সাথে ইন্টিগ্রেট করেছি সেশন ম্যানেজমেন্ট স্টোরেজ হিসেবে ব্যবহার করার জন্য।

একটি Redis ডেটাবেস সেট আপ করে এবং এটি Next.js-এ স্মূথলি ইন্টিগ্রেট করে, আপনি কার্যকরভাবে সেশন স্টোরেজ হ্যান্ডেল করতে পারেন ট্র্যাডিশনাল সার্ভার-সাইড জটিলতা ছাড়া। এই পদ্ধতিটি ডেভেলপারদের জন্য আইডিয়াল যারা সেশন ম্যানেজমেন্টে পারফরম্যান্স এবং সিমপ্লিসিটি খুঁজছেন।

আশা করি এই গাইড আপনাকে আপনার Next.js অ্যাপ্লিকেশনগুলিতে Upstash Redis কে একটি विश्वস্ত সেশন স্টোর হিসেবে ইমপ্লিমেন্ট করার জন্য একটি স্পষ্ট পাথওয়ে প্রদান করেছে।