Hướng dẫn: Cách tạo API GET Image với NextJS

Mở đầu:

Chào anh em, lại là mình – Đại Dev đây, tiếp tục chuỗi hướng dẫn lập trình cực chất với NextJS!

Trong bài viết trước, mình đã chia sẻ cách anh em có thể dễ dàng upload hình ảnh lên server với NextJS. Hôm nay, mình sẽ đưa anh em đi tiếp một bước xa hơn: làm thế nào để lấy lại những hình ảnh đó từ server. 😎

Mình sẽ chia sẻ hai cách làm cực kỳ hiệu quả: “Lấy ảnh thông qua Id” và “Lấy ảnh thông qua […slug]”. Không dài dòng nữa, sẵn sàng thì bắt đầu luôn nhé! Lét gô...

Cách 1: Tạo API GET Image với NextJS với Id hình ảnh.

Tạo enpoint API thông qua app router, anh em tạo file route.ts như hình bên dưới

Đây là các thư viện cần import để sử dụng.

//src/app/api/get-by-id/[imageId]/route.ts
import { NextRequest, NextResponse } from "next/server";
import * as fs from "fs";
import path from "path";

type props = {
  params: {
    imageId: string;
  };
};
export async function GET(req: NextRequest, { params: { imageId } }: props) {
// code xử lý ở dây
}

Tiếp theo là data fake nếu ae cần.

type ImageType = {
  id: string;
  name: string;
  url: string;
};

//data fake
const images: ImageType[] = [
  {
    id: "1",
    name: "image1",
    url: "upload-file-guide/daivo.tech___.png",
  },
  {
    id: "2",
    name: "image2",
    url: "upload-file-guide/image2.jpg",
  },
];

Tiếp theo anh em thêm đoạn code để xử lý lấy id từ request, sau đó sẽ lấy hình ảnh theo id , xử lý  và gửi response hình ảnh về.

  // lấy image theo id - đây là data fake
  // ở đây bạn có thể thay thế bằng cách lấy data từ database
  const image = getImageById(imageId);

  try {
    // đọc file từ thư mục public
    try {
      const filePath = path.join(process.cwd(), "public" + `/${image?.url}`);
      const imageBuffer = await fs.readFileSync(filePath);
      
      return new NextResponse(imageBuffer);
    } catch (error) {
      return NextResponse.json({ error }, { status: 404 });
    }
  } catch (error) {
    return NextResponse.json({ Message: error, status: 500 });
  }

Kiểm tra api đã hoạt động chưa bằng công cụ Postman.

Vậy là đã thành công.

Kết luận:

Vậy là qua bài viết này, mình đã hướng dẫn anh em cách tạo API GET Image bằng NextJS thông qua Id hình ảnh một cách chi tiết. Đây là cách đơn giản và dễ triển khai, giúp anh em có thể lấy được hình ảnh đã upload từ server. Anh em có thể áp dụng cách này cho các dự án cá nhân hoặc những dự án lớn cần quản lý hình ảnh một cách hiệu quả.

Đừng quên, trong bài viết tiếp theo, mình sẽ hướng dẫn anh em cách tạo API GET Image bằng phương pháp thứ hai, đó là lấy hình ảnh thông qua [...slug]. Hãy tiếp tục theo dõi để không bỏ lỡ bài viết thú vị này nhé.

Hẹn gặp lại anh em trong bài viết tiếp theo! 💻🚀