DVDAIVO BLOG
A
Tác giả:

hddev244

Hướng dẫn: Cách tạo API GET Image với NextJS thông qua […slug]

Mở đầu:

  • Giới thiệu: Chào anh em, Đại Dev đây! Tiếp tục chuỗi hướng dẫn về API GET Image với NextJS, lần này mình sẽ chia sẻ cách lấy ảnh bằng […slug], một phương pháp mạnh mẽ và linh hoạt hơn nhiều so với chỉ dùng Id.
  • Lợi ích của phương pháp này: Sử dụng […slug] cho phép anh em linh hoạt hơn trong việc tạo URL động, giúp quản lý ảnh theo nhiều tiêu chí như tên ảnh, danh mục, hay bất kỳ thông tin nào mà URL có thể chứa.
  • Hãy bắt đầu: Không dài dòng nữa, chúng ta cùng bắt tay vào nhé!

Cách 2: Tạo API GET Image với NextJS thông qua […slug]

  1. Tạo API route:

    Tạo thư mục get-by-slug trong thư mục api và file route.ts với cấu trúc động [...slug]:

    route thư mục

    Giới thiệu về routing với [...slug]: Đây là một route động có thể nhận nhiều tham số trong URL. Giúp bạn linh hoạt hơn trong việc truy cập tài nguyên như hình ảnh.

  2. Đoạn code cơ bản cho route:

    Đầu tiên, chúng ta import các thư viện cần thiết:

    import { NextRequest, NextResponse } from "next/server";
import * as fs from "fs";
import path from "path";

type props = {
  params: {
    slug: string[];
  };
};

export async function GET(req: NextRequest, { params: { slug } }: props) {
  // Xử lý route với slug
}

  3. Xử lý tham số slug:

    Giải thích cấu trúc slug: Khi bạn sử dụng […slug], NextJS sẽ trả về một mảng các tham số. Trong trường hợp này, mỗi phần tử của mảng là một đoạn trong URL.

    const slugString = slug.join("/");

  4. Tìm hình ảnh bằng slug:

    Xử lý slug và truy cập hình ảnh: Chuyển đổi mảng slug thành một đường dẫn hợp lệ đến file hình ảnh.

    Đoạn code xử lý lấy hình ảnh:

    try {
    // đọc file từ thư mục public
    try {
      const filePath = path.join(process.cwd(), "public" + `/${slugString}`);
      const imageBuffer = await fs.readFileSync(filePath);
      const response = new NextResponse(imageBuffer);

      return response;
    } catch (error) {
      return NextResponse.json({ error }, { status: 404 });
    }
  } catch (error) {
    return NextResponse.json({ Message: error, status: 500 });
  }

  5. Kiểm tra API với Postman:

    Kết quả test

So sánh giữa Id và […slug]

  • Điểm mạnh của phương pháp Id: Đơn giản, dễ triển khai cho các ứng dụng nhỏ hoặc không có yêu cầu quá phức tạp về URL.
  • Lợi thế của phương pháp slug: Linh hoạt hơn, giúp tổ chức URL đẹp hơn, thân thiện với SEO và dễ quản lý khi số lượng ảnh lớn.
  • Khi nào nên dùng slug: Nếu bạn cần tạo URL mô tả chi tiết về tài nguyên (như danh mục hình ảnh, loại ảnh), thì sử dụng slug là cách tối ưu nhất.

Kết luận:

  • Tóm tắt: Qua bài viết này, anh em đã nắm được cách tạo API GET Image thông qua […slug] trong NextJS. Đây là một phương pháp cực kỳ hữu ích khi bạn muốn tổ chức các đường dẫn linh hoạt cho tài nguyên như hình ảnh.
  • Gợi ý bài viết kế tiếp: Ở bài viết tiếp theo, mình sẽ hướng dẫn anh em cách tối ưu việc tải ảnh từ server với NextJS và các kỹ thuật caching để tăng tốc độ website.
  • Lời cảm ơn và hẹn gặp lại: Cảm ơn anh em đã theo dõi bài viết. Đừng quên để lại bình luận nếu có thắc mắc. Hẹn gặp lại anh em trong bài viết tiếp theo nhé! 🚀

Bài viết liên quan:

>>Tạo API GET Image với NextJS

>>Làm thế nào để tạo API lưu file bằng NextJS ?

Chủ đề liên quan