WordPress REST API は、WordPress の情報を外部から取得するための API です。この記事では、WordPress REST API を使って、Next.js と TypeScript を組み合わせたウェブアプリでブログ記事を取得する方法を紹介します。
記事の取得と表示
まず、記事を取得するための関数を作成します。この関数では、WordPress REST API のエンドポイントを指定し、記事のデータを取得するようにします。fetch を使って、API からのレスポンスを処理します。
import { useEffect, useState } from 'react'
type Post = {
id: number
title: {
rendered: string
}
content: {
rendered: string
}
}
const fetchPosts = async (): Promise<Post[]> => {
const res = await fetch('https://example.com/wp-json/wp/v2/posts')
const data = await res.json()
return data
}
const Posts = () => {
const [posts, setPosts] = useState<Post[]>([])
useEffect(() => {
fetchPosts().then((data) => setPosts(data))
}, [])
return (
<div>
{posts.map((post) => (
<div key={post.id}>
<h2>{post.title.rendered}</h2>
<div dangerouslySetInnerHTML={{ __html: post.content.rendered }}></div>
</div>
))}
</div>
)
}
export default Posts
このコードでは、fetchPosts 関数を使って、WordPress REST API から記事のデータを取得しています。取得したデータは、Post 型の配列として扱われます。useEffect を使って、コンポーネントのマウント時にデータを取得し、useState で状態を管理します。
カスタムフックを使った記事取得
次に、カスタムフックを使って、記事の取得と状態管理を切り出す方法を紹介します。これにより、コードの再利用性が向上します。
import { useEffect, useState } from 'react'
type Post = {
id: number
title: {
rendered: string
}
content: {
rendered: string
}
}
const fetchPosts = async (): Promise<Post[]> => {
const res = await fetch('https://example.com/wp-json/wp/v2/posts')
const data = await res.json()
return data
}
const usePosts = () => {
const [posts, setPosts] = useState<Post[]>([])
useEffect(() => {
fetchPosts().then((data) => setPosts(data))
}, [])
return posts
}
const Posts = () => {
const posts = usePosts()
return (
<div>
{posts.map((post) => (
<div key={post.id}>
<h2>{post.title.rendered}</h2>
<div dangerouslySetInnerHTML={{ __html: post.content.rendered }}></div>
</div>
))}
</div>
)
}
export default Posts
上記のコードでは、usePosts というカスタムフックを作成しています。このフックでは、useState と useEffect を組み合わせて、記事データの状態管理と取得を行っています。Posts コンポーネントでは、このカスタムフックを使って記事データを取得し、表示しています。
記事詳細ページの作成
最後に、記事詳細ページを作成して、個々の記事を表示する方法を紹介します。
まず、記事詳細ページのコンポーネントを作成します。このコンポーネントでは、記事 ID を受け取り、その ID に対応する記事を取得して表示します。
import { useEffect, useState } from 'react'
type Post = {
id: number
title: {
rendered: string
}
content: {
rendered: string
}
}
type Props = {
id: number
}
const fetchPost = async (id: number): Promise<Post> => {
const res = await fetch(`https://example.com/wp-json/wp/v2/posts/${id}`)
const data = await res.json()
return data
}
const PostDetail = ({ id }: Props) => {
const [post, setPost] = useState<Post | null>(null)
useEffect(() => {
fetchPost(id).then((data) => setPost(data))
}, [id])
if (!post) {
return <div>Loading...</div>
}
return (
<div>
<h2>{post.title.rendered}</h2>
<div dangerouslySetInnerHTML={{ __html: post.content.rendered }}></div>
</div>
)
}
export default PostDetail
このコードでは、fetchPost 関数を使って、指定された ID の記事データを取得しています。取得したデータは、Post 型として扱われます。useEffect を使って、コンポーネントのマウント時と ID が変更されたときにデータを取得し、useState で状態を管理します。
以上で、WordPress REST API を使って、Next.js と TypeScript を組み合わせたウェブアプリでブログ記事を取得する方法を紹介しました。これらの技術を活用して、独自のウェブアプリを開発してみてください。