E-commerce Website
Sang Garden Next.js
Website thương mại điện tử cho cây cảnh, thiết kế sân vườn và dịch vụ xanh tại Đà Nẵng.
Dự án được xây dựng bằng Next.js App Router, Sanity CMS, next-intl và CSS Modules. Hệ thống hỗ trợ đa ngôn ngữ, quản lý sản phẩm/dịch vụ/dự án/bài viết từ CMS, giỏ hàng, checkout, gửi email đơn hàng qua Resend và tối ưu SEO với metadata, sitemap, robots cùng dữ liệu có cấu trúc.
Next.js 16.2React 19Sanity CMSnext-intlResendVercel
Điểm nổi bật
Next.js App Router
Sử dụng App Router, Server Components, dynamic routes theo locale và cơ chế revalidate cho dữ liệu từ Sanity.
Sanity CMS + CDN
Nội dung sản phẩm, dịch vụ, dự án, blog và hình ảnh được quản lý qua Sanity; production dùng Sanity CDN cho media và dữ liệu đọc.
Giỏ hàng và đặt hàng
Có cart drawer, trang checkout, validate form, lưu đơn hàng vào Sanity và gửi email thông báo qua Resend.
Công nghệ
Frontend
- Next.js 16.2.4 — App Router, Server Components, metadata, sitemap và route handlers
- React 19.2.4 — Nền tảng UI cho client và server components
- TypeScript — Định kiểu chặt chẽ cho pages, components và API routes
- next-intl — Routing, messages và giao diện đa ngôn ngữ (Việt - Anh)
CMS & Backend
- Sanity CMS — Mô hình nội dung headless cho sản phẩm, danh mục, dịch vụ, dự án, bài viết và đơn hàng
- GROQ + next-sanity — Truy vấn nội dung với revalidation và đọc từ CDN trên production
- Resend — Email giao dịch cho đơn hàng mới và xác nhận với khách hàng
- Route Handlers — Xử lý đặt hàng, API tìm kiếm sản phẩm và rate limiting
Chức năng chính
Sản phẩm
Danh sách sản phẩm, lọc theo danh mục, lọc giá, sắp xếp, tìm kiếm và trang chi tiết sản phẩm.
Dịch vụ
Trang dịch vụ và chi tiết dịch vụ cho chăm sóc cây, decor, tưới tự động, thiết kế và thi công sân vườn.
Dự án và blog
Khu vực dự án thực tế, bài viết, nội dung SEO và dữ liệu đa ngôn ngữ từ CMS.
SEO kỹ thuật
Metadata theo locale, canonical, Open Graph, sitemap, robots và JSON-LD cho GardenStore.
Hình ảnh
Giao diện Trang chủ
Danh sách Sản phẩm
Chi tiết Sản phẩm
Giỏ hàng (Shopping Cart)