WordPressをNext.jsとヘッドレスCMSとして統合する方法 – コード例付き

動的なブログウェブサイトを構築する際に、コンテンツの源として、WordPressのようなコンテント管理システム（CMS）からデータを取得することは一般的です。

最近、Next.jsプロジェクトにWordPressを統合する課題に直面しました。WordPress上にホストされているブログを、Next.jsアプリに移行したいと考えていました。

解決策を探求し、WordPressをヘッドレスCMSとして使用することにしました。ゴールは単純で、コンテンツの管理をWordPressの力を利用し、モダンなフロントエンドフレームワークを使用して表示することです。

この記事では、Next JSアプリにWordPressを統合する方法を解説します。

ヘッドレスCMSを使用する理由は何でしょう？

ヘッドレスCMSは、コンテンツ管理（バックエンド）を表示層（フロントエンド）から分離します。これにより、開発者は、コンテンツがどのように配信され、表示されるかについてより自由的に決めることができ、伝統的なテーマやレイアウトに制約を受ける必要はないです。

パフォーマンスとスケール性に優れ、フロントエンドでコンテンツがどのようにレンダリングされるかのコントロールを提供します。この場合、WordPressをコンテンツ管理システムとして使用し、Next.jsを使用してよりモダンでパフォーマントの高い方法でコンテンツを表示します。

Next.jsは何でしょう？

Next.jsにまだ触れたことがない場合、Reactに基づく強力なフレームワークで、最適化された、サーバーサイドレンダリング(SSR)アプリケーションの構築を大幅に簡略化します。

初期にファイルベースのルーティング、APIルート、静的サイト生成(SSG)、インクリメンタルスタティックリgeneratio(ISR)などの機能を提供します。これらすべてが、快速的でSEOに優れたウェブサイトを作成するのに優れた選択肢となります。

WordPressとNext.jsを接続する方法

WordPressをヘッドレスCMSとして使用する場合、Next.jsアプリケーションをWordPressバックエンドに接続する主な方法が2つあります：

WP REST API: WordPressには内蔵のREST APIがあり、これを使用することでWordPressからJSON形式でコンテンツを取得することができます。
WPGraphQL: WordPressはGraphQLを使用したヘッドレスコンテンツ管理をサポートしています（WPGraphQLのようなプラグインを使用）。これにより、ブログ記事など、Reactのようなフロントエンドフレームワークで使用する特定のコンテンツを簡単にクエリーして取得することができます。

REST APIは人気がありますが、より正確なクエリーと柔軟性を提供するWPGraphQLを選びます。GraphQLを使用すると、必要なデータを正確に要求することができ、データ転送量を減らし、パフォーマンスを改善することができます。

WPGraphQLを使用してWordPressとNext.jsを接続する手順

最初に必要とされるのは、WordPressサイトにWPGraphQLプラグインをインストールすることです。このプラグインは、WordPress内のGraphQL API機能を有効にします。他のプラグインのように、WordPressの管理ダッシュボードに移動してプラグインをインストールすることができます。

まず、Pluginsに移動し、Add Newを選択します。そして、WPGraphQLを搜索し、見つけると、プラグインをインストールして有効にします。

プラグインをインストールして有効にした後、GraphQL IDEがWordPressのダッシュボードに表示されます。ここで、フロントエンド開発に必要ないくつかのクエリをテストすることができます。

次に、フロントエンドに移行しましょう。

Next.jsでWPGraphQLからデータを取得する方法

Next.jsプロジェクトでは、GraphQL APIからデータを取得する必要があります。以下は、graphql-requestを使用した簡単な例です。

1. GraphQL APIに対するクエリを簡単に作成するgraphql-requestをインストールします:

npm install graphql-request

2. Next.jsコンポーネント内で、ブログ投稿を取得するGraphQLクエリを作成します:

import BlogHeader from '@/components/blog/BlogHeader';
import BlogNewsletter from '@/components/blog/BlogNewsletter';
import BlogPosts from '@/components/blog/BlogPosts';
import Link from 'next/link';
import React from 'react';

import { request, gql } from "graphql-request";

const query = gql`
{
  posts(first: 10) {
    edges {
      node {
        id
        title
        excerpt
        content
        date
        author {
          node {
            id
            name            
          }
        }
        date
        slug
        featuredImage {
          node {
            sourceUrl
          }
        }
        categories {
          edges {
            node {
              name
            }
          }
        }
      }
    }
  }
}
`

export async function getStaticProps() {
  try {
    const posts: any = await request('https://blog.intercity.ng/graphql', query);

    return {
      props: { posts }
    }
  } catch (error) {
    console.error('Error fetching posts:', error);
    return {
      props: {
        posts: []
      }
    };
  }
}

const Index = ({ posts }: { posts: any }) => {

  return (
    <main className="relative pb-10 pt-10 lg:pt-0 lg:mt-[-3%]">
      <div className='t40-container w-full'>
        <BlogHeader />
        <BlogPosts posts={posts} />
        <BlogNewsletter />
      </div>
    </main>
  )
}

export default Index

上記のコードで、Next.jsアプリはGraphQLを使用して、WordPressのバックエンドからブログ投稿を取得し、フロントエンドに表示します。GraphQLクエリは、投稿のタイトル、著者、コンテンツ、およびアイキャッチ画像などの詳細を取得するために作成されています。

Next.jsのgetStaticPropsを使用して、ビルド時にデータを取得し、コンポーネントにプロパティとして渡します。ブログ投稿は、BlogHeader、BlogPosts、およびBlogNewsletterなどのカスタムコンポーネントを通じてレンダリングされますが、これによりページが動的で効率的になります。

この記事では、WordPressをNext.jsアプリケーションのヘッドレスCMSとして使用する方法を説明します。Next.jsアプリケーションにWordPressをヘッドレスCMSとして正常に統合したら、GraphQL APIからより多くのデータを取得してアプリの機能を強化することができます。

締め括り

WordPressをヘッドレスCMSとして使用し、Next.jsをフロントエンドとして利用することで、WordPressの強力なコンテンツ管理機能を活用しながら、高速でSEOフレンドリーなブログを構築できます。

WPGraphQLを使用することで、必要なデータのみを効率的に取得でき、より制御ができ、サイトのパフォーマンスを改善しました。

これがお役に立てれば幸いです。お役に立てれるよう、コーディングを楽しんでください！