ĐĂNG NHẬP
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.
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.
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.
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.
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.
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.
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
Install các thư viện của NextJs = npm install ( hoặc yarn )
thay các key của
Run source và tận hưởng thành quả. DONE
Nguồn: Topcode.vn
CODE NỔI BẬT
Source code web bán hàng (NextJs, NodeJs)
Quản lý nhân sự( Nodejs + mogoose + reactjs + sendMail)
React Native app hỗ trợ luyện tập, ôn tập từ vựng tiếng anh
Source code web xem phim siêu đẹp
Code đồ án Website xem phim NodeJs + ReactJs (MERN) + database full chức năng đi kèm
CODE GẦN GIỐNG
