১. ভূমিকা: route.js / route.ts কি?

• Next.js এর App Router (beta) এ Route Handlers তৈরি করার জন্য route.js বা route.ts ফাইল ব্যবহার করা হয়। (Next.js)

• এগুলি UI পেজ নয় — বরং HTTP request (GET, POST, PUT, DELETE ইত্যাদি) হ্যান্ডল করার জন্য Server-side কোড। (Next.js)

• এটি Web Request & Response APIs (মডার্ন ব্রাউজার API) এর সাথে কাজ করে। (Next.js)

২. কোন ডিরেক্টরিতে ফাইল হবে?

• route.js / route.ts ফাইল app ডিরেক্টরির একটি সাব-ফোল্ডারে থাকে, যেখানে তুমি ওই রুটের জন্য API হ্যান্ডলার তৈরি করতে চাও। (Next.js)

• উদাহরণস্বরূপ:

  app/
   ├── route.ts        ← এটি root-level রুট হ্যান্ডলার
   └── dashboard/
        └── route.ts   ← `/dashboard` রুটের রুট হ্যান্ডলার
  

৩. HTTP মেথড সমর্থন ও Signature

Route হ্যান্ডলার সাধারণত নিম্নলিখিত মেথডগুলি নিয়ে কাজ করতে পারে:

• GET

• POST

• PUT

• PATCH

• DELETE

• HEAD

• OPTIONS (Next.js)

Function Signature

export async function GET(request: Request, context?: { params: Promise<{ ... }> }) {
  // logic
  return new Response(...)  // বা NextResponse
}

• request — এটি একটি NextRequest অবজেক্ট (Web Request API-এর এক্সটেনশন) (Next.js)

• অতিরিক্ত অপশনাল context — এখানে থাকে params (dynamic route parameters) (Next.js)

উদাহরণ:

import type { NextRequest } from 'next/server';

export async function GET(request: NextRequest) {
  const url = request.nextUrl;
  // ...
  return Response.json({ message: "Hello World" });
}

Dynamic route segment সহ:

export async function GET(
  request: Request,
  { params }: { params: Promise<{ team: string }> }
) {
  const { team } = await params;
  return new Response(JSON.stringify({ team }), {
    headers: { "Content-Type": "application/json" },
  });
}

৪. Dynamic Segments (ডায়নামিক রুট সংখ্যক অংশ)

যদি রুটের অংশটি ডায়নামিক হয় (যেমন [id], [slug]), তাহলে params ব্যবহার করতে হবে। (Next.js)

উদাহরণ:

// app/items/[slug]/route.ts

export async function GET(
  request: Request,
  { params }: { params: Promise<{ slug: string }> }
) {
  const { slug } = await params;
  // slug অনুযায়ী ডেটা ফেচ করো
  return new Response(JSON.stringify({ slug }));
}

Catch-all segments (যেমন [...slug]) ও optional catch-all (যেমন [[...slug]]) ও ব্যবহার করা যেতে পারে। (Next.js)

৫. রেসপন্স তৈরি করা (Response / NextResponse / কাস্টম হেডার ইত্যাদি)

Route handler থেকে যেভাবেই রেসপন্স পাঠাতে পার:

• Response (Web API)

• NextResponse — Next.js এর এক্সটেনশন, যাতে তুমি সহজে cookies, redirects, rewrites, headers সেট করতে পারো (Next.js)

উদাহরণ (JSON রেসপন্স, হেডার সহ):

import { NextResponse } from 'next/server';

export async function GET(request: Request) {
  const data = { hello: "world" };
  return NextResponse.json(data);
}

কাস্টম হেডার সেট করা:

export async function GET(request: Request) {
  return new Response("OK", {
    status: 200,
    headers: {
      "Content-Type": "text/plain",
      "X-Custom": "value"
    },
  });
}

Redirect / Rewrite:

import { NextResponse } from 'next/server';

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

৬. ক্যাশিং ও রি-ভ্যালিডেশন (Revalidation / Caching)

Route হ্যান্ডলারগুলোর জন্য তুমি কিছু Route Segment Config অপশন export করতে পারো:

• revalidate — রিসোর্স多久 পরে রিফ্রেশ হবে

• dynamic — এই রুটটি ডাইনামিক হবে কিনা

• অন্যান্য অপশন: runtime, preferredRegion ইত্যাদি (Next.js)

উদাহরণ:

export const revalidate = 60;  // 60 সেকেন্ড পর রিফেচ হবে

export async function GET(request: Request) {
  const posts = await fetch("https://api.example.com/posts").then(r => r.json());
  return NextResponse.json(posts);
}

ডাইনামিক হিসেবে নির্ধারণ:

export const dynamic = "force-dynamic";

export async function GET(request: Request) {
  // ...
}

৭. POST ও রিকোয়েস্ট বডি (Request Body)

POST মেথড ব্যবহার করলে রিকোয়েস্ট বডি পড়তে হবে:

export async function POST(request: Request) {
  const body = await request.json();
  // body এ যে JSON পাঠানো হয়েছে তা parse হবে
  return NextResponse.json({ received: body });
}

যদি formData পাঠাও:

export async function POST(request: Request) {
  const form = await request.formData();
  const name = form.get("name");
  // ...
  return NextResponse.json({ name });
}

৮. উদাহরণ একটি সম্পূর্ণ রুট হ্যান্ডলার

ধরা যাক তুমি /api/users/[id] রুট হ্যান্ডলার বানাতে চাও:

app/
 └─ api/
     └─ users/
         └─ [id]/
             └─ route.ts

route.ts:

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export const revalidate = 30;
export const dynamic = "force-dynamic";

export async function GET(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
  // ধরো ডাটাবেস বা এপিআই থেকে ইউজার লোড করো
  const user = { id, name: "User " + id };
  return NextResponse.json(user);
}

export async function POST(request: NextRequest) {
  const body = await request.json();
  // নতুন ইউজার তৈরি করো ...
  return NextResponse.json({ created: true, body });
}

export async function DELETE(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
  // ইউজার ডিলিট করো ...
  return new Response(null, { status: 204 });
}

৯. গতির দিক ও Behavior (Behavior / Caveats)

• Soft Navigation vs Hard Navigation: UI রাউট নেভিগেশন হলে client-side transition, কিন্তু ব্রাউজার রিফ্রেশ করলে کامل রাউট হ্যান্ডলার কল হবে।

• Default OPTIONS: যদি তুমি OPTIONS মেথড ডিফাইন না করো, Next.js স্বয়ংক্রিয়ভাবে OPTIONS হ্যান্ডলার তৈরি করবে এবং Allow হেডার সেট করবে। (Next.js)

• Type Safety: তুমি RouteContext টাইপ ব্যবহার করতে পারো, যাতে params টাইপ সঠিকভাবে নির্ধারণ হয়। (Next.js)

• ক্যাশিং ও Caching বিলম্ব: যদি রুটটি static ভাবে রেন্ডার হচ্ছে, তা dynamic করতে হলে dynamic = "force-dynamic" ব্যবহার করতে পারো। (GitHub)

১০. সারাংশ ও পরবর্তী ধাপ

Route handlers (route.js / route.ts) Next.js 16 (beta / App Router) এ একটি শক্তিশালী পন্থা HTTP request হ্যান্ডল করার জন্য।

তোমার হাতে থাকা কাজ:

1. প্রয়োজনমতো route.ts ফাইল তৈরি করা

2. GET / POST / অন্যান্য মেথড হ্যান্ডল করা

3. ডায়নামিক রুট পারামস্ ব্যবহার করা

4. Response / NextResponse দিয়ে রেসপন্স তৈরি করা

5. ক্যাশিং ও রি-ভ্যালিডেশন সেট করা

6. ফর্ম ডেটা / JSON বডি হ্যান্ডল করা