Tạo trang blog detail trong Next.js với WordPress

Tổng quan

Giả sử quý vị đã có một trang blog với danh sách các bài viết như /blog/abc, /blog/xyz, … và muốn tạo trang chi tiết cho từng bài viết như /blog/abc, /blog/xyz, … thì bài viết này sẽ giúp quý vị làm được điều đó.

Bước 1: Tạo file trong thư mục pages

Trong thư mục pages, tạo một thư mục blog và tạo file [slug].tsx trong thư mục blog. File này sẽ là trang chi tiết của bài viết. [slug] là một dynamic route trong Next.js. Trong một số trường hợp, quý vị có thể muốn sử dụng id thay vì slug. Ví dụ: pages/blog/[id].tsx.

Ngoài ra còn phải sử dụng getStaticPaths và getStaticProps để tạo trang chi tiết cho bài viết. Tuy nhiên trong bài viết này, chúng ta sẽ gọi lên API của WordPress để lấy dữ liệu nên chỉ cần sử dụng getStaticProps là đủ.

// pages/blog/[slug].tsx
import { AppService } from "@/services/AppService";
import { useRouter } from 'next/router'
import { useEffect, useState } from "react";
export default function BlogDetails({ slug }: any) {
    const router = useRouter()
    const [blog, setBlog] = useState<any>([])
    useEffect(() => {
    if (router.isReady) {
        const appService = new AppService().getBlog(slug)
        appService.then((res) => {
        setBlog(res[0])
        })
    }
    }, [router.isReady])
    return (
    <>
        {blog && (
            <>
                <h1>{blog.title.rendered}</h1>
                <div dangerouslySetInnerHTML={{ __html: blog.content.rendered }} /> 
            </>
        )}
    </>
    )
}
BlogDetails.getInitialProps = ({ query: { slug } }: any) => {
    return { slug }
}

Bước 2: Tạo service để gọi API

import axios from 'axios';

export class AppService {
    public async getBlog(slug: string): Promise<any> {
		const getBlog = "https://[your-wordpress-site]/wp-json/wp/v2/posts?slug=";
		const res = await axios.get(getBlog + slug);
		return res.data
	}
}