Xây dựng Blog cá nhân Headless với Next.js và WordPress REST API

Mở bài

Trong thời đại số hiện nay, việc sở hữu một blog cá nhân không chỉ giúp bạn chia sẻ kiến thức mà còn là nền tảng để xây dựng thương hiệu cá nhân. Bài viết này sẽ hướng dẫn bạn cách xây dựng một blog cá nhân headless sử dụng Next.js và WordPress REST API. Với cách tiếp cận này, bạn có thể tận dụng sức mạnh của WordPress như một hệ quản trị nội dung (CMS) trong khi vẫn có thể xây dựng giao diện nhanh chóng và linh hoạt với Next.js.

Mục lục

• Điều kiện tiên quyết
• Các bước thực hiện
• Kiểm thử và rollback
• Lỗi thường gặp
• Câu hỏi thường gặp

Điều kiện tiên quyết

• Phiên bản Node.js: 12.x trở lên.
• Cài đặt Next.js: sử dụng npx create-next-app.
• Cài đặt WordPress: cần có một trang WordPress đã được cài sẵn và mở REST API.

Các bước thực hiện

1. Cài đặt Next.js

   npx create-next-app my-blog

   Bạn có thể thay thế my-blog bằng tên dự án mà bạn muốn.

2. Chạy ứng dụng Next.js

   cd my-blog
   npm run dev

   Truy cập vào http://localhost:3000 để kiểm tra ứng dụng đã chạy hay chưa.

3. Kết nối với WordPress REST API

   Bạn cần lấy URL của API WordPress, thường là http://your-wordpress-site/wp-json/wp/v2/.

4. Tạo một file để fetch dữ liệu từ API

   import axios from 'axios';
   
   const fetchPosts = async () => {
       const res = await axios.get('http://your-wordpress-site/wp-json/wp/v2/posts');
       return res.data;
   };

5. Hiển thị dữ liệu trên trang

   const HomePage = ({ posts }) => {
       return (
           
   
               {posts.map(post => (
                   
   {post.title.rendered}
               ))}
           
       );
   };
   
   export async function getStaticProps() {
       const posts = await fetchPosts();
       return { props: { posts } };
   }

Kiểm thử và rollback

• Truy cập vào địa chỉ http://localhost:3000 và kiểm tra xem các bài viết có hiển thị đúng không.
• Nếu có lỗi xảy ra, bạn có thể quay lại trạng thái trước bằng cách sử dụng git hoặc khôi phục lại bản sao lưu của dự án.

Lỗi thường gặp

• Không thể kết nối với API: Kiểm tra URL API và đảm bảo rằng trang WordPress của bạn đã mở REST API.
• Không hiển thị bài viết: Kiểm tra xem dữ liệu có được fetch thành công hay không bằng cách console.log.
• Vấn đề với CORS: Nếu bạn gặp lỗi CORS, hãy thử thêm các plugin để cho phép truy cập từ các nguồn khác nhau trong WordPress.

Câu hỏi thường gặp

• Blog cá nhân headless là gì?

  Blog cá nhân headless là một blog mà frontend và backend được tách biệt. Frontend có thể được xây dựng bằng Next.js, trong khi backend là WordPress.

• WordPress REST API là gì?

  WordPress REST API cho phép bạn truy cập và tương tác với dữ liệu từ WordPress thông qua các request HTTP.

• Tại sao nên sử dụng Next.js?

  Next.js giúp bạn tạo ra các trang web nhanh chóng, tối ưu hóa SEO và hỗ trợ SSR (Server-Side Rendering).

Với hướng dẫn trên, bạn đã có thể xây dựng một blog cá nhân headless bằng Next.js và WordPress REST API. Hãy bắt tay vào thực hiện và chia sẻ những trải nghiệm của bạn!

Nếu bạn muốn tìm hiểu thêm về WordPress, hãy xem các bài viết khác trong chuyên mục tin tức trên The Mia Việt Nam.