『作って学ぶ Next.js/React Webサイト構築』で作成したプロジェクトでWordPressのデータを扱ってみる

{
  "contents": [
    {
      "title": "スケジュール管理と猫の理論",
      "slug": "schedule",
      "publishDate": "2022-05-07T01:00:00.000Z",
      "content": "<p>何でもすぐに忘れてしまうので、予定を忘れないようにスケジュール管理手帳で予定を管理しています。でも、本当はスケジュールをスケジュールとして正しく認識できていないのかもしれません。<br></p><h2 id=\"h5dd003c520\">スケジュール管理は猫にまかせろ？</h2><p>スケジュール管理も1つのデザインです。スケジュール管理の理論として有名な本もあります。...",
      "eyecatch": {
        "url": "https://images.microcms-assets.io/assets/685...2da/schedule.jpg",
        "height": 1280,
        "width": 1920
      },
      "categories": [
        {
          "id": "design",
          "name": "デザインと設計",
          "slug": "design"
        },
        {
          "id": "fun",
          "name": "楽しいものいろいろ",
          "slug": "fun"
        }
      ]
    }
  ]
}

{
  "data": {
    "post": {
      "slug": "schedule",
      "title": "スケジュール管理と猫の理論",
      "date": "2022-05-07T10:00:00",
      "content": "\n<p>何でもすぐに忘れてしまうので、予定を忘れないようにスケジュール管理手帳で予定を管理しています。でも、本当はスケジュールをスケジュールとして正しく認識できていないのかもしれません。</p>\n\n\n\n<h2>スケジュール管理は猫にまかせろ？</h2>\n\n\n\n<p>スケジュール管理も1つのデザインです。スケジュール管理の理論として有名な本もあります。...",
      "featuredImage": {
        "node": {
          "sourceUrl": "http://xxx.xxx.xxx.xxx/wp-content/uploads/2022/08/schedule.jpg",
          "mediaDetails": {
            "height": 1280,
            "width": 1920
          }
        }
      },
      "categories": {
        "nodes": [
          {
            "name": "デザインと設計",
            "slug": "design"
          },
          {
            "name": "楽しいものいろいろ",
            "slug": "fun"
          }
        ]
      }
    }
  },
}

const API_URL = 'https://xxx.xxx.xxx.xxx/graphql'

async function fetchAPI(query = '', variables = {}) {
  const response = await fetch(API_URL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      query,
      variables,
    }),
  }).then((response) => response.json())

  if (response.errors) {
    console.error(json.errors)
    throw new Error('Failed to fetch API')
  }
  return response.data
}

export async function getPostBySlug(slug) {
  const variables = {
    slug,
  }

  const query = `
          query getPostBySlug($slug: ID!) {
            post(idType: SLUG, id: $slug) {
              slug
              title(format: RENDERED)
              date
              content(format: RENDERED)
              featuredImage {
                node {
                  sourceUrl
                  mediaDetails {
                    height
                    width
                  }
                }
              }
              categories {
                nodes {
                  name
                  slug
                }
              }
            }
          }
        `
  try {
    const response = await fetchAPI(query, variables)

    const content = {
      title: response.post.title,
      slug: response.post.slug,
      publishDate: response.post.date,
      content: response.post.content,
      categories: response.post.categories.nodes,
    }

    if (response.post.featuredImage) {
      content.eyecatch = {
        url: response.post.featuredImage.node.sourceUrl,
        height: response.post.featuredImage.node.mediaDetails.height,
        width: response.post.featuredImage.node.mediaDetails.width,
      }
    }
    return content
  } catch (err) {
    console.log('~~ getPostBySlug ~~')
    console.log(err)
  }
}

... 長くなりますので、GitHubにアップしてあります（この記事の末尾に掲載）

const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['images.microcms-assets.io', 'xxx.xxx.xxx.xxx'],
  },
}