Full-stack developer and
community builder from Vietnam 🇻🇳

@AIVI

Hướng dẫn tạo trang blog siêu nhanh siêu mượt bằng NextJS + WordPress Headless CMS

Chào các bạn, chào mừng đến với chuyên mục “Lười nhưng vẫn muốn nhanh” trong lập trình!

Mình là một người yêu thích tốc độ, nên trong coding, gì nhanh là chơi! Vì thế, Next.js trở thành lựa chọn số 1 cho dự án blog cá nhân của mình. Next.js nhanh, thân thiện với SEO và có thể build thành web lẫn mobile app.

Còn WordPress? Ai cũng biết rồi, WP quản lý bài viết và hỗ trợ SEO rất tốt nhưng tốc độ web chưa tốt bằng SSR của Next.js. Vậy nên ta dùng WordPress như một Headless CMS – nghĩa là WP quản lý nội dung, còn giao diện ta dùng Next.js cho nhanh và mạnh.

Cần chuẩn bị gì?

Trước khi vào việc, bạn cần:

Node.js (phiên bản mới nhất)
Docker (vì ta build lên VPS sau này)
Git (để clone repo nhanh gọn)

Sau đó, bạn clone project từ GitHub về:

  git clone https://github.com/derrick-nguyen/thanhtuan-blog.git
  cd thanhtuan-blog

Cài đặt dự án Next.js

Cài đặt dependencies: npm install
Chạy dự án local: npm run dev

Dòng lệnh này sẽ khởi chạy server và bạn truy cập web tại http://localhost:3000.

Thiết lập WordPress Headless CMS

Cài đặt WordPress trên localhost, bạn có thể chạy file docker-compose.yml trong code với lệnh docker-compose up -d
Chúng ta sẽ dùng trực tiếp WordPress API RESTFull v2 của WP, không cần cài thêm bất kỳ plugin nào.
Lấy API URL: Tài liệu API của WordPress https://developer.wordpress.org/rest-api/. Đa số sẽ có dạng là https://example.com/wp-json/wp/v2/posts – để lấy danh sách tất cả bài viết

Kết nối Next.js với WordPress

Cập nhật biến môi trường trong .env: NEXT_PUBLIC_API_URL = 'https://example.com/wp-json/wp/v2'
Chạy lại server để update biến môi trường: npm run dev

Tích hợp phân trang và Skeleton loading

Dự án này dùng MUI Pagination và Skeleton loading.

Build và deploy lên VPS

Dùng Docker build nhanh:

  docker build -t nextjs-blog .
  docker run -p 3000:3000 nextjs-blog

Sau đó, trên VPS chạy:

  docker-compose up -d

Kết luận

Dự án được viết bằng NextJS phiên bản 15 và Tailwind CSS bản ver 4. Đa số điều là các version mới nhất hiện tại. Kết hợp với 1 số component của MUI như Pagination cho phân trang hoặc Skeleton khi đang loading data.

Bây giờ bạn đã có một blog cá nhân chạy nhanh và tối ưu SEO với Next.js và WordPress Headless CMS. Còn chờ gì nữa, hay tạo bài viết đầu tiên nào!

Thanh Tuấn - Fullstack Developer