Foldables

Foldables là dự án thực nghiệm do Perxel nghiên cứu và phát triển, nhằm kiểm chứng trọn vẹn stack Next.js, Prismic và Cloudflare Workers từ khâu content modeling qua CLI đến triển khai trên hạ tầng Edge.

Chỉ số kỹ thuật và tổng quan

• Môi trường triển khai: Cloudflare Workers (Edge Network), qua OpenNext Cloudflare adapter, không dùng Vercel hay Cloudflare Pages
• Quy mô cấu trúc: 1 page type (Page) và 1 singleton (Home), demo với 1 slice (Hero)
• Cơ chế cập nhật nội dung: Revalidate tự động qua Webhook khi publish trên Prismic
• Preview: Full-website preview và Slice Simulator tích hợp trực tiếp trong Prismic Page Builder

Bối cảnh và mục tiêu

Đây là loại dự án phổ biến với marketing team: cần một website nhanh, chuẩn SEO, có giao diện quản trị chuyên nghiệp cho team không chuyên kỹ thuật, nhưng vẫn triển khai được trên hạ tầng Edge Network thay vì phụ thuộc vào Vercel mặc định.

Bộ khung Foldables hướng tới ba tiêu chí đồng thời:

Quản trị nội dung với Prismic

Foldables tích hợp Prismic theo mô hình SaaS, quản lý content type và slice qua CLI thay vì chỉnh sửa thủ công.

Biên tập nội dung qua Page Builder, xem trước từng slice trước khi publish.

• Content modeling qua CLI. Page type và slice được tạo và đồng bộ bằng lệnh npx prismic type create và npx prismic slice create, giữ model nhất quán giữa mã nguồn và dashboard.
• Xuất bản qua Page Builder. Nội dung thực tế được tạo và publish trực tiếp trong Prismic dashboard, tách biệt hoàn toàn với việc định nghĩa cấu trúc.
• Revalidate tức thì. Một webhook lắng nghe sự kiện publish từ Prismic và kích hoạt revalidate, giúp trang tĩnh cập nhật ngay mà không cần rebuild toàn bộ site.

Hạ tầng triển khai trên Cloudflare Workers

Vercel là lựa chọn mặc định và tương thích tự nhiên nhất với Next.js. Với Foldables, Perxel áp dụng lại giải pháp tích hợp qua OpenNext để vận hành ứng dụng trên Cloudflare Workers, đã được kiểm chứng trước đó qua dự án Atlas Robotics.

• Tối ưu chi phí vận hành. Cloudflare có gói miễn phí rộng rãi, hầu như không phát sinh chi phí hạ tầng ở quy mô truy cập của một marketing website.
• Mạng lưới Edge toàn cầu. Dữ liệu được phản hồi từ máy chủ gần người dùng nhất, giữ tốc độ phản hồi nhanh ở mọi vị trí địa lý.
• Custom domain và cache riêng. Cấu hình domain và R2 cache được quản lý trực tiếp qua Wrangler, tách biệt với môi trường dev.

Giá trị ứng dụng cho dự án khách hàng

Foldables là bộ khung kỹ thuật đã được kiểm chứng cho stack Next.js kết hợp Prismic. Khi triển khai dự án cho khách hàng chọn Prismic, Perxel không mất thời gian thiết lập lại content modeling hay hạ tầng deploy từ đầu, toàn bộ nguồn lực tập trung vào thiết kế giao diện độc bản và tối ưu trải nghiệm cho từng doanh nghiệp.

Xem thêm dịch vụ Website Next.js & Headless CMS. Bản demo đang chạy tại foldables.perxel.com.