Thuta Learning
ရှာဖွေရန်

Next.js ဖြင့် REST API Endpoint တည်ဆောက်နည်း

App Router Route Handler သုံးပြီး input validation၊ မှန်ကန်သော status code နှင့် client အတွက် predictable error response ပါသော API endpoint တည်ဆောက်ပါမယ်။

Next.js ဖြင့် REST API Endpoint တည်ဆောက်နည်း cover illustration

ဖြေရှင်းမည့်ပြဿနာ

API route က data ပြန်ပေးနိုင်ရုံနဲ့ production-ready မဖြစ်သေးပါ။ Invalid input၊ server error နဲ့ method မတူမှုကို consistent response ဖြင့်ကိုင်တွယ်ရပါတယ်။

လိုအပ်ချက်များ

  • Next.js App Router project
  • TypeScript အခြေခံ
  • HTTP methods နှင့် JSON အခြေခံ

Resource နှင့် response shape ကိုအရင်သတ်မှတ်ပါ

ဒီ guide မှာ feedback resource ကိုအသုံးပြုပါမယ်။ Success response နဲ့ error response ပုံစံကို အရင်ဆုံးသတ်မှတ်ထားရင် frontend က status code အလိုက်တိတိကျကျကိုင်တွယ်နိုင်ပါတယ်။

types/api.ts
export type ApiError = {
  error: { code: string; message: string };
};

export type FeedbackResult = {
  id: string;
  message: string;
};

POST Route Handler ရေးပါ

Request body ကိုယုံကြည်မထားဘဲ parse လုပ်ပြီး type နဲ့ length ကိုစစ်ပါ။ Client error ကို 400၊ server configuration error ကို 500 အဖြစ်ခွဲပေးပါ။

app/api/feedback/route.ts
export async function POST(request: Request) {
  const body = await request.json().catch(() => null);
  const message = body?.message;

  if (typeof message !== "string" || message.trim().length < 5) {
    return Response.json(
      { error: { code: "INVALID_MESSAGE", message: "Message is too short" } },
      { status: 400 },
    );
  }

  return Response.json(
    { id: crypto.randomUUID(), message: message.trim() },
    { status: 201 },
  );
}

Client က status ကိုမှန်အောင်ကိုင်တွယ်ပါ

fetch က 4xx/5xx response ရတာနဲ့ exception မပစ်ပါဘူး။ response.ok ကိုကိုယ်တိုင်စစ်ပြီး user နားလည်နိုင်တဲ့ message ပြရပါတယ်။

lib/send-feedback.ts
export async function sendFeedback(message: string) {
  const response = await fetch("/api/feedback", {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify({ message }),
  });
  const data = await response.json();
  if (!response.ok) throw new Error(data.error?.message ?? "Request failed");
  return data;
}

Edge cases ကိုစမ်းပါ

Happy path တစ်ခုတည်းမဟုတ်ဘဲ empty body၊ invalid JSON၊ စာတိုလွန်းခြင်း၊ အကြိမ်များစွာပို့ခြင်းနဲ့ server error ကိုစမ်းပါ။ Sensitive internal error ကို client ဆီတိုက်ရိုက်မပြန်ပါနှင့်။

ရရှိမည့်ရလဒ်

Frontend ကယုံကြည်စွာခေါ်နိုင်ပြီး invalid input ကိုရှင်းလင်းစွာပြန်ပေးသော typed REST endpoint တစ်ခု ရရှိပါမယ်။

အဆင်မပြေပါက စစ်ဆေးရန်

  • 405 ဖြစ်လျှင် route file ထဲမှာ method အမည်ကို GET/POST အကြီးစာလုံးဖြင့် export လုပ်ထားကြောင်းစစ်ပါ။
  • JSON parse error ဖြစ်လျှင် Content-Type header နှင့် request body ကိုစစ်ပါ။
  • CORS error ဖြစ်လျှင် browser ကခေါ်သည့် origin နှင့် deployment architecture ကိုပြန်စစ်ပါ။

ဆက်လက်လေ့လာရန် Tutorials

Next.js ဖြင့် REST API Endpoint တည်ဆောက်နည်း | Thuta Learning