Next.js এর API Routes গাইড ও নোট

Next.js API Routes আপনাকে ব্যাকএন্ড কোড লেখার জন্য একটি সহজ এবং কার্যকর উপায় প্রদান করে। এটি আপনি যখন একটি Full-stack অ্যাপ্লিকেশন তৈরি করেন তখন প্রয়োজন হতে পারে, যেখানে আপনার ফ্রন্ট-এন্ড এবং ব্যাক-এন্ড কোড একই প্রজেক্টে থাকবে। Next.js এর API Routes এর মাধ্যমে আপনি সার্ভার-সাইড কোড যেমন ডেটা ফেচিং, ডাটাবেস অপারেশন, ব্যবহারকারী অথেনটিকেশন ইত্যাদি একসাথে পরিচালনা করতে পারেন, যা React এর সাথে একত্রে কাজ করে।

API Routes কী?

Next.js API Routes আপনাকে /pages/api/ ফোল্ডারে .js ফাইল তৈরি করার মাধ্যমে API এন্ডপয়েন্ট তৈরি করতে দেয়। এই ফাইলগুলো স্বয়ংক্রিয়ভাবে একটি HTTP রিকোয়েস্টের হ্যান্ডলার হিসেবে কাজ করবে এবং আপনি GET, POST, PUT, DELETE ইত্যাদি HTTP মেথড ব্যবহার করতে পারবেন।

API Routes এর সুবিধা:

• ব্যাকএন্ড এবং ফ্রন্টএন্ড একই প্রজেক্টে: API Routes ব্যবহার করে আপনি ফ্রন্টএন্ড এবং ব্যাকএন্ড একসাথে একই Next.js প্রজেক্টে ম্যানেজ করতে পারেন।
• ইনক্রিপ্টেড রাউটস: প্রতিটি API রাউট /api/ এর পরে তৈরি হবে, তাই এগুলোকে আলাদা করা সহজ।
• ডেটাবেস বা এক্সটার্নাল API কল: আপনি API Routes এর মাধ্যমে ডেটাবেসে কুইরি করতে পারেন বা এক্সটার্নাল API থেকে ডেটা ফেচ করতে পারেন।

API Routes তৈরি করা

Next.js API Routes তৈরির জন্য আপনাকে /pages/api/ ফোল্ডারে .js ফাইল তৈরি করতে হবে। এখানে, প্রতিটি ফাইল একটি API রাউট হিসেবে কাজ করবে।

উদাহরণ: GET রিকোয়েস্টের জন্য API Route

1. pages/api/hello.js

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API Routes!' });
}

এই API Route এ GET রিকোয়েস্টের মাধ্যমে /api/hello URL থেকে একটি JSON রেসপন্স পাওয়া যাবে, যার মধ্যে একটি "Hello from Next.js API Routes!" মেসেজ থাকবে।

আপনি এটি ব্রাউজারে বা Postman ব্যবহার করে http://localhost:3000/api/hello এ গিয়ে চেক করতে পারবেন।

উদাহরণ: POST রিকোয়েস্টের জন্য API Route

2. pages/api/login.js

// pages/api/login.js
export default function handler(req, res) {
  if (req.method === 'POST') {
    const { username, password } = req.body;

    // এখানে আপনি ব্যবহারকারী লগইন যাচাই করতে পারেন
    if (username === 'user' && password === 'password') {
      res.status(200).json({ message: 'Login successful' });
    } else {
      res.status(401).json({ message: 'Invalid credentials' });
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

এই API Route এ POST রিকোয়েস্টের মাধ্যমে /api/login এ যাচাই করা হবে যে ব্যবহারকারীর ইউজারনেম এবং পাসওয়ার্ড সঠিক কি না। আপনি এই API কে ব্রাউজার বা Postman থেকে ব্যবহার করতে পারেন।

API Routes এর HTTP মেথড সমর্থন

Next.js API Routes বিভিন্ন HTTP মেথড সমর্থন করে, যা আপনি req.method ব্যবহার করে চেক করতে পারেন:

• GET: সাধারণত ডেটা ফেচ করার জন্য ব্যবহৃত হয়।
• POST: ডেটা সাবমিট বা সার্ভারে প্রক্রিয়াকরণ করার জন্য ব্যবহৃত হয়।
• PUT: ডেটা আপডেট করার জন্য ব্যবহৃত হয়।
• DELETE: ডেটা মুছে ফেলার জন্য ব্যবহৃত হয়।

উদাহরণ: PUT এবং DELETE মেথড

// pages/api/posts/[id].js
export default function handler(req, res) {
  const { id } = req.query;

  if (req.method === 'GET') {
    res.status(200).json({ postId: id });
  } else if (req.method === 'PUT') {
    res.status(200).json({ message: `Post ${id} updated` });
  } else if (req.method === 'DELETE') {
    res.status(200).json({ message: `Post ${id} deleted` });
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

এই উদাহরণে [id].js ফাইলটি GET, PUT, এবং DELETE রিকোয়েস্টকে হ্যান্ডল করবে। রাউটটি হবে /api/posts/[id], যেখানে [id] একটি ডাইনামিক প্যারামিটার।

API Routes-এ ডেটাবেস কানেকশন

আপনি API Routes এর মধ্যে ডেটাবেসে কুইরি বা এক্সটার্নাল API কল করতে পারেন। যেমন, MongoDB, PostgreSQL, MySQL, বা Firebase-এর সাথে সংযোগ স্থাপন।

উদাহরণ: MongoDB এর সাথে API Route

// pages/api/posts.js
import { MongoClient } from 'mongodb';

const client = new MongoClient(process.env.MONGODB_URI);

export default async function handler(req, res) {
  if (req.method === 'GET') {
    try {
      await client.connect();
      const db = client.db('mydatabase');
      const posts = await db.collection('posts').find({}).toArray();
      res.status(200).json(posts);
    } catch (error) {
      res.status(500).json({ message: 'Database connection failed' });
    } finally {
      await client.close();
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

এই উদাহরণে, MongoDB ডেটাবেস থেকে GET রিকোয়েস্টের মাধ্যমে posts সংগ্রহ করা হচ্ছে।

API Routes এর অন্যান্য কনফিগারেশন

Next.js API Routes এর মধ্যে বিভিন্ন কনফিগারেশন এবং অপশনাল ফিচার সমর্থিত:

• API Middleware: আপনি API Routes-এ মিডলওয়্যার ব্যবহার করতে পারেন (যেমন, অথেনটিকেশন বা লগিং)।
• API Route কাস্টম হেডার: আপনি API Responses এর সাথে কাস্টম হেডার সেট করতে পারেন, যেমন Cache-Control বা Content-Type।
• Environment Variables: API Routes-এ পরিবেশ ভেরিয়েবল ব্যবহার করা যায় (যেমন, ডেটাবেস URL বা API কী)।

সারাংশ

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

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

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

API Routes কী?

Next.js এর API Routes এমন একটি ফিচার, যা আপনাকে সার্ভার সাইডের API এন্ডপয়েন্ট তৈরি করতে সহায়তা করে। সাধারণভাবে, API তৈরি করতে আপনাকে এক্সপ্রেস (Express.js) বা অন্য কোনো সার্ভার ফ্রেমওয়ার্ক ব্যবহার করতে হয়, কিন্তু Next.js এর মাধ্যমে API Routes সরাসরি pages/api/ ফোল্ডারে তৈরি করা যায়।

মূল বৈশিষ্ট্য:

• Serverless Functions: API Routes সার্ভারলেস ফাংশন হিসেবে কাজ করে। এটি Serverless Framework এর মতোই ব্যবহৃত হয়, যেখানে প্রতিটি API কল একটি ছোট ফাংশন হিসেবে কাজ করে।
• No Server Setup: আপনি আলাদা কোনো সার্ভার সেটআপ বা কনফিগার করার প্রয়োজন নেই, Next.js স্বয়ংক্রিয়ভাবে API Routes পরিচালনা করে।
• Full-stack Development: ফ্রন্ট-এন্ড এবং ব্যাক-এন্ড কোড একসাথে একই প্রজেক্টে রাখা যায়, যা পুরো প্রজেক্টের ডেভেলপমেন্টকে অনেক সহজ করে দেয়।

API Routes এর প্রয়োজনীয়তা

1. ফ্রন্ট-এন্ড এবং ব্যাক-এন্ড একত্রিত: Next.js এর মাধ্যমে আপনি একই প্রজেক্টে ফ্রন্ট-এন্ড (React পেজ) এবং ব্যাক-এন্ড (API Routes) কোড রাখতে পারেন। এটি সম্পূর্ণ স্ট্যাক অ্যাপ্লিকেশন তৈরি করা সহজ করে তোলে, এবং ডেভেলপমেন্টের সময় অনেক সুবিধা প্রদান করে।
2. স্টেটলেস API: API Routes গুলি স্টেটলেস (stateless) হয়, অর্থাৎ প্রতিটি রিকোয়েস্ট আলাদা, এবং সার্ভার রিকোয়েস্ট শেষে কোনো স্টেট সংরক্ষণ করে না। এটি API ব্যবহারের সময় স্কেলেবিলিটি এবং রিসোর্স ম্যানেজমেন্ট সহজ করে তোলে।
3. অটোমেটিক সার্ভারলেস ডিপ্লয়মেন্ট: Next.js API Routes সার্ভারলেস ফাংশন হিসেবে কাজ করে, যা কোনো আলাদা সার্ভার বা হোস্টিং সেটআপ ছাড়া ক্লাউড সার্ভিসে ডিপ্লয় করা যায়। যেমন Vercel (Next.js এর ডেভেলপার) বা Netlify এর মাধ্যমে API সহজে ডিপ্লয় করা যায়।
4. সহজ ডিবাগিং এবং কাস্টমাইজেশন: Next.js API Routes সহজেই ডিবাগ করা যায় কারণ এগুলি সাধারণ JavaScript বা TypeScript ফাইল হিসাবে কাজ করে। আপনি চাইলে কোনো middleware যুক্ত করতে পারেন, কাস্টম হ্যান্ডলিং, কিংবা অ্যাসিনক্রোনাস অপারেশনগুলো সহজভাবে ইমপ্লিমেন্ট করতে পারেন।
5. নিরাপত্তা: API Routes ব্যবহারের মাধ্যমে আপনি ব্যাক-এন্ড কোডের গোপনীয়তা রাখতে পারেন, কারণ এটি শুধুমাত্র সার্ভার সাইডে চলে এবং ব্রাউজারে এক্সপোজ হয় না।

API Routes তৈরি করা

Next.js এর মাধ্যমে API Routes তৈরি করা খুবই সহজ। আপনার pages/api/ ফোল্ডারে একটি নতুন ফাইল তৈরি করলেই সেটি একটি API এন্ডপয়েন্ট হিসেবে কাজ করবে।

উদাহরণ:

ধরা যাক, আপনি একটি সিম্পল API তৈরি করতে চান যা ইউজারের নাম ফেরত দেবে।

pages/api/hello.js ফাইলটি তৈরি করুন:

// pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' });
}

এখন, আপনি http://localhost:3000/api/hello এ গিয়ে এই API এন্ডপয়েন্টটি কল করতে পারবেন। এটি একটি JSON রেসপন্স রিটার্ন করবে:

{
  "name": "John Doe"
}

এটি একটি GET রিকোয়েস্ট হ্যান্ডল করার উদাহরণ, কিন্তু আপনি POST, PUT, DELETE ইত্যাদি HTTP মেথডও ব্যবহার করতে পারেন।

API Routes এ HTTP মেথড হ্যান্ডলিং

আপনি req.method ব্যবহার করে বিভিন্ন HTTP মেথড (GET, POST, PUT, DELETE) হ্যান্ডল করতে পারেন।

উদাহরণ: POST রিকোয়েস্ট হ্যান্ডলিং

pages/api/user.js ফাইল:

// pages/api/user.js

export default function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email } = req.body; // POST ডাটা
    res.status(200).json({ message: `User ${name} created successfully` });
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

এখানে, আপনি POST রিকোয়েস্টের মাধ্যমে ইউজারের নাম এবং ইমেইল সার্ভারে পাঠাতে পারবেন।

সারাংশ

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

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

এখানে Next.js API Routes তৈরি করার প্রক্রিয়া বিস্তারিতভাবে আলোচনা করা হয়েছে।

১. API Routes কী?

Next.js API Routes আপনাকে আপনার প্রজেক্টের pages/api/ ফোল্ডারে API রাউট তৈরি করতে দেয়। এই রাউটগুলো একটি HTTP রিকোয়েস্ট (যেমন GET, POST, PUT, DELETE) গ্রহণ করে এবং সাড়া পাঠায়। আপনি এই API রাউটগুলো ব্যবহার করে ডেটা ফেচিং, সার্ভার সাইড অপারেশন, এবং আরও অনেক কার্যক্রম করতে পারেন।

API Routes React অ্যাপ্লিকেশনের ফিচারের মতোই কাজ করে, কিন্তু এগুলো সার্ভার সাইডে চলে, অর্থাৎ আপনি একে ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট থেকে কল করতে পারেন।

২. API Routes তৈরি করা

Next.js এ API Routes তৈরি করতে, আপনাকে প্রথমে pages/api/ ফোল্ডার তৈরি করতে হবে। এই ফোল্ডারের মধ্যে আপনি আপনার API ফাইলগুলো রাখবেন, এবং এই ফাইলগুলির নাম হবে সেই API রাউটের URL পাথ।

উদাহরণ:

Step 1: প্রথমে pages/api/ ফোল্ডারে একটি নতুন ফাইল তৈরি করুন, যেমন hello.js।

pages/api/hello.js

Step 2: ফাইলে একটি API ফাংশন তৈরি করুন। এই ফাংশনটি দুটি প্যারামিটার গ্রহণ করবে: req (request) এবং res (response)। তারপর আপনি এর মাধ্যমে HTTP রিকোয়েস্টের উত্তর পাঠাবেন।

// pages/api/hello.js

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

এই API রাউটটি GET রিকোয়েস্ট গ্রহণ করবে এবং একটি JSON অবজেক্ট পাঠাবে, যা { message: 'Hello, Next.js!' }।

৩. API Routes এর HTTP Methods

Next.js API Routes বিভিন্ন HTTP Methods (GET, POST, PUT, DELETE) সমর্থন করে। আপনি req.method ব্যবহার করে বিভিন্ন HTTP মেথডের জন্য আলাদা কাস্টম লজিক তৈরি করতে পারেন।

উদাহরণ:

// pages/api/user.js

export default function handler(req, res) {
  if (req.method === 'GET') {
    // GET রিকোয়েস্টের জন্য ডেটা পাঠান
    res.status(200).json({ name: 'John Doe' })
  } else if (req.method === 'POST') {
    // POST রিকোয়েস্টে নতুন ডেটা গ্রহণ করুন
    const { name } = req.body
    res.status(201).json({ message: `User ${name} created successfully!` })
  } else {
    // অন্যান্য HTTP মেথডের জন্য 405 (Method Not Allowed) রিটার্ন করুন
    res.status(405).json({ message: 'Method Not Allowed' })
  }
}

এখানে, GET রিকোয়েস্টে আমরা একটি প্রিলোড করা নাম পাঠাচ্ছি এবং POST রিকোয়েস্টে আমরা একটি নাম প্যারামিটার গ্রহণ করে সেটিকে JSON আউটপুট হিসেবে রিটার্ন করছি।

৪. API Routes ব্যবহার করা

আপনি যখন API Routes তৈরি করবেন, তখন সেগুলো URL এর মাধ্যমে অ্যাক্সেস করা যাবে। উদাহরণস্বরূপ, যদি আপনার API ফাইলের নাম hello.js হয়, তাহলে এটি http://localhost:3000/api/hello URL এ পাওয়া যাবে।

উদাহরণ:

• GET রিকোয়েস্ট: আপনি ব্রাউজার বা একটি HTTP ক্লায়েন্ট (যেমন Postman) ব্যবহার করে http://localhost:3000/api/hello এ GET রিকোয়েস্ট পাঠাতে পারেন।

  ব্রাউজারে গিয়ে আপনি নিম্নলিখিত JSON রেসপন্স দেখতে পাবেন:

  { "message": "Hello, Next.js!" }
  

• POST রিকোয়েস্ট: একটি POST রিকোয়েস্ট পাঠানোর জন্য আপনি Postman বা কোনো HTTP ক্লায়েন্ট ব্যবহার করতে পারেন। পোস্ট রিকোয়েস্টে একটি নাম প্যারামিটার পাঠাতে পারেন:

  { "name": "John" }
  

  সেক্ষেত্রে, আপনি নিম্নলিখিত রেসপন্স পাবেন:

  { "message": "User John created successfully!" }
  

৫. কাস্টম API Route (API Authentication)

আপনি যদি কাস্টম API Route তৈরি করতে চান যেখানে ইউজার অথেনটিকেশন বা অন্যান্য কাস্টম লজিক থাকতে পারে, তবে আপনি সেইসব চেক এবং লজিক req অবজেক্টের মাধ্যমে করতে পারবেন।

উদাহরণ (Basic Authentication):

// pages/api/login.js

export default function handler(req, res) {
  if (req.method === 'POST') {
    const { username, password } = req.body;

    if (username === 'admin' && password === 'password123') {
      res.status(200).json({ message: 'Login successful' });
    } else {
      res.status(401).json({ message: 'Invalid credentials' });
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

এখানে, username এবং password এর সাথে মেলালে 200 OK রেসপন্স দেয়া হবে এবং ভুল হলে 401 Unauthorized রেসপন্স দেয়া হবে।

৬. API Routes এর সুবিধা

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

Next.js API Routes আপনাকে আপনার React অ্যাপ্লিকেশনের মধ্যে ব্যাক-এন্ড কার্যক্রম সম্পন্ন করতে একটি শক্তিশালী উপায় প্রদান করে, যা অ্যাপ্লিকেশনটির ডেভেলপমেন্ট প্রক্রিয়াকে অনেক সহজ করে তোলে।

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 ফাইল ব্যবহার করতে পারেন।

1. 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=desc
• http://localhost:3000/api/posts?category=travel&sort=asc

এতে আপনাকে ডাইনামিকভাবে বিভিন্ন ক্যাটেগরি বা সোর্টিং অনুযায়ী ডেটা ফিল্টার করতে সহায়তা করবে।

সারাংশ

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

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

এখানে আমরা দেখব কিভাবে Next.js এর API Routes ব্যবহার করে Request এবং Response হ্যান্ডল করা যায়।

১. API Routes তৈরি করা

Next.js এ API Routes তৈরি করার জন্য pages/api/ ফোল্ডার ব্যবহার করা হয়। প্রতিটি ফাইল যা pages/api/ ফোল্ডারে থাকে, সেটি একটি API রাউট হিসেবে কাজ করে।

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

pages/api/hello.js:

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

এটি একটি সিম্পল API রাউট, যা HTTP GET রিকোয়েস্টে {"message": "Hello, World!"} রেসপন্স প্রদান করবে।

• req: রিকোয়েস্ট অবজেক্ট, যা ক্লায়েন্ট থেকে আসা তথ্য ধারণ করে।
• res: রেসপন্স অবজেক্ট, যা সার্ভার থেকে ক্লায়েন্টে রেসপন্স পাঠায়।

এখন আপনি http://localhost:3000/api/hello এই URL তে গিয়ে এই API রেসপন্স দেখতে পারবেন।

২. HTTP Request এবং Response হ্যান্ডলিং

Next.js API Routes এর মধ্যে আপনি বিভিন্ন HTTP মেথড যেমন GET, POST, PUT, DELETE ইত্যাদি হ্যান্ডল করতে পারবেন। এগুলির মাধ্যমে আপনি রিকোয়েস্ট ডেটা প্রসেস করতে এবং ক্লায়েন্টে রেসপন্স পাঠাতে পারবেন।

GET রিকোয়েস্ট হ্যান্ডলিং:

GET রিকোয়েস্ট ক্লায়েন্ট থেকে তথ্য পাওয়ার জন্য ব্যবহৃত হয়। এটি সাধারণত ডেটা রিট্রিভ করার জন্য ব্যবহৃত হয়।

// pages/api/user.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // কিছু ডেটা ফেরত পাঠানো
    res.status(200).json({ name: 'John Doe', age: 25 });
  } else {
    // যদি GET রিকোয়েস্ট না হয়, তবে 405 (Method Not Allowed) রেসপন্স দিন
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

POST রিকোয়েস্ট হ্যান্ডলিং:

POST রিকোয়েস্ট সাধারণত ক্লায়েন্ট থেকে তথ্য পাঠানোর জন্য ব্যবহৃত হয় (যেমন ফর্ম সাবমিশন বা ডেটা আপলোড)।

// pages/api/contact.js
export default function handler(req, res) {
  if (req.method === 'POST') {
    const { name, message } = req.body;

    // এখানে আপনি ডেটা প্রসেস বা ডাটাবেসে ইনসার্ট করতে পারেন
    console.log(`Name: ${name}, Message: ${message}`);

    res.status(200).json({ status: 'Success', message: 'Data received successfully' });
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

এখানে req.body ব্যবহার করা হয়েছে, যা POST রিকোয়েস্টের বডি থেকে ডেটা পাওয়ার জন্য ব্যবহৃত হয়। ডেটা JSON ফরম্যাটে আসবে, এবং আমরা সেটি প্রসেস করে রেসপন্স পাঠাচ্ছি।

PUT রিকোয়েস্ট হ্যান্ডলিং:

PUT রিকোয়েস্ট সাধারণত ক্লায়েন্ট থেকে ডেটা আপডেট করার জন্য ব্যবহৃত হয়।

// pages/api/user/[id].js
export default function handler(req, res) {
  const { id } = req.query;

  if (req.method === 'PUT') {
    const { name, age } = req.body;
    // এখানে ডেটা আপডেট করা হবে (যেমন ডাটাবেসে)
    res.status(200).json({ message: `User ${id} updated`, name, age });
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

এখানে, req.query দিয়ে ডাইনামিক প্যারামিটার (যেমন ইউজার আইডি) নেয়া হচ্ছে এবং req.body দিয়ে PUT রিকোয়েস্টের ডেটা গ্রহণ করা হচ্ছে।

DELETE রিকোয়েস্ট হ্যান্ডলিং:

DELETE রিকোয়েস্ট সাধারণত ক্লায়েন্ট থেকে কোনো রিসোর্স মুছে ফেলার জন্য ব্যবহৃত হয়।

// pages/api/user/[id].js
export default function handler(req, res) {
  const { id } = req.query;

  if (req.method === 'DELETE') {
    // এখানে ডেটা মুছে ফেলা হবে
    res.status(200).json({ message: `User ${id} deleted` });
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

৩. Request থেকে ডেটা গ্রহণ

Next.js এর API Routes এর মাধ্যমে আপনি req.query, req.body, এবং req.headers এর মাধ্যমে রিকোয়েস্টের ডেটা গ্রহণ করতে পারেন।

• req.query: URL প্যারামিটার (Query Parameters) থেকে ডেটা নেয়।
• req.body: POST বা PUT রিকোয়েস্টের বডি থেকে ডেটা নেয়।
• req.headers: রিকোয়েস্টের হেডার থেকে ডেটা নেয়।

উদাহরণস্বরূপ, যদি আপনি একটি ডাইনামিক রাউট ব্যবহার করেন:

// pages/api/user/[id].js
export default function handler(req, res) {
  const { id } = req.query; // URL প্যারামিটার থেকে 'id' নেয়
  res.status(200).json({ userId: id });
}

এটি http://localhost:3000/api/user/123 এই রিকোয়েস্টে id: 123 রেসপন্স করবে।

৪. Response সেটিংস

Next.js API Routes এ রেসপন্স প্রেরণ করতে আপনি res.status() এবং res.json() ব্যবহার করতে পারেন।

• res.status(code): HTTP স্ট্যাটাস কোড সেট করে (যেমন 200, 404, 500 ইত্যাদি)।
• res.json(data): রিকোয়েস্টের রেসপন্স JSON ফরম্যাটে পাঠায়।

উদাহরণ:

// pages/api/data.js
export default function handler(req, res) {
  res.status(200).json({ success: true, message: 'Data fetched successfully' });
}

৫. Error Handling

Next.js API Routes এ Error Handling করা অত্যন্ত গুরুত্বপূর্ণ। আপনি try/catch ব্লক ব্যবহার করে সার্ভার সাইড এrror হ্যান্ডল করতে পারেন এবং প্রয়োজনীয় রেসপন্স ফেরত দিতে পারেন।

// pages/api/user.js
export default async function handler(req, res) {
  try {
    // কিছু সার্ভার সাইড লজিক
    throw new Error('Something went wrong');
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}

এভাবে, Next.js API Routes এর মাধ্যমে আপনি সহজেই HTTP রিকোয়েস্ট এবং রেসপন্স হ্যান্ডল করতে পারবেন।