Next.js এর হাতেখড়ি (পর্ব ৭) – API Routes: নিজের ব্যাকএন্ড এন্ডপয়েন্ট বানানো

Cloudflare এর হাতেখড়ি পর্ব ৪-৫-এ আমরা Workers দিয়ে আলাদা একটা API সার্ভার বানিয়েছিলাম। Next.js-এ এই কাজটা একই প্রজেক্টের ভেতরেই করা যায় — API Routes দিয়ে। এই পর্বে শিখব কীভাবে নিজের ব্যাকএন্ড এন্ডপয়েন্ট বানাতে হয়, একদম Next.js-এর ভেতরেই।

route.js — বিশেষ ফাইল

পর্ব ২-এ শিখেছিলাম page.js একটা পেজ (HTML) বানায়। ঠিক একই ফোল্ডার কনভেনশনে, route.js একটা API endpoint বানায় (HTML না, ডেটা রিটার্ন করে)।

app/
├── page.js              → পেজ, "/" (HTML)
└── api/
    └── books/
        └── route.js      → API, "/api/books" (JSON)

প্রথম API Route — GET

Cloudflare এর হাতেখড়ি পর্ব ৪-এর Worker-এর fetch ফাংশনের সাথে খুবই মিল, কিন্তু এখানে প্রতিটা HTTP মেথডের জন্য আলাদা ফাংশন নাম ব্যবহার হয়।

// app/api/books/route.js
export async function GET() {
  const books = [
    { id: 1, title: "অপরাজিত" },
    { id: 2, title: "পথের পাঁচালী" },
  ];

  return Response.json(books);
}

localhost:3000/api/books ভিজিট করলে সরাসরি JSON রেসপন্স দেখা যাবে। Response.json() — Cloudflare Worker-এর JSON.stringify + হেডার সেট করার শর্টকাট, একই কাজ করে কিন্তু কম কোডে।

POST — নতুন ডেটা গ্রহণ করা

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

// app/api/books/route.js
export async function GET() {
  return Response.json([{ id: 1, title: "অপরাজিত" }]);
}

export async function POST(request) {
  const body = await request.json(); // পাঠানো ডেটা পড়া

  // এখানে বাস্তবে Firebase RTDB-তে সেভ করা যেত (পর্ব ১০-এ দেখব)
  console.log("নতুন বই:", body.title);

  return Response.json({ message: "বই যোগ হয়েছে", book: body }, { status: 201 });
}

Dynamic API Routes — params ব্যবহার

পর্ব ২-এর [slug]-এর মতোই, API Routes-এও ডাইনামিক সেগমেন্ট ব্যবহার করা যায়।

app/
└── api/
    └── books/
        └── [id]/
            └── route.js   → "/api/books/1", "/api/books/2" ইত্যাদি

// app/api/books/[id]/route.js
export async function GET(request, { params }) {
  const bookId = params.id;

  // এখানে বাস্তবে ডেটাবেজ থেকে খোঁজা হতো
  const book = { id: bookId, title: `বই #${bookId}` };

  return Response.json(book);
}

export async function DELETE(request, { params }) {
  console.log("মুছে ফেলা হলো:", params.id);
  return Response.json({ message: "মুছে ফেলা হয়েছে" });
}

Query Parameters পড়া

পর্ব ৪-এর Cloudflare Worker-এর মতোই, request.url থেকে URL অবজেক্ট বানিয়ে query parameter পড়া যায়।

// app/api/books/route.js
export async function GET(request) {
  const { searchParams } = new URL(request.url);
  const author = searchParams.get("author"); // ?author=বিভূতিভূষণ

  const allBooks = [
    { title: "অপরাজিত", author: "বিভূতিভূষণ" },
    { title: "গোরা", author: "রবীন্দ্রনাথ" },
  ];

  const filtered = author
    ? allBooks.filter((b) => b.author === author)
    : allBooks;

  return Response.json(filtered);
}

// /api/books?author=বিভূতিভূষণ ভিজিট করলে শুধু তার বই দেখাবে

এই API-কে ফ্রন্টএন্ড থেকে ব্যবহার করা

পর্ব ৪-এর মতোই fetch, কিন্তু এবার URL একদম নিজের প্রজেক্টের ভেতরেই — বাইরের কোনো Firebase বা Worker URL না।

// app/books/page.js — Server Component
async function getBooks() {
  const res = await fetch("http://localhost:3000/api/books"); // নিজের API Route
  return res.json();
}

export default async function BooksPage() {
  const books = await getBooks();
  return <div>{/* ... */}</div>;
}

API Routes কখন দরকার, কখন না

একটা স্বাভাবিক প্রশ্ন — সরাসরি Server Component থেকেই তো fetch করা যায় (পর্ব ৪), তাহলে API Route আলাদা কেন দরকার?

• Client Component থেকে কল করতে হলে — Server Component প্রথমবার রেন্ডারেই ডেটা আনে, কিন্তু ইউজারের ইন্টারঅ্যাকশনে (যেমন একটা বাটন ক্লিকে) নতুন ডেটা আনতে হলে Client Component-এ API Route দরকার
• তৃতীয় পক্ষের সার্ভিস (মোবাইল অ্যাপ, অন্য ওয়েবসাইট) থেকে অ্যাক্সেসের জন্য — একটা পাবলিক API endpoint দরকার হলে
• Webhook গ্রহণ করতে — Stripe, GitHub-এর মতো সার্ভিস থেকে কলব্যাক পেতে

শুধু পেজে ডেটা দেখাতে হলে, পর্ব ৪-এর মতো সরাসরি Server Component-এ fetch করাই সহজ ও দ্রুত — অপ্রয়োজনীয় API Route বানানোর দরকার নেই।

ইন্টারেক্টিভ — API Route Tester

নিচে একটা মেথড আর ID বেছে নিয়ে দেখো /api/books/[id] কী রেসপন্স দেবে।

ভালো অভ্যাস

• শুধু Client Component বা বাইরের সার্ভিস থেকে অ্যাক্সেস লাগলেই API Route বানান — Server Component-এ সরাসরি fetch যথেষ্ট হলে সেটাই সহজ
• সবসময় স্ট্যাটাস কোড ঠিকমতো সেট করুন — 201 তৈরি হলে, 404 না পাওয়া গেলে — ফ্রন্টএন্ড কোডে এই কোড অনুযায়ী সিদ্ধান্ত নেওয়া সহজ হয়
• সিক্রেট লজিক (পেমেন্ট, Database Secret) API Route-এই রাখুন, Client Component-এ কখনো না — এটাই Cloudflare Worker-এর মতো একটা নিরাপদ সার্ভার-সাইড পরিবেশ

নিজে চেষ্টা করো

Exercise:

1. একটা /api/books route বানাও, GET দিয়ে একটা তালিকা রিটার্ন করো।
2. একটা POST হ্যান্ডলার যোগ করো, request.json() দিয়ে body পড়ে ফেরত পাঠাও।
3. একটা ডাইনামিক /api/books/[id] route বানাও, ভিন্ন ID দিয়ে টেস্ট করো।
4. একটা Client Component বানাও, একটা বাটনে ক্লিক করলে fetch("/api/books") কল করে ডেটা দেখাও।

পরের পর্বে যা থাকছে

পরের পর্বে আমরা শিখব Server Actions ও Forms — API Route ছাড়াই সরাসরি ফর্ম সাবমিট হ্যান্ডেল করার একটা আরও আধুনিক পদ্ধতি, যা Next.js-এ বিশেষভাবে সহজ করে দেওয়া হয়েছে।