Next.jsのヘッドレスCMSとしてWordPressを使う方法

ヘッドレスWordPressを理解する

ヘッドレスWordPressとは、WordPressのバックエンド機能（コンテンツの管理と保存）のみを使用し、フロントエンドの表示には別のシステム（Next.jsなど）を使用することを指します。

この開発モデルの利点は、WordPressのパワフルで使いやすいコンテンツ管理ツールを使い続けながら、Next.jsのような最新のフロントエンド技術の利点を享受できることです。（サーバーサイドレンダリングまたは静的サイト生成による）ページロードの高速化、ユーザーエクスペリエンスの向上、より柔軟なカスタマイズが可能です。

Next.js環境のセットアップ

Next.jsは、開発者がウェブアプリケーションを簡単に構築し、パフォーマンスを向上させ、開発体験を最適化することを支援する。Next.jsの主な機能の1つは、ファイルベースのルーティングで、ルートの作成を簡素化します。

Next.jsはパフォーマンス志向も強く、各ページに必要なJavaScriptだけを読み込む自動コード分割などの機能を提供し、ロード時間を大幅に短縮します。Next.jsプロジェクトを作成するには、次のコマンドを実行し、デフォルトのレスポンスを使用します：

npx create-next-app@latest nextjs-wp-demo
npx create-next-app@latest nextjs-wp-demo
npx create-next-app@latest nextjs-wp-demo

プロジェクトについて

Next.js 13が紹介するものアプリケーションルーターこれは、ルーティング用の既存の pages ディレクトリを置き換えるものです。また、App Routerを使ったルーティングでは、appディレクトリにフォルダを作成する必要がある。そして、page.jsファイルを適切なフォルダに入れ子にして、ルートを定義する。このプロジェクトでは、appが対話の中心となるディレクトリで、次のようなファイル構造になっています。

/
|-- アプリ
    |-- ブログ
        |-- /[postId］
        |-- page.js
        |-- page.js
    |-- globals.css
    |-- layout.js
    |-- navbar.js
    |-- ページ.js
/
|-- アプリ
    |-- ブログ
        |-- /[postId］
        |-- page.js
        |-- page.js
    |-- globals.css
    |-- layout.js
    |-- navbar.js
    |-- ページ.js
/
|-- アプリ
    |-- ブログ
        |-- /[postId］
        |-- page.js
        |-- page.js
    |-- globals.css
    |-- layout.js
    |-- navbar.js
    |-- ページ.js

基本的な情報を提供するトップページ、ワードプレスCMSの全記事を掲載するブログページ、ダイナミックページ([postId]/page.js)は、個々の投稿を表示するために使用されます。また navbar.js コンポーネントにインポートされる。 レイアウト.js ファイルでプロジェクトのレイアウトを作成する。

WordPressからNext.jsへのデータ取得

WordPress REST API を使用すると、特定のエンドポイントに HTTP リクエストを送信することで、投稿、ページ、カスタム投稿タイプを取得できます。その際ブログ/ページ.js ファイルで、WordPress CMS内のすべての投稿のフェッチリクエストを行い、最後に渡されたパラメーターに基づいてWordPress CMS内のすべての投稿を動的にフェッチするリクエストを行う。blog/[postId]/page.jsアイドのすべての投稿。

これらのリクエストを行う前に、JSON APIアドレスを環境変数に追加しておくとよいだろう。この方法によって、ベースとなるAPI URLの設定が容易になり、複数のファイルに渡ってハードコードされることがなくなります。

 Next.jsプロジェクトのルートディレクトリに.envファイルに以下を追加する：

next_public_wordpress_api_url=https://yoursite.kinsta.cloud/wp-json/wp/v2
next_public_wordpress_api_url=https://yoursite.kinsta.cloud/wp-json/wp/v2
next_public_wordpress_api_url=https://yoursite.kinsta.cloud/wp-json/wp/v2

URLをサイトのJSON APIに置き換えてください。環境まで.gitignore ファイルを Git プロバイダーにプッシュしないようにします。

WordPressからNext.jsにすべての投稿を取得する

WordPressサイトからすべての投稿を取得するには、新しい投稿を ブログ/ページ.js ファイルで getPosts という非同期関数を作成します。この関数は Fetch API を使って WordPress REST API の /posts エンドポイントに GET リクエストを行う。

非同期関数 getPosts() {
    const response = await fetch(
        ${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts`。
    );
    const posts = await response.json()；
    return posts; }.
}
非同期関数 getPosts() {
    const response = await fetch(
        ${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts`。
    );
    const posts = await response.json()；
    return posts; }.
}
非同期関数 getPosts() {
    const response = await fetch(
        ${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts`。
    );
    const posts = await response.json()；
    return posts; }.
}

レスポンスを受信すると、レスポンスをJSON形式に変換し、投稿オブジェクトの配列を作成します。これらの投稿はNext.jsアプリケーションでレンダリングすることができ、WordPressから直接ブログ投稿の動的リストを提供します。

const BlogPage = 非同期() => { { { { {
    const posts = await getPosts()；
    return (
        <div classname="blog-page">
            <h2>すべてのブログ記事</h2>
            <p>すべてのブログ記事は、WP REST APIを介してWordPressから取得されます。</p>
            <div classname="posts">
                {posts.map((post) => {
                    return (
                        <link href="{`/blog/${post.id}`}" classname="post" key="{post.id}">
                            <h3>{post.title.rendered}。</h3>
                            <p
                                dangerouslysetinnerhtml="{{" __html: post.excerpt.rendered }}
></p>
                        </Link>
                    );
                })}
            </div>
        </div>
    );
};
const BlogPage = 非同期() => { { { { {
    const posts = await getPosts()；
    return (
        <div classname="blog-page">
            <h2>すべてのブログ記事</h2>
            <p>すべてのブログ記事は、WP REST APIを介してWordPressから取得されます。</p>
            <div classname="posts">
                {posts.map((post) => {
                    return (
                        <link href="{`/blog/${post.id}`}" classname="post" key="{post.id}">
                            <h3>{post.title.rendered}。</h3>
                            <p
                                dangerouslysetinnerhtml="{{" __html: post.excerpt.rendered }}
></p>
                        </Link>
                    );
                })}
            </div>
        </div>
    );
};
const BlogPage = 非同期() =&gt; { { { { {
    const posts = await getPosts()；
    return (
        <div classname="blog-page">
            <h2>すべてのブログ記事</h2>
            <p>すべてのブログ記事は、WP REST APIを介してWordPressから取得されます。</p>
            <div classname="posts">
                {posts.map((post) =&gt; {
                    return (
                        <link href="{`/blog/${post.id}`}" classname="post" key="{post.id}">
                            <h3>{post.title.rendered}。</h3>
                            <p
                                dangerouslysetinnerhtml="{{" __html: post.excerpt.rendered }}
></p>
                        </Link>
                    );
                })}
            </div>
        </div>
    );
};

Next.jsのページコンポーネントでは、getPostsを非同期に呼び出して投稿を取得します。次に、投稿の配列をマップし、各投稿のタイトルと抜粋をコンポーネントにレンダリングします。

これは投稿を表示するだけでなく、各投稿をリンクにカプセル化し、投稿の詳細ビューにナビゲートします。これは、Next.jsのファイルベースのルーティングを使用することで実現され、投稿IDがURLパスを動的に生成するために使用されます。

WordPressからNext.jsへの動的投稿の取得

上記のコードでは、各投稿は、ユーザーが投稿の詳細ビューにナビゲートするためのリンクでラップされています。個々の投稿ページでは、Next.jsのダイナミックルーティングを使用して、投稿IDに基づいて個々の投稿をクロールして表示するページを作成できます。動的ページ[postID]/page.jsがstater-filesコード内に作成されています。

パラメータとして渡された投稿IDを使用して単一の投稿を取得するgetPostsと同様のgetSinglePost関数を作成します。

非同期関数getSinglePost(postId) { { {.
    const response = await fetch(
        ${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts/${postId}`。
    );
    const post = await response.json()；
    const post = await response.json(); return post; }.
}
非同期関数getSinglePost(postId) { { {.
    const response = await fetch(
        ${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts/${postId}`。
    );
    const post = await response.json()；
    const post = await response.json(); return post; }.
}
非同期関数getSinglePost(postId) { { {.
    const response = await fetch(
        ${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts/${postId}`。
    );
    const post = await response.json()；
    const post = await response.json(); return post; }.
}

Dynamic Pagesコンポーネントでは、URLパラメータから投稿IDを抽出し、このIDでgetSinglePostを呼び出し、投稿コンテンツをレンダリングすることができます。

constページ = async ({ params }) => {
    const post = await getSinglePost(params.postId)；
    // ... 残りのページコード
}; }
constページ = async ({ params }) => {
    const post = await getSinglePost(params.postId)；
    // ... 残りのページコード
}; }
constページ = async ({ params }) => {
    const post = await getSinglePost(params.postId)；
    // ... 残りのページコード
}; }

このページには、取得したデータを入力することができる：

constページ = async ({ params }) => {
    const post = await getSinglePost(params.postId)；
    if (!post) {
        return <div>ロード中...</div>;)
    }
    を返す(
        <div classname="single-blog-page">
            <h2>{post.title.rendered}。</h2>
            <div classname="blog-post">
                <p> dangerouslySetInnerHTML={{ __html: post.content.rendered }}>。</p>
            </div>
        </div>
    );
};
constページ = async ({ params }) => {
    const post = await getSinglePost(params.postId)；
    if (!post) {
        return <div>ロード中...</div>;)
    }
    を返す(
        <div classname="single-blog-page">
            <h2>{post.title.rendered}。</h2>
            <div classname="blog-post">
                <p> dangerouslySetInnerHTML={{ __html: post.content.rendered }}>。</p>
            </div>
        </div>
    );
};
constページ = async ({ params }) =&gt; {
    const post = await getSinglePost(params.postId)；
    if (!post) {
        return <div>ロード中...</div>;)
    }
    を返す(
        <div classname="single-blog-page">
            <h2>{post.title.rendered}。</h2>
            <div classname="blog-post">
                <p> dangerouslySetInnerHTML={{ __html: post.content.rendered }}&gt;。</p>
            </div>
        </div>
    );
};

概要

ヘッドレスWordPressを使って、Next.jsプロジェクトで投稿を動的に取得して表示する方法を学びましょう。このアプローチは、Next.jsアプリケーションにWordPressコンテンツをシームレスに統合し、モダンでダイナミックなウェブ体験を提供します。ヘッドレスCMS APIの可能性は投稿だけにとどまらず、ページ、コメント、メディアなどの取得と管理も可能です。