Dự án này cung cấp một thư viện hoàn chỉnh cho việc đăng tải và quản lý ảnh, sử dụng Next.js kết hợp với NextAuth để xác thực người dùng và Cloudinary để lưu trữ, tối ưu hóa ảnh.
🔥 Công Nghệ Sử Dụng
-
Next.js: Framework React tối ưu cho SEO và SSR (Server-side Rendering).
-
NextAuth: Xác thực người dùng qua nhiều phương thức (Google, GitHub, Credentials, v.v.).
-
Cloudinary: Nền tảng lưu trữ ảnh trên đám mây, hỗ trợ resize, crop, tối ưu hóa ảnh.
-
Tính Năng Chính
🟢 Xác Thực Người Dùng (NextAuth)
-
Hỗ trợ đăng nhập & đăng xuất thông qua Google, GitHub, hoặc tài khoản email.
-
Lưu thông tin người dùng vào session để xác định quyền truy cập.
🟡 Tải Ảnh Lên Cloudinary
-
Chọn ảnh từ máy tính và preview trước khi tải lên.
-
Sử dụng API của Cloudinary để upload ảnh nhanh chóng.
-
Hỗ trợ resize, crop ảnh tự động trước khi upload.
🔵 Quản Lý & Hiển Thị Ảnh
-
Hiển thị gallery ảnh cá nhân dựa trên tài khoản đăng nhập.
-
Load ảnh từ Cloudinary CDN giúp tối ưu tốc độ tải trang.
-
Tích hợp Lazy Loading giúp cải thiện hiệu suất.
🔴 Xóa & Chỉnh Sửa Ảnh
-
Cho phép xóa ảnh khỏi thư viện (xóa luôn trên Cloudinary).
-
Hỗ trợ chỉnh sửa ảnh như cắt, thay đổi kích thước ngay trên Cloudinary.
📌 Quy Trình Hoạt Động
1️⃣ Người dùng đăng nhập vào hệ thống qua NextAuth.
2️⃣ Chọn ảnh và tải lên Cloudinary bằng API.
3️⃣ Hệ thống lưu URL ảnh vào database (nếu có) hoặc lấy trực tiếp từ Cloudinary.
4️⃣ Người dùng có thể xem gallery ảnh, xoá ảnh, hoặc chỉnh sửa ảnh.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn
Install các thư viện của NextJs = npm install ( hoặc yarn )
thay các key của
-
MONGODB_URI
-
NEXTAUTH_SECRET
-
GOOGLE_CLIENT_ID
-
GOOGLE_CLIENT_SECRET
-
CLOUD_NAME
-
CLOUD_API_KEY
-
CLOUD_API_SECRET
Run source và tận hưởng thành quả.
DONE