Next.js(app router)+ヘッドレスWordpress+shadcn/uiで作るコーポレートサイト｜WordPressとNext.jsの繋ぎ込み編

const API_URL = process.env.WORDPRESS_API_URL;

async function fetchAPI(query = "", { variables }: Record<string, any> = {}) {
  const headers: Record<string, string> = {
    "Content-Type": "application/json",
  };

  if (process.env.WORDPRESS_AUTH_REFRESH_TOKEN) {
    headers["Authorization"] =
      `Bearer ${process.env.WORDPRESS_AUTH_REFRESH_TOKEN}`;
  }

  const res = await fetch(API_URL!, {
    headers,
    method: "POST",
    body: JSON.stringify({
      query,
      variables,
    }),
  });

  const json = await res.json();
  if (json.errors) {
    console.error(json.errors);
    throw new Error("Failed to fetch API");
  }
  return json.data;
}

export async function getAllPostsWithSlug() {
  const data = await fetchAPI(`
    {
      posts(first: 10000) {
        edges {
          node {
            slug
          }
        }
      }
    }
  `);
  return data?.posts;
}

export async function getAllPostsForHome() {
  const data = await fetchAPI(`
    query AllPosts {
      posts(first: 20, where: { orderby: { field: DATE, order: DESC } }) {
        edges {
          node {
            title
            excerpt
            slug
            date
            featuredImage {
              node {
                sourceUrl
              }
            }
            author {
              node {
                name
                firstName
                lastName
                avatar {
                  url
                }
              }
            }
          }
        }
      }
    }
  `);

  return data?.posts;
}

export async function getPostAndMorePosts(slug: string) {
  const data = await fetchAPI(
    `
    fragment AuthorFields on User {
      name
      firstName
      lastName
      avatar {
        url
      }
    }
    fragment PostFields on Post {
      title
      excerpt
      slug
      date
      featuredImage {
        node {
          sourceUrl
        }
      }
      author {
        node {
          ...AuthorFields
        }
      }
      categories {
        edges {
          node {
            name
          }
        }
      }
      tags {
        edges {
          node {
            name
          }
        }
      }
    }
    query PostBySlug($id: ID!) {
      post(id: $id, idType: SLUG) {
        ...PostFields
        content
      }
      posts(first: 3, where: { orderby: { field: DATE, order: DESC } }) {
        edges {
          node {
            ...PostFields
          }
        }
      }
    }
  `,
    {
      variables: {
        id: slug,
      },
    }
  );

  // Filter out the main post
  data.posts.edges = data.posts.edges.filter(
    ({ node }: { node: { slug: string } }) => node.slug !== slug
  );
  // If there are still 3 posts, remove the last one
  if (data.posts.edges.length > 2) data.posts.edges.pop();

  return data;
}

はい、TOPページの新着記事の4件を表示する部分を作成しましょう。提供された情報を元に、適切なディレクトリ構造でコードを書いていきます。
まず、lib/api.tsファイルに先ほどのfetchAPI関数を移動します。
typescriptCopy code// lib/api.ts
const API_URL = process.env.WORDPRESS_API_URL;

export async function fetchAPI(query = "", { variables }: Record<string, any> = {}) {
  const headers: Record<string, string> = {
    "Content-Type": "application/json",
  };

  if (process.env.WORDPRESS_AUTH_REFRESH_TOKEN) {
    headers["Authorization"] = `Bearer ${process.env.WORDPRESS_AUTH_REFRESH_TOKEN}`;
  }

  const res = await fetch(API_URL!, {
    headers,
    method: "POST",
    body: JSON.stringify({
      query,
      variables,
    }),
  });

  const json = await res.json();
  if (json.errors) {
    console.error(json.errors);
    throw new Error("Failed to fetch API");
  }
  return json.data;
}
次に、features/post/api/getRecentPosts.tsファイルを作成し、新着記事を取得するAPIを実装します。
typescriptCopy code// features/post/api/getRecentPosts.ts
import { fetchAPI } from "@/lib/api";

export async function getRecentPosts() {
  const data = await fetchAPI(`
    query RecentPosts {
      posts(first: 4, where: { orderby: { field: DATE, order: DESC } }) {
        edges {
          node {
            title
            excerpt
            slug
            date
            featuredImage {
              node {
                sourceUrl
              }
            }
            author {
              node {
                name
              }
            }
          }
        }
      }
    }
  `);

  return data?.posts;
}
続いて、features/post/types/index.tsファイルを作成し、投稿データの型を定義します。
typescriptCopy code// features/post/types/index.ts
export type Post = {
  title: string;
  excerpt: string;
  slug: string;
  date: string;
  featuredImage: {
    node: {
      sourceUrl: string;
    };
  };
  author: {
    node: {
      name: string;
    };
  };
};
次に、features/post/components/PostItem.tsxファイルを作成し、個々の投稿を表示するコンポーネントを実装します。
typescriptCopy code// features/post/components/PostItem.tsx
import { Post } from "../types";

type Props = {
  post: Post;
};

export function PostItem({ post }: Props) {
  return (
    <div>
      <h2>{post.title}</h2>
      <p>{post.excerpt}</p>
      <p>By {post.author.node.name}</p>
      <p>{post.date}</p>
    </div>
  );
}
最後に、app/page.tsxファイルを作成し、TOPページを実装します。
typescriptCopy code// app/page.tsx
import { getRecentPosts } from "@/features/post/api/getRecentPosts";
import { PostItem } from "@/features/post/components/PostItem";
import { Post } from "@/features/post/types";

export default async function Home() {
  const posts = await getRecentPosts();

  return (
    <div>
      <h1>Latest Posts</h1>
      {posts.edges.map(({ node }: { node: Post }) => (
        <PostItem key={node.slug} post={node} />
      ))}
    </div>
  );
}

// features/post/api/getRecentPosts.ts
import { fetchAPI } from "@/lib/api";

export async function getRecentPosts(limit: number, offset: number) {
  const data = await fetchAPI(
    `
    query RecentPosts($limit: Int!, $offset: Int!) {
      posts(first: $limit, skip: $offset, where: { orderby: { field: DATE, order: DESC } }) {
        edges {
          node {
            title
            excerpt
            slug
            date
            featuredImage {
              node {
                sourceUrl
              }
            }
            author {
              node {
                name
              }
            }
          }
        }
        pageInfo {
          totalCount
          hasNextPage
          hasPreviousPage
        }
      }
    }
  `,
    {
      variables: {
        limit,
        offset,
      },
    }
  );

  return data?.posts;
}

// features/post/api/getPostAndMorePosts.ts
import { fetchAPI } from "@/lib/api";

export async function getPostBySlug(slug: string) {
  const data = await fetchAPI(
    `
    fragment AuthorFields on User {
      name
      firstName
      lastName
      avatar {
        url
      }
    }
    fragment PostFields on Post {
      title
      excerpt
      slug
      date
      featuredImage {
        node {
          sourceUrl
        }
      }
      author {
        node {
          ...AuthorFields
        }
      }
      categories {
        edges {
          node {
            name
          }
        }
      }
      tags {
        edges {
          node {
            name
          }
        }
      }
    }
    query PostBySlug($slug: ID!) {
      post(id: $slug, idType: SLUG) {
        ...PostFields
        content
      }
    }
  `,
    {
      variables: {
        slug,
      },
    }
  );

  return data?.post;
}

// src/features/post/components/PostList.tsx
import { PostType } from "@/features/post/types";
import React from "react";
import PublishDate from "./PublishDate";
import Thumbnail from "./Thumbnail";
import Title from "./Title";

type Props = {
  posts: PostType[];
};

const PostList: React.FC<Props> = ({ posts }) => {
  return (
    <div className="grid gap-10">
      {posts.map((post) => (
        <div key={post.slug} className="group">
          <div className="relative">
            <Thumbnail
              imageUrl={post.featuredImage?.node.sourceUrl}
              alt={post.title}
            />
          </div>
          <div className="mt-4 text-gray-500">
            <PublishDate date={post.date} />
          </div>
          <Title title={post.title} slug={post.slug} />
          <p className="mt-2 line-clamp-3 text-gray-500">{post.excerpt}</p>
        </div>
      ))}
    </div>
  );
};

export default PostList;

// src/features/post/components/Thumbnail.tsx
import Image from "next/image";
import React from "react";

type Props = {
  imageUrl: string;
  alt: string;
};

const Thumbnail: React.FC<Props> = ({ imageUrl, alt }) => {
  return (
    <Image
      src={imageUrl}
      alt={alt}
      width={500}
      height={300}
      className="rounded-md transition-transform group-hover:scale-105"
    />
  );
};

export default Thumbnail;

// src/features/post/components/Title.tsx
import Link from "next/link";
import React from "react";

type Props = {
  title: string;
  slug: string;
};

const Title: React.FC<Props> = ({ title, slug }) => {
  return (
    <Link href={`/news/${slug}`} className="group-hover:underline">
      <h3 className="font-semibold text-gray-800">{title}</h3>
    </Link>
  );
};

export default Title;

// src/features/post/components/PublishDate.tsx
import { formatDate } from "@/lib/formatDate";
import React from "react";

type Props = {
  date: string;
};

const PublishDate: React.FC<Props> = ({ date }) => {
  return <time dateTime={date}>{formatDate(date)}</time>;
};

export default PublishDate;

// src/features/post/components/Content.tsx
import React from "react";

type Props = {
  content: string;
};

const Content: React.FC<Props> = ({ content }) => {
  return <div dangerouslySetInnerHTML={{ __html: content }} />;
};

export default Content;

// app/page.tsx
import { getRecentPosts } from "@/features/post/api/getRecentPosts";
import PostList from "@/features/post/components/PostList";
import { PostEdge, PostType } from "@/features/post/types";

const HomePage = async () => {
  const postsData = await getRecentPosts(5, null);
  const posts: PostType[] = postsData.edges.map((edge: PostEdge) => edge.node);

  return (
    <div>
      <h2 className="text-2xl font-bold mb-4">新着記事</h2>
      <PostList posts={posts} />
    </div>
  );
};

export default HomePage;

// app/news/[slug]/page.tsx
import { getPostBySlug } from "@/features/post/api/getPostBySlug";
import Content from "@/features/post/components/Content";
import PublishDate from "@/features/post/components/PublishDate";
import Thumbnail from "@/features/post/components/Thumbnail";
import Title from "@/features/post/components/Title";

type Props = {
  params: { slug: string };
};

const PostPage = async ({ params }: Props) => {
  const post = await getPostBySlug(params.slug);

  return (
    <div>
      <Thumbnail
        imageUrl={post.featuredImage.node.sourceUrl}
        alt={post.title}
      />
      <Title title={post.title} slug={post.slug} />
      <PublishDate date={post.date} />
      <Content content={post.content} />
    </div>
  );
};

export default PostPage;

// app/news/page.tsx
import { getRecentPosts } from "@/features/post/api/getRecentPosts";
import PostList from "@/features/post/components/PostList";
import { PostEdge, PostType } from "@/features/post/types";

const NewsPage = async () => {
  const postsData = await getRecentPosts(10, null);
  const posts: PostType[] = postsData.edges.map((edge: PostEdge) => edge.node);

  return (
    <div>
      <h2 className="text-2xl font-bold mb-4">記事一覧</h2>
      <PostList posts={posts} />
    </div>
  );
};

export default NewsPage;

**before**
    query RecentPosts($limit: Int!, $offset: Int!) {
      posts(first: $limit, skip: $offset, where: { orderby: { field: DATE, order: DESC } }) {
**after**
query RecentPosts($first: Int!, $after: String) {
  posts(first: $first, after: $after, where: {orderby: {field: DATE, order: DESC}}) {

    fragment AuthorFields on User {
      name
      firstName
      lastName
      avatar {
        url
      }
    }
    fragment PostFields on Post {
      title
      excerpt
      slug
      date
      featuredImage {
        node {
          sourceUrl
        }
      }
      author {
        node {
          ...AuthorFields
        }
      }
      categories {
        edges {
          node {
            name
          }
        }
      }
      tags {
        edges {
          node {
            name
          }
        }
      }
    }
    query PostBySlug($slug: ID!) {
      post(id: $slug, idType: SLUG) {
        ...PostFields
        content
      }
    }

{
  "slug": "example-post"
}

// src/app/news/[slug]/page.tsx
import { getAllPostSlugs } from "@/features/post/api/getAllPostSlugs";
import { getPostBySlug } from "@/features/post/api/getPostBySlug";
import Content from "@/features/post/components/Content";
import PublishDate from "@/features/post/components/PublishDate";
import Thumbnail from "@/features/post/components/Thumbnail";
import Title from "@/features/post/components/Title";

type Props = {
  params: { slug: string };
};

const PostPage = async ({ params }: Props) => {
  const post = await getPostBySlug(params.slug);

  return (
    <div>
      {post.featuredImage && (
        <Thumbnail
          imageUrl={post.featuredImage.node.sourceUrl}
          alt={post.title}
        />
      )}
      <Title title={post.title} slug={post.slug} />
      <PublishDate date={post.date} />
      <Content content={post.content} />
    </div>
  );
};

export default PostPage;

export async function generateStaticParams() {
  const slugs = await getAllPostSlugs();

  return slugs.map(({ slug }) => ({
    slug,
  }));
}

import { fetchAPI } from "@/lib/api";

export type PostSlug = {
  slug: string;
};

export async function getAllPostSlugs(): Promise<PostSlug[]> {
  const data = await fetchAPI(`
    {
      posts(first: 10000) {
        edges {
          node {
            slug
          }
        }
      }
    }
  `);

  return data?.posts.edges.map(({ node }: { node: PostSlug }) => ({
    slug: node.slug,
  }));
}

// src/features/post/api/getRecentPosts.ts
import { fetchAPI } from "@/lib/api";
import { PostsData } from "../types";

export async function getRecentPosts(
  first: number,
  after: string | null
): Promise<PostsData> {
  const data = await fetchAPI(
    `
    query RecentPosts($first: Int!, $after: String) {
      posts(first: $first, after: $after) {
        edges {
          node {
            title
            excerpt
            slug
            date
            featuredImage {
              node {
                sourceUrl
              }
            }
            author {
              node {
                name
              }
            }
          }
        }
        pageInfo {
          hasNextPage
          endCursor
        }
      }
    }
  `,
    {
      variables: {
        first,
        after,
      },
    }
  );

  return data?.posts;
}

// app/news/page.tsx
import { getRecentPosts } from "@/features/post/api/getRecentPosts";
import PostList from "@/features/post/components/PostList";
import { Post, PostEdge } from "@/features/post/types";
import { Button } from "@/components/ui/button";
import { useState } from "react";

const NewsPage = async () => {
  const [posts, setPosts] = useState<Post[]>([]);
  const [after, setAfter] = useState<string | null>(null);
  const [hasNextPage, setHasNextPage] = useState(true);

  const loadMore = async () => {
    const postsData = await getRecentPosts(10, after);
    setPosts([...posts, ...postsData.edges.map((edge: PostEdge) => edge.node)]);
    setAfter(postsData.pageInfo.endCursor);
    setHasNextPage(postsData.pageInfo.hasNextPage);
  };

  if (posts.length === 0) {
    const initialPostsData = await getRecentPosts(10, null);
    setPosts(initialPostsData.edges.map((edge: PostEdge) => edge.node));
    setAfter(initialPostsData.pageInfo.endCursor);
    setHasNextPage(initialPostsData.pageInfo.hasNextPage);
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <h2 className="text-2xl font-bold mb-4">記事一覧</h2>
      <PostList posts={posts} />
      {hasNextPage && (
        <div className="mt-8 flex justify-center">
          <Button onClick={loadMore}>もっと見る</Button>
        </div>
      )}
    </div>
  );
};

export default NewsPage;

// app/news/page.tsx
'use client';

import { useEffect, useState } from 'react';
import { getRecentPosts } from '@/features/post/api/getRecentPosts';
import PostList from '@/features/post/components/PostList';
import { Post, PostEdge } from '@/features/post/types';
import { Button } from '@/components/ui/button';

const NewsPage = () => {
  const [posts, setPosts] = useState<Post[]>([]);
  const [after, setAfter] = useState<string | null>(null);
  const [hasNextPage, setHasNextPage] = useState(true);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchInitialPosts = async () => {
      try {
        setIsLoading(true);
        const initialPostsData = await getRecentPosts(10, null);
        setPosts(initialPostsData.edges.map((edge: PostEdge) => edge.node));
        setAfter(initialPostsData.pageInfo.endCursor);
        setHasNextPage(initialPostsData.pageInfo.hasNextPage);
      } catch (error) {
        setError('Failed to fetch posts.');
      } finally {
        setIsLoading(false);
      }
    };

    fetchInitialPosts();
  }, []);

  const loadMore = async () => {
    try {
      setIsLoading(true);
      const postsData = await getRecentPosts(10, after);
      setPosts([...posts, ...postsData.edges.map((edge: PostEdge) => edge.node)]);
      setAfter(postsData.pageInfo.endCursor);
      setHasNextPage(postsData.pageInfo.hasNextPage);
    } catch (error) {
      setError('Failed to fetch more posts.');
    } finally {
      setIsLoading(false);
    }
  };

  if (error) {
    return <div className="text-red-500">{error}</div>;
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <h2 className="text-2xl font-bold mb-4">記事一覧</h2>
      {isLoading ? (
        <div>Loading...</div>
      ) : (
        <>
          <PostList posts={posts} />
          {hasNextPage && (
            <div className="mt-8 flex justify-center">
              <Button onClick={loadMore} disabled={isLoading}>
                {isLoading ? 'Loading...' : 'もっと見る'}
              </Button>
            </div>
          )}
        </>
      )}
    </div>
  );
};

export default NewsPage;

import { fetchAPI } from "@/lib/api";
import { PostsData } from "@/features/post/types";

export async function getRecentPosts(
  first: number,
  after: string | null = null
): Promise<PostsData> {
  const query = `
    query GetRecentPosts($first: Int!, $after: String) {
      posts(first: $first, after: $after) {
        edges {
          node {
            title
            excerpt
            slug
            date
            content
            featuredImage {
              node {
                sourceUrl
              }
            }
            author {
              node {
                name
              }
            }
          }
        }
        pageInfo {
          hasNextPage
          endCursor
        }
      }
    }
  `;

  const variables = { first, after };

  const data = await fetchAPI(query, variables);

  return data.posts;
}

// app/news/page.tsx
import { Suspense } from "react";
import { getRecentPosts } from "@/features/post/api/getRecentPosts";
import NewsPageContent from "@/features/post/components/NewsPageContent";
import Loading from "@/app/loading";

export default async function NewsPage() {
  const initialPostsData = await getRecentPosts(10, null);
  const initialPosts = initialPostsData.edges.map((edge) => edge.node);
  const pageInfo = initialPostsData.pageInfo;

  return (
    <div className="container mx-auto px-4 py-8">
      <h2 className="text-2xl font-bold mb-4">記事一覧</h2>
      <Suspense fallback={<Loading />}>
        <NewsPageContent initialPosts={initialPosts} initialPageInfo={pageInfo} />
      </Suspense>
    </div>
  );
}

"use client";

import { Button } from "@/components/ui/button";
import PostList from "@/features/post/components/PostList";
import { Post, PostEdge, PostsData } from "@/features/post/types";
import { useEffect, useState } from "react";
import { getRecentPosts } from "@/features/post/api/getRecentPosts";

interface NewsPageContentProps {
  initialPosts: Post[];
  initialPageInfo: {
    hasNextPage: boolean;
    endCursor: string;
  };
}

const NewsPageContent = ({ initialPosts, initialPageInfo }: NewsPageContentProps) => {
  const [posts, setPosts] = useState<Post[]>(initialPosts);
  const [after, setAfter] = useState<string | null>(initialPageInfo.endCursor);
  const [hasNextPage, setHasNextPage] = useState(initialPageInfo.hasNextPage);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const loadMore = async () => {
    try {
      setIsLoading(true);
      const postsData: PostsData = await getRecentPosts(10, after);
      setPosts([
        ...posts,
        ...postsData.edges.map((edge: PostEdge) => edge.node),
      ]);
      setAfter(postsData.pageInfo.endCursor);
      setHasNextPage(postsData.pageInfo.hasNextPage);
    } catch (error) {
      setError("Failed to fetch more posts.");
    } finally {
      setIsLoading(false);
    }
  };

  if (error) {
    return <div className="text-red-500">{error}</div>;
  }

  return (
    <>
      <PostList posts={posts} />
      {hasNextPage && (
        <div className="mt-8 flex justify-center">
          <Button onClick={loadMore} disabled={isLoading}>
            {isLoading ? "Loading..." : "もっと見る"}
          </Button>
        </div>
      )}
    </>
  );
};

export default NewsPageContent;

// app/loading.tsx
export default function Loading() {
  return <div>Loading...</div>;
}

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['your-wordpress-domain.com'], // WordPressの画像ドメインを指定
  },
};

module.exports = nextConfig;