WordPress làm Headless CMS với Next.js
Pattern thực tế mình hay dùng — Custom Post Types, ACF fields và REST API cấp dữ liệu cho frontend Next.js.
Nguyễn Đình Giang
· · 1 phút đọc
Lập trình viên frontend ở Hà Nội. Mình viết về Next.js, WordPress và hiệu năng của những thứ mình thực sự ship.
Phần lớn dự án khách hàng của mình nằm ở giao điểm WordPress và Next.js. WordPress quản lý nội dung; Next.js mang lại frontend nhanh, hiện đại mà người dùng mong đợi.
Pattern cơ bản
- WordPress lưu content qua Custom Post Types và ACF fields
- REST API expose JSON có cấu trúc cho từng loại nội dung
- Next.js fetch data lúc build hoặc on-demand
- Tailwind + shadcn/ui render UI pixel-perfect từ thiết kế Figma
Setup này giúp khách hàng không chuyên kỹ thuật vẫn quen admin WordPress, trong khi site public vẫn nhanh và thân thiện SEO.
Ví dụ: fetch danh sách tour
const res = await fetch(`${WP_API}/wp/v2/tours?_embed`, {
next: { revalidate: 3600 },
})
const tours = await res.json()Ở các nền tảng đặt tour mình từng làm, mình dùng đúng flow này cho listing tour, bộ lọc và form đặt chỗ.
Mẹo tiết kiệm thời gian
- Định nghĩa ACF field groups sớm, giữ tên field REST nhất quán
- Dùng
revalidatethay vì build tĩnh hoàn toàn khi content thay đổi thường xuyên - Cache response WordPress và tối ưu ảnh ở cả CMS lẫn frontend
- Giữ logic payment và auth ở phía Next.js khi có thể
Khi nào hợp nhất
Headless WordPress rất hợp cho site marketing, nền tảng booking và storefront e-commerce — nơi editor cần linh hoạt nhưng user cần tốc độ. Cùng luồng CPT → REST → Next.js nuôi tour booking platform và nền tảng tour đa ngôn ngữ.
Admin ở WordPress. Trải nghiệm ở Next.js. Ai cũng có lợi.
Tham khảo: WordPress REST API, ACF, và Data Fetching / Caching của Next.js.