Bài toán

Nhà trường đã quản lý nội dung (tin tức, trang giới thiệu, chương trình học) trên WordPress. Giao diện WordPress cũ chậm, khó tối ưu SEO và khó làm các trang tuyển sinh có hiệu ứng riêng. Trường cần một website mới nhanh, đẹp, chuẩn SEO, nhưng đội truyền thông vẫn soạn bài trên WordPress quen thuộc. Website cũng phải thu được thông tin đăng ký tư vấn tuyển sinh của phụ huynh.

Giải pháp và chức năng chính

  • Headless WordPress: WordPress chỉ làm nơi soạn nội dung. Website Next.js lấy bài viết, trang và chuyên mục qua WordPress REST API. Một route động [[...slug]] hiển thị đúng đường dẫn cũ của WordPress, gồm bài viết, trang, chuyên mục, tìm kiếm và nút “xem thêm”.
  • Trang chủ tuyển sinh thiết kế riêng: banner “Trải nghiệm để trưởng thành”, khối “1 Thông điệp – 3 Khác biệt – 5 Giá trị”, số liệu chạy hiệu ứng (react-countup), đời sống nội trú (mô hình quản lý, thời gian biểu, dịch vụ), thành tích học sinh, cảm nhận phụ huynh và học sinh, tham quan trực tuyến.
  • Trang dựng sẵn trong code: Giới thiệu trường, Đời sống nội trú, Chương trình đào tạo.
  • Form đăng ký nhận tư vấn: Server Action gửi email thông báo cho bộ phận tuyển sinh qua nodemailer và lưu bản ghi CSV. Form có checkbox đồng ý xử lý dữ liệu cá nhân, ẩn được trên một số trang.
  • Chống spam form: trường bẫy (honeypot), kiểm tra định dạng họ tên và số điện thoại, bỏ qua bản ghi trùng gần nhất, làm chậm phản hồi khi nghi là bot.
  • SEO và chia sẻ: tự sinh title, description và ảnh OG từ bài WordPress.
  • Tích hợp marketing: Google Analytics và chat Subiz, chỉ nạp sau khi người dùng tương tác để trang không bị chậm.
  • Ghi log lỗi: khi gọi API WordPress lỗi, hệ thống ghi lại đường dẫn và thời điểm để dễ tra soát.

Công nghệ

Next.js 15 (App Router, Server Components, Server Actions), React 19, TypeScript, SCSS Modules, wordpress-api-client, sanitize-html, sharp (ảnh AVIF/WebP), nodemailer, pnpm, Docker (node:20) và GitLab CI build image, nginx.

Điểm ưu việt

  • Nhanh và nhẹ: dữ liệu WordPress được cache 5 phút. Ảnh tự chuyển sang AVIF/WebP và cache dài hạn. Script bên thứ ba nạp chậm.
  • Không phải đổi thói quen soạn bài: đội nội dung vẫn dùng WordPress, đường dẫn cũ giữ nguyên nên không mất SEO.
  • An toàn hơn WordPress truyền thống: người truy cập chỉ thấy site Next.js. HTML từ CMS được lọc trước khi hiển thị, iframe chạy sandbox, phiên bản Next.js được vá bảo mật (12/2025).
  • Thu lead tuyển sinh ổn định: form có nhiều lớp chống spam, có lưu dự phòng và báo email ngay khi có đăng ký mới.