M

MLOG

বাংলা

Next.js রুট হ্যান্ডলার ব্যবহার করে শক্তিশালী এপিআই এন্ডপয়েন্ট তৈরি করা শিখুন। এই গাইডটিতে বেসিক সেটআপ থেকে শুরু করে উন্নত কৌশল, ব্যবহারিক উদাহরণ এবং সেরা অনুশীলনগুলো অন্তর্ভুক্ত রয়েছে।

Next.js রুট হ্যান্ডলার: এপিআই এন্ডপয়েন্ট তৈরির একটি সম্পূর্ণ গাইড

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

Next.js রুট হ্যান্ডলার কী?

রুট হ্যান্ডলার হলো Next.js প্রজেক্টের app ডিরেক্টরির মধ্যে সংজ্ঞায়িত ফাংশন যা আগত HTTP অনুরোধগুলি পরিচালনা করে। পুরানো pages/api পদ্ধতির (যা এপিআই রুট ব্যবহার করে) তুলনায়, রুট হ্যান্ডলারগুলি আপনার React কম্পোনেন্টের পাশাপাশি এপিআই এন্ডপয়েন্ট সংজ্ঞায়িত করার জন্য একটি আরও সুবিন্যস্ত এবং নমনীয় উপায় প্রদান করে। এগুলি মূলত সার্ভারলেস ফাংশন যা এজ বা আপনার নির্বাচিত সার্ভার পরিবেশে কার্যকর হয়।

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

রুট হ্যান্ডলার ব্যবহারের সুবিধা

আপনার Next.js প্রজেক্ট সেট আপ করা

রুট হ্যান্ডলার ব্যবহার করার আগে, নিশ্চিত করুন যে আপনার একটি Next.js প্রজেক্ট app ডিরেক্টরি সহ সেট আপ করা আছে। যদি আপনি একটি নতুন প্রজেক্ট শুরু করেন, তবে নিম্নলিখিত কমান্ডটি ব্যবহার করুন:

npx create-next-app@latest my-nextjs-app

নতুন রাউটিং সিস্টেম সক্রিয় করতে সেটআপ প্রক্রিয়ার সময় app ডিরেক্টরিটি বেছে নিন।

আপনার প্রথম রুট হ্যান্ডলার তৈরি করা

আসুন একটি সাধারণ এপিআই এন্ডপয়েন্ট তৈরি করি যা একটি JSON প্রতিক্রিয়া ফেরত দেয়। app ডিরেক্টরির মধ্যে একটি নতুন ডিরেক্টরি তৈরি করুন, উদাহরণস্বরূপ, /app/api/hello। এই ডিরেক্টরির ভিতরে, route.ts (অথবা route.js যদি আপনি টাইপস্ক্রিপ্ট ব্যবহার না করেন) নামে একটি ফাইল তৈরি করুন।

আপনার প্রথম রুট হ্যান্ডলারের জন্য কোডটি এখানে দেওয়া হলো:

// app/api/hello/route.ts
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 return NextResponse.json({ message: 'Hello from Next.js Route Handlers!' });
}

ব্যাখ্যা:

এখন, আপনি আপনার ব্রাউজারে /api/hello-তে নেভিগেট করে বা curl বা Postman-এর মতো টুল ব্যবহার করে এই এন্ডপয়েন্টটি অ্যাক্সেস করতে পারেন।

বিভিন্ন HTTP মেথড হ্যান্ডেল করা

রুট হ্যান্ডলার GET, POST, PUT, DELETE, PATCH, এবং OPTIONS-এর মতো বিভিন্ন HTTP মেথড সমর্থন করে। আপনি একই route.ts ফাইলের মধ্যে প্রতিটি মেথডের জন্য আলাদা ফাংশন সংজ্ঞায়িত করতে পারেন।

// app/api/users/route.ts
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 // ডাটাবেস থেকে সমস্ত ব্যবহারকারী আনার লজিক
 const users = [{ id: 1, name: 'John Doe' }, { id: 2, name: 'Jane Smith' }]; // উদাহরণ ডেটা
 return NextResponse.json(users);
}

export async function POST(request: Request) {
 const data = await request.json(); // অনুরোধের বডি JSON হিসাবে পার্স করুন
 // 'data' ব্যবহার করে ডাটাবেসে নতুন ব্যবহারকারী তৈরির লজিক
 const newUser = { id: 3, name: data.name, email: data.email }; // উদাহরণ
 return NextResponse.json(newUser, { status: 201 }); // 201 Created স্ট্যাটাস কোড সহ নতুন ব্যবহারকারী ফেরত দিন
}

ব্যাখ্যা:

রিকোয়েস্ট ডেটা অ্যাক্সেস করা

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

হেডার

আপনি request.headers প্রপার্টি ব্যবহার করে অনুরোধের হেডার অ্যাক্সেস করতে পারেন:

export async function GET(request: Request) {
 const userAgent = request.headers.get('user-agent');
 console.log('User Agent:', userAgent);
 return NextResponse.json({ userAgent });
}

ক্যোয়ারী প্যারামিটার

ক্যোয়ারী প্যারামিটার অ্যাক্সেস করতে, আপনি URL কনস্ট্রাক্টর ব্যবহার করতে পারেন:

export async function GET(request: Request) {
 const url = new URL(request.url);
 const searchParams = new URLSearchParams(url.search);
 const id = searchParams.get('id');
 console.log('ID:', id);
 return NextResponse.json({ id });
}

রিকোয়েস্ট বডি

POST, PUT, এবং PATCH অনুরোধের জন্য, আপনি কন্টেন্ট টাইপের উপর নির্ভর করে request.json() বা request.text() মেথড ব্যবহার করে অনুরোধের বডি অ্যাক্সেস করতে পারেন।

export async function POST(request: Request) {
 const data = await request.json();
 console.log('Data:', data);
 return NextResponse.json({ receivedData: data });
}

প্রতিক্রিয়া (Response) ফেরত দেওয়া

NextResponse অবজেক্টটি এপিআই প্রতিক্রিয়া তৈরি করতে ব্যবহৃত হয়। এটি হেডার, স্ট্যাটাস কোড এবং প্রতিক্রিয়া বডি সেট করার জন্য বেশ কয়েকটি মেথড সরবরাহ করে।

JSON প্রতিক্রিয়া

JSON প্রতিক্রিয়া ফেরত দিতে NextResponse.json() মেথড ব্যবহার করুন:

return NextResponse.json({ message: 'Success!', data: { name: 'John Doe' } }, { status: 200 });

টেক্সট প্রতিক্রিয়া

প্লেইন টেক্সট প্রতিক্রিয়া ফেরত দিতে new Response() কনস্ট্রাক্টর ব্যবহার করুন:

return new Response('Hello, world!', { status: 200, headers: { 'Content-Type': 'text/plain' } });

রিডাইরেক্ট

ব্যবহারকারীদের একটি ভিন্ন URL-এ রিডাইরেক্ট করতে NextResponse.redirect() ব্যবহার করুন:

import { redirect } from 'next/navigation';
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 return NextResponse.redirect(new URL('/new-location', request.url));
}

হেডার সেট করা

আপনি NextResponse.json() বা new Response()-এর headers অপশন ব্যবহার করে কাস্টম হেডার সেট করতে পারেন:

return NextResponse.json({ message: 'Success!' }, { status: 200, headers: { 'Cache-Control': 'no-cache' } });

মিডলওয়্যার ইন্টিগ্রেশন

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

মিডলওয়্যার তৈরি করতে, app ডিরেক্টরি বা যেকোনো সাবডিরেক্টরিতে middleware.ts (বা middleware.js) নামে একটি ফাইল তৈরি করুন। মিডলওয়্যারটি সেই ডিরেক্টরি এবং তার সাবডিরেক্টরির সমস্ত রুটের জন্য প্রযোজ্য হবে।

// app/middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

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

 if (!token) {
 return NextResponse.redirect(new URL('/login', request.url));
 }

 return NextResponse.next();
}

export const config = {
 matcher: ['/protected/:path*'], // এই মিডলওয়্যারটি /protected/ দিয়ে শুরু হওয়া পাথগুলিতে প্রয়োগ করুন
};

ব্যাখ্যা:

ত্রুটি ব্যবস্থাপনা (Error Handling)

শক্তিশালী এপিআই তৈরির জন্য সঠিক ত্রুটি ব্যবস্থাপনা অত্যন্ত গুরুত্বপূর্ণ। আপনি ব্যতিক্রমগুলি পরিচালনা করতে এবং উপযুক্ত ত্রুটি প্রতিক্রিয়া ফেরত দিতে try...catch ব্লক ব্যবহার করতে পারেন।

export async function GET(request: Request) {
 try {
 // একটি ত্রুটি সিমুলেট করুন
 throw new Error('Something went wrong!');
 } catch (error: any) {
 console.error('Error:', error);
 return NextResponse.json({ error: error.message }, { status: 500 });
 }
}

ব্যাখ্যা:

স্ট্রিমিং প্রতিক্রিয়া

রুট হ্যান্ডলারগুলি স্ট্রিমিং প্রতিক্রিয়া সমর্থন করে, যা আপনাকে ক্লায়েন্টের কাছে ধাপে ধাপে ডেটা পাঠাতে দেয়। এটি বিশেষত বড় ডেটাসেট বা দীর্ঘ সময় ধরে চলা প্রসেসের জন্য দরকারী।

import { Readable } from 'stream';
import { NextResponse } from 'next/server';

async function* generateData() {
 for (let i = 0; i < 10; i++) {
 await new Promise(resolve => setTimeout(resolve, 500)); // বিলম্ব সিমুলেট করুন
 yield `Data chunk ${i}\n`;
 }
}

export async function GET(request: Request) {
 const readableStream = Readable.from(generateData());

 return new Response(readableStream, {
 headers: { 'Content-Type': 'text/plain; charset=utf-8' },
 });
}

ব্যাখ্যা:

অথেন্টিকেশন এবং অথোরাইজেশন

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

অথেন্টিকেশন

অথেন্টিকেশন অনুরোধকারী ব্যবহারকারীর পরিচয় যাচাই করে। সাধারণ অথেন্টিকেশন পদ্ধতিগুলির মধ্যে রয়েছে:

এখানে মিডলওয়্যার ব্যবহার করে JWT অথেন্টিকেশনের একটি উদাহরণ দেওয়া হলো:

// app/middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import jwt from 'jsonwebtoken';

const secret = process.env.JWT_SECRET || 'your-secret-key'; // একটি শক্তিশালী, র‍্যান্ডমভাবে জেনারেট করা সিক্রেট দিয়ে প্রতিস্থাপন করুন

export function middleware(request: NextRequest) {
 const token = request.cookies.get('auth-token')?.value;

 if (!token) {
 return NextResponse.json({ message: 'Authentication required' }, { status: 401 });
 }

 try {
 jwt.verify(token, secret);
 return NextResponse.next();
 } catch (error) {
 return NextResponse.json({ message: 'Invalid token' }, { status: 401 });
 }
}

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

অথোরাইজেশন

অথোরাইজেশন নির্ধারণ করে যে একজন ব্যবহারকারী কোন রিসোর্স অ্যাক্সেস করার অনুমতিপ্রাপ্ত। এটি সাধারণত ভূমিকা বা অনুমতির উপর ভিত্তি করে করা হয়।

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

// app/api/admin/route.ts
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 // ধরুন আপনার কাছে টোকেন বা সেশন থেকে ব্যবহারকারীর ভূমিকা পাওয়ার জন্য একটি ফাংশন আছে
 const userRole = await getUserRole(request);

 if (userRole !== 'admin') {
 return NextResponse.json({ message: 'Unauthorized' }, { status: 403 });
 }

 // অ্যাডমিন ডেটা পুনরুদ্ধার করার লজিক
 const adminData = { message: 'Admin data' };
 return NextResponse.json(adminData);
}

async function getUserRole(request: Request): Promise {
 // অনুরোধ থেকে ব্যবহারকারীর ভূমিকা বের করার জন্য আপনার আসল লজিক দিয়ে প্রতিস্থাপন করুন
 // এটি একটি JWT টোকেন যাচাই করা বা একটি সেশন পরীক্ষা করা জড়িত থাকতে পারে
 return 'admin'; // উদাহরণ: প্রদর্শনের জন্য হার্ডকোডেড ভূমিকা
}

রুট হ্যান্ডলার ডিপ্লয় করা

রুট হ্যান্ডলারগুলি আপনার নির্বাচিত হোস্টিং প্রদানকারীতে সার্ভারলেস ফাংশন হিসাবে ডিপ্লয় করা হয়। Next.js বিভিন্ন ডিপ্লয়মেন্ট প্ল্যাটফর্ম সমর্থন করে, যার মধ্যে রয়েছে Vercel, Netlify, AWS, এবং আরও অনেক।

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

উন্নত কৌশল

এজ ফাংশন

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

একটি রুট হ্যান্ডলারকে এজ ফাংশন হিসাবে ডিপ্লয় করতে, আপনার route.ts ফাইলে edge রানটাইম যোগ করুন:

export const runtime = 'edge';

import { NextResponse } from 'next/server';

export async function GET(request: Request) {
 return NextResponse.json({ message: 'Hello from the Edge!' });
}

সার্ভার অ্যাকশন

সার্ভার অ্যাকশন আপনাকে সরাসরি আপনার React কম্পোনেন্ট থেকে সার্ভার-সাইড কোড কার্যকর করতে দেয়। রুট হ্যান্ডলার এবং সার্ভার অ্যাকশনগুলি নির্বিঘ্নে একসাথে কাজ করে, যা আপনাকে সহজে জটিল অ্যাপ্লিকেশন তৈরি করতে দেয়।

এখানে একটি রুট হ্যান্ডলারকে কল করার জন্য একটি সার্ভার অ্যাকশন ব্যবহারের উদাহরণ দেওয়া হলো:

// app/components/MyComponent.tsx
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';

async function handleSubmit(data: FormData) {
 'use server';

 const name = data.get('name');
 const email = data.get('email');

 const response = await fetch('/api/users', {
 method: 'POST',
 body: JSON.stringify({ name, email }),
 });

 if (response.ok) {
 router.refresh(); // পরিবর্তনগুলি প্রতিফলিত করতে পৃষ্ঠাটি রিফ্রেশ করুন
 }
}

export default function MyComponent() {
 const router = useRouter();

 return (
 

 
 


 
 


 
 

 );
}

ক্যাশিং

ক্যাশিং আপনার এপিআই এন্ডপয়েন্টগুলির পারফরম্যান্স উল্লেখযোগ্যভাবে উন্নত করতে পারে। আপনি Cache-Control হেডার ব্যবহার করে আপনার প্রতিক্রিয়াগুলি ব্রাউজার এবং CDN দ্বারা কীভাবে ক্যাশ করা হবে তা নিয়ন্ত্রণ করতে পারেন।

return NextResponse.json({ message: 'Success!' }, { status: 200, headers: { 'Cache-Control': 'public, max-age=3600' } });

এই উদাহরণটি Cache-Control হেডারটিকে public, max-age=3600 এ সেট করে, যা ব্রাউজার এবং CDN-কে প্রতিক্রিয়াটি এক ঘন্টার জন্য ক্যাশ করতে বলে।

সেরা অনুশীলন (Best Practices)

বাস্তব-বিশ্বের উদাহরণ

এখানে রুট হ্যান্ডলারগুলি কীভাবে ব্যবহার করা যেতে পারে তার কয়েকটি বাস্তব-বিশ্বের উদাহরণ দেওয়া হলো:

আন্তর্জাতিক ই-কমার্স উদাহরণ: ব্যবহারকারীর দেশের উপর ভিত্তি করে পণ্যের মূল্য পুনরুদ্ধার করতে ব্যবহৃত একটি রুট হ্যান্ডলার। এন্ডপয়েন্টটি ব্যবহারকারীর অবস্থান নির্ধারণ করতে অনুরোধের ভূ-অবস্থান (IP ঠিকানা থেকে প্রাপ্ত) ব্যবহার করতে পারে এবং উপযুক্ত মুদ্রায় মূল্য ফেরত দিতে পারে। এটি একটি স্থানীয়কৃত কেনাকাটার অভিজ্ঞতায় অবদান রাখে।

গ্লোবাল অথেন্টিকেশন উদাহরণ: বিশ্বব্যাপী ব্যবহারকারীদের জন্য মাল্টি-ফ্যাক্টর অথেন্টিকেশন (MFA) বাস্তবায়নকারী একটি রুট হ্যান্ডলার। এটি বিভিন্ন অঞ্চলের গোপনীয়তা বিধি এবং টেলিযোগাযোগ অবকাঠামোর প্রতি সম্মান রেখে এসএমএস কোড পাঠানো বা অথেন্টিকেটর অ্যাপ ব্যবহার করতে পারে।

বহুভাষিক কনটেন্ট ডেলিভারি: ব্যবহারকারীর পছন্দের ভাষায় কনটেন্ট সরবরাহকারী একটি রুট হ্যান্ডলার। এটি অনুরোধের `Accept-Language` হেডার থেকে নির্ধারণ করা যেতে পারে। এই উদাহরণটি সঠিক UTF-8 এনকোডিং এবং যেখানে উপযুক্ত সেখানে ডান-থেকে-বাম ভাষার সমর্থনের প্রয়োজনীয়তা তুলে ধরে।

উপসংহার

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

এই সম্পূর্ণ গাইডটি বেসিক সেটআপ থেকে শুরু করে উন্নত কৌশল পর্যন্ত সবকিছু কভার করেছে। এই গাইডে বর্ণিত সেরা অনুশীলনগুলি অনুসরণ করে, আপনি উচ্চ-মানের এপিআই তৈরি করতে পারেন যা সুরক্ষিত, পারফরম্যান্ট এবং রক্ষণাবেক্ষণযোগ্য।