Bạn đang tìm kiếm một giải pháp để xây dựng website công ty chuyên nghiệp hay giới thiệu sản phẩm, tối ưu hóa SEO và dễ dàng quản lý nội dung? Source code NextJS Fullstack Giới thiệu công ty là câu trả lời hoàn hảo dành cho bạn!
NextJS Fullstack Giới thiệu công ty là giải pháp hoàn hảo để xây dựng website công ty chuyên nghiệp với nhiều ưu điểm vượt trội:
Tiết kiệm chi phí: Chỉ trả phí một lần cho source code, miễn phí hosting Vercel, database và file quản lý.
Quản lý dễ dàng: Dashboard trực quan, tích hợp CMS mạnh mẽ, dễ dàng tạo, sửa, xóa nội dung, quản lý người dùng.
Tối ưu SEO: Code chuẩn SEO, website nhanh, giúp leo top Google.
Đa ngôn ngữ: Hỗ trợ 2 ngôn ngữ (Việt - Anh) cho toàn bộ website.
Tính năng nổi bật:
- Đăng nhập Google/Email
- Triển khai miễn phí trên Vercel
- Tự động deploy với Github
- Datatable chuẩn, filter, phân trang
- Quill Editor soạn thảo nội dung
- Tải ảnh và tối ưu hóa với Cloudinary
- Tự động tạo sitemap
- Frontend chuẩn SEO
- Database MongoDB
Demo: https://nextjs-company-intro.vinhwebapp.com/
Liên hệ: Zalo 0979.788.685 hoặc email vinhnguyenhubt@gmail.com để được tư vấn và hỗ trợ.
Tóm tắt đặc điểm
1. Chi phí rẻ (siêu tối ưu)
- Siêu tối ưu, chỉ cần trả một lần cho gói sản phẩm
- Chỉ tốn phí cho tên miền
- Database và file quản lý được sử dụng miễn phí (nâng cao thì tính phí theo khối lượng mình sử dụng). Deploy code cũng được miễn phí trên Vercel.
2. Sở hữu bộ code dashboard
- Authentication: đăng nhập tích hợp Google, đăng ký xác thực với email.
- Quản lý bài viết: dễ dàng và đầy đủ tính năng như chèn bảng, hình ảnh, video (thông qua link), thẻ heading... nhờ tích hợp Quill Editor
- Quản lý sản phẩm (nếu cần): mục đích để giới thiệu, liệt kê sản phẩm, không giỏ hàng.
- Quản lý người dùng
- Màn dashboard: liệt kê thông tin số liệu
3. Code Tổng Quan
- Chuẩn SEO, website nhanh, tốt cho google để được xếp hàng cao
- Tối ưu, code không bị thừa, rác
- Dễ dàng thêm tính năng mới
4. Website 2 ngôn ngữ
- Mặc định cấu hình 2 ngôn ngữ là Việt - Anh
- 2 ngôn ngữ được áp dụng cho toàn bộ hiện thị tại website, sản phẩm, bài viết...
Chi tiết Features:
1. Bao gồm CMS (Content Management System)
Source code được tích hợp sẵn hệ thống quản lý nội dung (CMS) mạnh mẽ, giúp bạn dễ dàng:
- Tạo, chỉnh sửa và xuất bản nội dung: Quản lý toàn bộ nội dung blog một cách trực quan và hiệu quả.
- Tổ chức nội dung: Phân loại bài viết theo danh mục, gắn thẻ tag... giúp người đọc dễ dàng tìm kiếm thông tin.
- Quản lý người dùng: Phân quyền truy cập cho các thành viên, quản lý thông tin người dùng.
2. Login bằng email hoặc Google
- Đăng nhập linh hoạt: Người dùng có thể đăng nhập bằng tài khoản email hoặc tài khoản Google, tăng sự tiện lợi và trải nghiệm người dùng.
- Bảo mật thông tin: Hệ thống đăng nhập được bảo mật với các tiêu chuẩn an ninh cao, đảm bảo an toàn thông tin người dùng.
3. Deploy free trên Vercel
- Triển khai nhanh chóng: Dễ dàng triển khai website lên nền tảng Vercel miễn phí, giúp bạn tiết kiệm chi phí và thời gian.
- Hiệu suất cao: Vercel cung cấp hạ tầng mạnh mẽ, đảm bảo website hoạt động ổn định và tốc độ tải trang nhanh chóng.
4. CI/CD auto-deploy với Github
- Tự động hóa quy trình triển khai: Mỗi khi bạn cập nhật code trên Github, hệ thống sẽ tự động build và deploy lên Vercel, giúp bạn tiết kiệm thời gian và công sức.
- Giảm thiểu lỗi: Quy trình CI/CD giúp phát hiện và sửa lỗi sớm, đảm bảo chất lượng code và website.
5. Datatable chuẩn, có filter, phân trang, edit nhanh
- Quản lý dữ liệu hiệu quả: Datatable được thiết kế chuẩn, hỗ trợ filter, phân trang và edit nhanh, giúp bạn dễ dàng quản lý dữ liệu người dùng, bài viết, sản phẩm...
- Trải nghiệm người dùng tốt hơn: Giao diện Datatable trực quan, dễ sử dụng, giúp bạn thao tác nhanh chóng và hiệu quả.
6. Quill Editor cho viết nội dung bài viết
- Soạn thảo nội dung chuyên nghiệp: Quill Editor là trình soạn thảo văn bản mạnh mẽ, hỗ trợ đầy đủ các tính năng định dạng, chèn ảnh, video, giúp bạn tạo ra nội dung bài viết chất lượng cao.
- Trải nghiệm viết tốt hơn: Giao diện Quill Editor trực quan, dễ sử dụng, mang lại trải nghiệm viết mượt mà và thú vị.
7. Upload và tối ưu hình ảnh với Cloudinary
- Lưu trữ hình ảnh tối ưu: Hình ảnh được upload và lưu trữ trên Cloudinary, giúp giảm tải cho server và tăng tốc độ tải trang.
- Tối ưu hóa hình ảnh tự động: Cloudinary tự động tối ưu kích thước và chất lượng hình ảnh, đảm bảo hình ảnh hiển thị đẹp mắt trên mọi thiết bị.
8. Tự động tạo sitemap
- Cải thiện SEO: Sitemap được tạo tự động, giúp Google dễ dàng index nội dung website của bạn, cải thiện thứ hạng tìm kiếm.
- Tiết kiệm thời gian: Bạn không cần phải tạo sitemap thủ công, hệ thống sẽ tự động cập nhật sitemap mỗi khi có thay đổi nội dung.
9. Trang Frontend chuẩn SEO
- Tối ưu hóa cho công cụ tìm kiếm: Source code được thiết kế chuẩn SEO, bao gồm cấu trúc URL thân thiện, thẻ meta, schema... giúp website của bạn dễ dàng được Google index và xếp hạng cao.
- Tăng lượt truy cập tự nhiên: SEO hiệu quả giúp thu hút nhiều lượt truy cập tự nhiên từ Google, tăng khả năng tiếp cận khách hàng tiềm năng.
10. Database lưu trữ với MongoDB
- MongoDB linh hoạt, hiệu quả, truy vấn nhanh: Là cơ sở dữ liệu NoSQL, phù hợp với dữ liệu blog, giúp website hoạt động mượt mà.
- Dễ dàng mở rộng và tích hợp: Đáp ứng nhu cầu lưu trữ tăng cao, tích hợp sẵn với source code.
Cài đặt
Stacks của source này là: NextJS + NextAuth + Cloudinary + MongoDB
Bên mình bàn giao source code, gửi thông tin hướng dẫn setup. Bao gồm
- Setup Database MongoDB
- Cấu hình Google Auth
- Cấu hình Cloudinary
- Cấu hình Github và Deploy Vercel
- Trỏ tên miền
- Cấu hình Email SMTP
Ngoài ra, khi mua Source code NextJS Fullstack Giới thiệu công ty, sản phẩm - 2 ngôn ngữ (có CMS), bạn còn nhận được:
- Hỗ trợ kỹ thuật: Nhận được sự hỗ trợ tận tình từ VinhWeb để giải đáp mọi thắc mắc và vấn đề kỹ thuật.
- Cập nhật thường xuyên: Mã nguồn được cập nhật liên tục để cải thiện hiệu suất, bảo mật và bổ sung tính năng mới.
Demo
Link website demo: https://nextjs-company-intro.vinhwebapp.com/
Video review một số chức năng (source code có thay đổi một số phần so với video - bạn có thể tham khảo thêm ở link demo và hình ảnh bên dưới - tuy nhiên vẫn đảm bảo cho nhu cầu giới thiệu công ty hoặc sản phẩm):
Một số hình ảnh
Đây là một hình nhỏ screenshot tại trang chủ. Bạn hoàn toàn có thể tùy chỉnh lại mọi thứ, chức năng đã có, dự liệu đã có. Bạn có thể dễ dàng tùy chỉnh theo ý muốn vì đã có một form code nhất định để làm theo.
Edit sản phẩm
Đây là một screenshot khác về chỉnh sửa sản phẩm. Ở đây không có gì đặc biệt ngoài phần Cập nhật thông tin Phân loại.
Phân loại của sản phẩm được cài đặt dựa vào danh mục sản phẩm. Cái chúng ta sẽ xem ở bên dưới. Phân loại phục vụ cho mục đích hiện thị có thêm chức năng lọc, để người dùng tìm kiếm, tra cứu dễ dàng, ưu thích website hơn.
Edit danh mục sản phẩm
Đây là trang Danh mục Sản phẩm
Ở đây là phần Cập nhật Danh mục. Với Danh mục sản phẩm Cha (to nhất). Chúng ta có thể đặt các phân loại, tùy chỉnh cấu hình, cho phép thêm nhiều cài đặt phân loại khác nhau.
Tuy vẫn có giới hạn nhưng nó hoạt động khá tốt. Bạn hoàn toàn có thể tùy biến theo nhu cầu, ý thích của mình.
Đây là view khi chúng ta cập nhật một danh mục con
- Có lựa chọn danh mục cha
- Không cho phép cài đặt phân loại (vì đã lấy cài đặt phân loại từ danh mục cha rồi)
Cài đặt tùy chỉnh
Dưới đây là một số tùy chỉnh khác, để người dùng (admin) có thể cập nhật nội dung cho website dễ dàng.
Những tùy chỉnh này phụ thuộc vào nhu cầu của khách hàng, mà ta sẽ bổ sung. Những phần cấu hình tùy chỉnh này là dạng JSON.
Hình số 2
Tùy chỉnh cho Trang Sản phẩm
Dễ dàng chỉnh sửa nội dung
Phần Edit nội dung bài viết và sản phẩm được xử lý khá ổn, kết với Quill Editor full tính năng bao gồm bảng, chèn ảnh (upload qua API)...
Giao diện quản lý nội dung bài viết
Edit dạng bảng
Datatable
Đây là phần Datatable được xử lý hoàn thiện với các loại filter, có params được xử lý đẩy lên url path, load theo phân trang chuẩn.
Lọc tag
Giao diện datatable
Lọc theo khoảng thời gian
Authentication
Phần Authentication hoàn chỉnh và free thông qua NextAuth - Google, và Gmail. UI thay đổi thông tin người dùng đã được build ngon lành.
Màn đăng nhập chính
Gửi email về để xác thực
Đăng nhập bằng Google
Quản lý thông tin người dùng
Thanh toán & Mua hàng
Bạn có thể mua hàng trực tiếp trên website hoặc thông qua Zalo của Vinh: 0979.788.685
Vui lòng chuyển khoản thanh toán theo mã QR dưới đây với nội dung: email + sđt + tên sản phẩm (NextJS Fullstack Giới thiệu công ty)
Ví dụ: vinhnguyenhubt@gmail.com 0979788685 NextJS Fullstack Giới thiệu công ty
VinhWeb sẽ xác nhận và chuyển sản phẩm tới bạn trong vòng 24 giờ.
