Tóm tắt nhanh
- 🌎 Demo Trực Tiếp: ssg-nextjs-cms-sanity.netlify.app
- 📑 Mã Nguồn: github.com/arnaudrenaud/ssg-nextjs-cms-sanity
Hướng dẫn này có dành cho bạn không?
Hướng dẫn này dành cho bạn nếu:
- Bạn muốn một trang web công khai, chủ yếu là chỉ đọc (không có nội dung do người dùng cung cấp).
- Nội dung không cần thay đổi hàng chục lần mỗi ngày, vì mỗi lần cập nhật sẽ kích hoạt một quá trình tái xây dựng.
Lợi ích
Nếu những điều trên phù hợp với nhu cầu của bạn, bạn sẽ nhận được:
- Giao diện CMS đồ họa để quản lý nội dung trên đám mây.
- Không cần duy trì server hoặc cơ sở dữ liệu (ít công việc hơn, an toàn hơn).
- Không có phí triển khai hoặc lưu trữ.
- Trang tải nhanh, đã được tiền xử lý.
- Tương tác phía trình duyệt, nếu cần.
- Một số chức năng form (xem trang liên hệ).
Bộ công cụ
- 📝 Ngôn ngữ: TypeScript
- 🛠️ Xây dựng: Tạo trang tĩnh (SSG) với Next.js (App Router)
- 📄 Frontend: React.js, Tailwind CSS
- 🗂️ CMS: Sanity (gói miễn phí)
- 🌍 Hosting: Netlify (gói miễn phí)
Cách hoạt động
Hệ thống quản lý nội dung (CMS)
Nội dung được quản lý thông qua giao diện web do Sanity cung cấp, một nhà cung cấp đám mây với gói miễn phí. Bạn có thể cấp quyền biên tập hoặc quyền quản trị cho người dùng trên giao diện Sanity của bạn (gọi là Studio).
Các loại thực thể, với các thuộc tính và quan hệ của chúng, phải được xác định trong mã và sau đó triển khai vào studio.
Khi các loại này được triển khai, bạn có thể tạo, cập nhật và xóa bản ghi mà không cần cập nhật mã.
Ví dụ: Các loại thực thể cho một Blog:
Bài viết: một tập hợp các bản ghiBài viết, mỗi bản ghi có:tiêu đề(văn bản)ngày xuất bản(ngày tháng)hình ảnh chính(tải lên hình ảnh)nội dung(văn bản phong phú)tác giả(tham chiếu đếnTác giả)
- Các bản ghi đơn (bản ghi duy nhất), ví dụ:
Trang chính(với trườnghero)Metadata(cho SEO:tiêu đề,mô tả)
Kết xuất
Các trang được viết bằng React, cho phép hành vi phía trình duyệt nếu cần.
Next.js lấy nội dung từ Sanity và sử dụng nó trong quá trình kết xuất trang.
Các trang được kết xuất tại thời điểm xây dựng (phía server), bởi Next.js với App Router. Đây được gọi là tạo trang tĩnh (SSG) và dẫn đến một tập hợp các tệp: các trang (HTML) và các tài sản của chúng (JS, CSS, hình ảnh, v.v.).
Triển khai
Việc triển khai được quản lý bởi Netlify, một dịch vụ lưu trữ phục vụ các trang web tĩnh miễn phí, miễn là bạn không vượt quá băng thông hàng tháng (hiện tại là 5 GB) và một trăm lần xây dựng.
Bạn sẽ không phải lo lắng về việc cập nhật trang web sau khi có thay đổi: bất cứ khi nào bạn cập nhật nội dung trong Sanity hoặc đẩy thay đổi mã lên GitHub, Netlify sẽ tự động được thông báo và tái xây dựng trang web với nội dung và mã mới nhất.
Bắt đầu
Fork hoặc clone mã nguồn và làm theo hướng dẫn (tất cả các bước kỹ thuật trong README.md):
👉 github.com/arnaudrenaud/ssg-nextjs-cms-sanity
Cũng được xuất bản trên blog cá nhân của tôi: arnaudrenaud.com
Thực hành tốt
- Tối ưu hóa SEO: Đảm bảo rằng tất cả các trường
Metadatađược điền đầy đủ để cải thiện khả năng hiển thị trên công cụ tìm kiếm. - Sao lưu định kỳ: Thực hiện sao lưu nội dung thường xuyên để bảo vệ dữ liệu.
Những cạm bẫy thường gặp
- Không kiểm soát nội dung: Nếu nội dung có thể thay đổi thường xuyên, có thể cần xem xét một giải pháp khác.
- Giới hạn băng thông: Chắc chắn rằng bạn không vượt quá giới hạn băng thông miễn phí của Netlify.
Mẹo hiệu suất
- Sử dụng hình ảnh tối ưu: Nén hình ảnh và sử dụng định dạng hình ảnh mới nhất để tăng tốc độ tải trang.
- Giảm thiểu JavaScript: Tối ưu hóa mã JavaScript và CSS để giảm kích thước tệp.
Khắc phục sự cố
- Không thể kết nối đến Sanity: Kiểm tra cài đặt mạng và quyền truy cập API.
- Lỗi trong quá trình xây dựng: Kiểm tra nhật ký xây dựng trên Netlify để tìm hiểu nguyên nhân.
Câu hỏi thường gặp (FAQ)
1. Tôi có thể sử dụng gói Sanity miễn phí không?
Có, gói miễn phí của Sanity rất đủ cho các dự án nhỏ.
2. Làm thế nào để cập nhật nội dung?
Bạn chỉ cần truy cập vào giao diện Sanity và thực hiện các thay đổi cần thiết.
3. Tôi có thể chuyển sang gói trả phí không?
Có, khi dự án phát triển, bạn có thể nâng cấp lên gói trả phí của Sanity hoặc Netlify.
