WordPressをヘッドレスCMSにしてNext.jsでサイトを作ってみる

npx create-next-app@latest
Need to install the following packages:
create-next-app@14.0.3
Ok to proceed? (y) y
✔ What is your project named? … wpgraphql-sample
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/dev_oka/Desktop/wpgraphql-sample.

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      Here is the content
    </main>
  )
}

'use client'
import { useEffect, useState } from 'react'

export default function Home() {

  const [posts, setPosts] = useState(null)

  useEffect(() => {
    const query = `query PostQuery  {
      posts {
        edges {
          node {
            id
            title
          }
        }
      }
    }
    `

    fetch('http://localhost:10073/graphql', {
      body: JSON.stringify({ query }),
      headers: {
        'Content-Type': 'application/json',
      },
      method: 'POST',
    })
      .then((res) => res.json())
      .then((json) => {
        setPosts(json.data.posts.edges)
      })
      .catch((error) => {
        console.error('エラー:', error)
      })
  }, [])

  console.log(posts)

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      Here is the content
    </main>
  )
}

const query = `query PostQuery  {
  posts {
    edges {
      node {
        id
        title
      }
    }
  }
}
`

fetch('http://localhost:10073/graphql', {
  body: JSON.stringify({ query }),
  headers: {
    'Content-Type': 'application/json',
  },
  method: 'POST',
})
.then((res) => res.json())
.then((json) => {
  setPost(json.data.posts.edges)
})
.catch((error) => {
  console.error('エラー:', error)
})

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <ul>
        {posts &&
          posts.map((post) => (
            <li key={post.node.id}>
              <h2>{post.node.title}</h2>
            </li>
          ))}
      </ul>
    </main>
  )