Next.js / API Route Handler

API Route Handler

Server Action нь ихэнх тохиолдолд хангалттай. Гэхдээ заримдаа жинхэнэ REST API endpoint хэрэгтэй болдог — гадны сервис webhook илгээх, mobile app холбогдох, эсвэл fetch-ээр шууд дуудах. Тэр үед Route Handler ашигладаг.

Route Handler үүсгэх

app/ директор дотор route.ts файл үүсгэхэд API endpoint болно. page.tsx-тэй адил файлд суурилсан routing ашигладаг:

код
app/
├── api/
│   ├── health/
│   │   └── route.ts      →  GET /api/health
│   └── progress/
│       └── route.ts      →  POST /api/progress

Энгийн health check endpoint:

typescript
// app/api/health/route.ts
import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({
    status: "ok",
    timestamp: Date.now(),
  });
}

Хөтчөөр /api/health руу орвол { "status": "ok", "timestamp": 1234567890 } харна.

Request body унших

POST хүсэлтийн body-г request.json() ашиглан уншина:

typescript
// app/api/progress/route.ts
import { NextRequest, NextResponse } from "next/server";
import { createClient } from "@/lib/supabase/server";

export async function POST(request: NextRequest) {
  // session шалгах
  const supabase = await createClient();
  const {
    data: { user },
  } = await supabase.auth.getUser();

  if (!user) {
    return NextResponse.json({ error: "Нэвтрээгүй байна" }, { status: 401 });
  }

  // body унших
  const { courseSlug, lessonSlug } = await request.json();

  if (!courseSlug || !lessonSlug) {
    return NextResponse.json(
      { error: "courseSlug болон lessonSlug шаардлагатай" },
      { status: 400 },
    );
  }

  // өгөгдлийн санд хадгалах
  const { error } = await supabase.from("lesson_progress").upsert({
    user_id: user.id,
    course_slug: courseSlug,
    lesson_slug: lessonSlug,
  });

  if (error) {
    return NextResponse.json(
      { error: "Хадгалахад алдаа гарлаа" },
      { status: 500 },
    );
  }

  return NextResponse.json({ success: true });
}

Dynamic route параметр авах

URL дахь динамик хэсгийг route handler дотор авах нь page component-тэй адил:

typescript
// app/api/courses/[slug]/route.ts
import { NextRequest, NextResponse } from "next/server";

interface Params {
  params: Promise<{ slug: string }>;
}

export async function GET(request: NextRequest, { params }: Params) {
  const { slug } = await params; // Next.js 15: params-г await хийнэ

  const course = await getCourseBySlug(slug);

  if (!course) {
    return NextResponse.json({ error: "Курс олдсонгүй" }, { status: 404 });
  }

  return NextResponse.json(course);
}

Энэ endpoint /api/courses/javascript, /api/courses/react гэх мэтийг бүгдийг хэрэгжүүлнэ.

HTTP методуудыг дэмжих

Нэг route.ts файлд олон HTTP метод тодорхойлж болно:

typescript
// app/api/profile/route.ts
import { NextRequest, NextResponse } from "next/server";

// GET /api/profile
export async function GET() {
  // профайл уншина
  return NextResponse.json({ username: "Болд" });
}

// PATCH /api/profile
export async function PATCH(request: NextRequest) {
  const body = await request.json();
  // профайл шинэчлэнэ
  return NextResponse.json({ success: true });
}

// DELETE /api/profile
export async function DELETE() {
  // профайл устгана
  return NextResponse.json({ deleted: true });
}

Дэмжигдэх методууд: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS.

Дараагийн хичээлд:

Middleware гэж юу болохыг судална. Хүсэлт серверт хүрэхийн өмнө нэвтрэлт шалгах, header нэмэх, redirect хийх аргыг ойлгоно.

← Өмнөх хичээлServer Action + маягтДараах хичээл →Middleware үндэс