Bài 6. Route Handler: xây dựng API trong Next.js

Ngoài Server Actions cho form, Next.js cho phép tạo API REST bằng Route Handler (tệp route.ts) để ứng dụng di động, Flutter hoặc dịch vụ khác gọi tới. Bài này hướng dẫn GET, POST, tham số động, đọc header, cookie và trả lỗi.

40 phútTrung cấp
Bạn sẽ học được
  • Tạo route.ts với GET, POST, PATCH, DELETE
  • Đọc body, tham số, header, cookie
  • Trả JSON và mã trạng thái
  • Chọn giữa Route Handler và Server Action

Một số khái niệm

DùngKhi nào
Server ActionForm và thao tác từ giao diện chính ứng dụng Next.js
Route HandlerAPI cho bên ngoài (Flutter, webhook, ứng dụng khác), tải tệp, trả dữ liệu không phải HTML
Server Component + dbĐọc dữ liệu hiển thị trang (không cần API)

Route Handler

// src/app/api/sinhvien/route.ts   →  /api/sinhvien
import { NextRequest, NextResponse } from 'next/server';
import { db } from '@/lib/db';

export async function GET(req: NextRequest) {
  const q = req.nextUrl.searchParams.get('q') ?? '';
  const ds = await db.sinhVien.findMany({ where: { ho_ten: { contains: q } }, take: 20 });
  return NextResponse.json({ du_lieu: ds });
}

export async function POST(req: NextRequest) {
  const body = await req.json();
  const kq = SinhVienSchema.safeParse(body);
  if (!kq.success) return NextResponse.json({ loi: 'Dữ liệu không hợp lệ' }, { status: 422 });
  const sv = await db.sinhVien.create({ data: kq.data });
  return NextResponse.json(sv, { status: 201 });
}
// src/app/api/sinhvien/[id]/route.ts
export async function DELETE(_: NextRequest, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  await db.sinhVien.delete({ where: { id: Number(id) } });
  return new Response(null, { status: 204 });
}

Header, cookie

import { cookies, headers } from 'next/headers';
const token = (await headers()).get('authorization');
const theme = (await cookies()).get('theme')?.value;
(await cookies()).set('theme', 'dark', { httpOnly: true, maxAge: 60 * 60 * 24 * 30 });
Mẹo hay

Có thể dùng Next.js làm giao diện và gọi tới API Node.js/Express riêng (loạt Node.js), hoặc dùng Route Handler để gộp cả hai trong một dự án.

Lưu ý

Không gọi Route Handler của chính mình từ Server Component (fetch tới /api/... của cùng ứng dụng): tốn thêm một vòng mạng; hãy gọi thẳng hàm truy vấn CSDL.

Thực hành
  1. Tạo API /api/sinhvien với GET có tìm kiếm.
  2. Thêm POST, PATCH, DELETE.
  3. Thử API bằng REST Client hoặc Postman.
  4. Gọi API này từ ứng dụng Flutter (loạt Flutter).
Tóm tắt bài học
  • route.ts định nghĩa API theo phương thức HTTP.
  • NextRequest, NextResponse.json, mã trạng thái.
  • headers(), cookies() đọc và ghi.
  • Server Action cho form, Route Handler cho API ngoài.