Loading...
Source code NextJS Fullstack Giới thiệu công ty, sản phẩm - 2 ngôn ngữ (có CMS)

Source code NextJS Fullstack Giới thiệu công ty, sản phẩm - 2 ngôn ngữ (có CMS)

04-02-2025 15:54:36
0
0
6,000,000đ
10,000,000 đ
-40%
Source code NextJS Fullstack giúp bạn dễ dàng xây dựng website công ty chuyên nghiệp, giới thiệu sản phẩm với 2 ngôn ngữ. Tích hợp CMS, tối ưu SEO, giao diện đẹp mắt, quản lý đơn giản.

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!

04022025212445nextjs company intro.jpg

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:

  1. Đăng nhập Google/Email
  2. Triển khai miễn phí trên Vercel
  3. Tự động deploy với Github
  4. Datatable chuẩn, filter, phân trang
  5. Quill Editor soạn thảo nội dung
  6. Tải ảnh và tối ưu hóa với Cloudinary
  7. Tự động tạo sitemap
  8. Frontend chuẩn SEO
  9. 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ợ.

04022025201747website-company-intro.jpg

Tóm tắt đặc điểm

1. Chi phí rẻ (siêu tối ưu)

  1. Siêu tối ưu, chỉ cần trả một lần cho gói sản phẩm
  2. Chỉ tốn phí cho tên miền
  3. 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

  1. Authentication: đăng nhập tích hợp Google, đăng ký xác thực với email.
  2. 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
  3. 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.
  4. Quản lý người dùng
  5. Màn dashboard: liệt kê thông tin số liệu

3. Code Tổng Quan

  1. Chuẩn SEO, website nhanh, tốt cho google để được xếp hàng cao
  2. Tối ưu, code không bị thừa, rác
  3. Dễ dàng thêm tính năng mới

4. Website 2 ngôn ngữ

  1. Mặc định cấu hình 2 ngôn ngữ là Việt - Anh
  2. 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:

  1. 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ả.
  2. 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.
  3. 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

  1. Đă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.
  2. 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

  1. 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.
  2. 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

  1. 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.
  2. 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

  1. 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...
  2. 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

  1. 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.
  2. 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

  1. 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.
  2. 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

  1. 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.
  2. 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

  1. 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.
  2. 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

  1. 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à.
  2. 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

  1. Setup Database MongoDB
  2. Cấu hình Google Auth
  3. Cấu hình Cloudinary
  4. Cấu hình Github và Deploy Vercel
  5. Trỏ tên miền
  6. 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:

  1. 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.
  2. 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.

04022025201747website-company-intro.jpg

04022025212755homepage-en.jpg

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.

04022025201947edit-product.jpg


Edit danh mục sản phẩm

Đây là trang Danh mục Sản phẩm

04022025201925product categories.jpg

Ở đâ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.

04022025201932edit product categories.jpg

Đây là view khi chúng ta cập nhật một danh mục con

  1. Có lựa chọn danh mục cha
  2. 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)

04022025201938edit product categories 2.jpg

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.

04022025201900tuy-chinh.jpg

Hình số 2

04022025201909tuy-chinh-2.jpg

Tùy chỉnh cho Trang Sản phẩm

04022025201914tuy-chinh-3.jpg

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)...

15092024144429z5832255352917_b4015f691fe707d1d60a5ed2d4f7dda4.jpg

Giao diện quản lý nội dung bài viết


15092024144421z5832255307425_bf2b8c1bf6a7f8b84c9e055c672b3070.jpg

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.

15092024144507z5832261789517_11bc1916d124119b15020df0fff19e7c.jpg

Lọc tag


15092024144521z5832247687349_e8f0c2ed10c7b9162106dd5c6864d2c9.jpg

Giao diện datatable


15092024144526z5832247687329_af5388a6cba97963c214d07729057a1d.jpg

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.

15092024210027z5820153277979_a195a7c5cb9ad4ec87d0631af227a775.jpg

Màn đăng nhập chính

15092024233222716shots_so.jpg

Gửi email về để xác thực


15092024210055z5820153277850_4ec8ee09b778544d1d253f402464bd5b.jpg

Đăng nhập bằng Google

15092024210101513shots_so.jpg

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ờ.

18122024141030momo-new.jpg


Tags sản phẩm:
Chia sẻ:

0 bình luận

Để lại bình luận

Thích bài viết? Nhận tin mới
Đừng quên share bài này

Sản phẩm liên quan

Tất cả
Top Zalo contact