Next.js ডাইনামিক API রাউটিং সমর্থন করে, যার মাধ্যমে আপনি সার্ভার সাইডে ডাইনামিক ডেটা পরিচালনা করতে পারেন। এটি সাধারণ React অ্যাপ্লিকেশনে স্রেফ fetch বা axios ব্যবহার করে ডেটা আনার চেয়ে আরও শক্তিশালী এবং সহজ। Next.js API রাউটগুলি pages/api/ ফোল্ডারে সংরক্ষিত থাকে এবং এখানে ডাইনামিক API রাউট ব্যবহার করা যায়।
এটি ব্যবহার করে আপনি সহজেই ডাইনামিক ডেটা নিয়ে কাজ করতে পারেন, যেমন ডেটাবেস থেকে ডেটা আনা বা URL প্যারামিটার দিয়ে ডেটা ফিল্টার করা।
১. Next.js এ API Routes কী?
Next.js এ API রাউটগুলি pages/api/ ডিরেক্টরির অধীনে তৈরি হয়। প্রতিটি ফাইল একটি API এন্ডপয়েন্টের মতো কাজ করে, যেখানে আপনি সার্ভার সাইড কোড রান করতে পারেন। এর মধ্যে আপনি বিভিন্ন HTTP মেথড যেমন GET, POST, PUT, DELETE ইত্যাদি ব্যবহার করতে পারেন।
এখন, ডাইনামিক API রাউটিং কীভাবে কাজ করে তা বুঝতে হবে।
২. Dynamic API Routes (ডাইনামিক API রাউটস)
ডাইনামিক API রাউট ব্যবহার করে আপনি URL প্যারামিটার এবং কোয়েরি প্যারামিটার গ্রহণ করতে পারেন, যা আপনাকে আরও কাস্টম ডেটা প্রোসেসিংয়ের সুবিধা দেয়। ডাইনামিক API রাউট ফাইলের নাম [param].js (বা [param].ts) এর মতো রাখা হয়।
উদাহরণ:
ধরা যাক, আপনি একটি ব্লগের পোস্টগুলোকে API রাউটের মাধ্যমে রিটার্ন করতে চান, যেখানে প্রতিটি পোস্টের একটি ডাইনামিক আইডি থাকবে। আপনি [id].js ফাইল ব্যবহার করতে পারেন।
pages/api/posts/[id].js:
export default function handler(req, res) {
const {
query: { id }, // URL থেকে ডাইনামিক প্যারামিটার 'id' গ্রহণ
} = req
// এখানে ডাইনামিক ডেটা ফেচ করা যেতে পারে, যেমন ডেটাবেস থেকে আইডি অনুযায়ী পোস্ট খুঁজে বের করা
const post = {
id: id,
title: `Post Title ${id}`,
content: `This is the content for post number ${id}`,
}
res.status(200).json(post) // JSON রেসপন্স পাঠানো
}
এখানে, [id].js ফাইলটি একটি ডাইনামিক API রাউট। URL এর id প্যারামিটারটি গ্রহণ করে, সেই অনুযায়ী একটি পোস্টের তথ্য রিটার্ন করে।
URL উদাহরণ:
http://localhost:3000/api/posts/1→{ "id": "1", "title": "Post Title 1", "content": "This is the content for post number 1" }http://localhost:3000/api/posts/2→{ "id": "2", "title": "Post Title 2", "content": "This is the content for post number 2" }
এখানে URL এর id প্যারামিটারটি ডাইনামিকভাবে গ্রহণ করা হচ্ছে এবং এর ভিত্তিতে পেজের কন্টেন্ট রিটার্ন করা হচ্ছে।
৩. API রাউটসে HTTP মেথড ব্যবহার
Next.js API রাউটে বিভিন্ন HTTP মেথড (GET, POST, PUT, DELETE) ব্যবহার করা যায়। আপনি req.method এর মাধ্যমে নির্ধারণ করতে পারেন কোন HTTP মেথডটি ব্যবহৃত হচ্ছে এবং তাতে ভিত্তি করে আপনার লজিক প্রয়োগ করতে পারেন।
উদাহরণ:
export default function handler(req, res) {
const { method } = req
switch (method) {
case 'GET':
// GET মেথডের জন্য ডেটা রিটার্ন করা
res.status(200).json({ message: 'GET request successful' })
break
case 'POST':
// POST মেথডের জন্য ডেটা গ্রহণ এবং সেভ করা
const newPost = req.body
res.status(201).json({ message: 'Post created', data: newPost })
break
default:
res.status(405).json({ message: 'Method Not Allowed' })
break
}
}
এখানে:
GETমেথডের মাধ্যমে ডেটা রিটার্ন করা হচ্ছে।POSTমেথডের মাধ্যমে নতুন ডেটা গ্রহণ করা হচ্ছে এবং সেটা সেভ করা হচ্ছে।
এটি আপনাকে একটি API এন্ডপয়েন্টের মধ্যে একাধিক HTTP মেথড পরিচালনা করার সুযোগ দেয়।
৪. ডাইনামিক API রাউট এবং কোয়েরি প্যারামিটার
Next.js API রাউট ব্যবহার করে আপনি URL এর কোয়েরি প্যারামিটারও গ্রহণ করতে পারেন, যা আপনাকে আরও নমনীয়তা দেয়। কোয়েরি প্যারামিটারগুলো req.query এর মাধ্যমে অ্যাক্সেস করা যায়।
উদাহরণ:
export default function handler(req, res) {
const { query } = req
const { category, sort } = query // কোয়েরি প্যারামিটার 'category' এবং 'sort' গ্রহণ
// ডেটা ফিল্টার বা প্রসেস করা
const filteredPosts = {
category: category || 'all',
sort: sort || 'asc',
posts: [] // ফিল্টার করা পোস্টের তালিকা
}
res.status(200).json(filteredPosts) // JSON রেসপন্স
}
এখানে, আপনি category এবং sort কোয়েরি প্যারামিটার গ্রহণ করে ডেটা ফিল্টার বা প্রসেস করতে পারেন।
URL উদাহরণ:
http://localhost:3000/api/posts?category=tech&sort=deschttp://localhost:3000/api/posts?category=travel&sort=asc
এতে আপনাকে ডাইনামিকভাবে বিভিন্ন ক্যাটেগরি বা সোর্টিং অনুযায়ী ডেটা ফিল্টার করতে সহায়তা করবে।
সারাংশ
Next.js এর ডাইনামিক API রাউটিং আপনাকে খুবই নমনীয়তা দেয়, যার মাধ্যমে আপনি URL প্যারামিটার, কোয়েরি প্যারামিটার, এবং বিভিন্ন HTTP মেথড ব্যবহার করে ডেটা নিয়ন্ত্রণ করতে পারেন। এটি অত্যন্ত কার্যকরী যখন আপনার প্রজেক্টে ডাইনামিক ডেটা বা কাস্টম সার্ভার সাইড লজিক দরকার হয়।
Read more