ヘッドレス WordPress で NextJS を使用する

フロントエンドとバックエンドの分離は、Web サイトのパフォーマンスとチームのコラボレーション効率を向上させる開発モデルです。WordPress で，たとえば、React.jsフロントエンドテクノロジー，WordPress REST APIとの組み合わせ，フロントエンドとバックエンドの独立した開発とデータ交換が実現可能。このアプローチにより、Web サイトの柔軟性と拡張性が向上します。，ただし、SEO の最適化やエラー管理などの課題にも注意を払う必要があります。。

従来の Web 開発，フロントエンドとバックエンドのコードは密接に統合されています。これは、インターフェース (HTML)、CSS) とロジック (PHP)、データベース操作) は同じ場所で処理されます。しかし，サイトがより複雑でコンテンツが豊富になるにつれて、このアプローチが行われます，その限界が明らかになった。

フロントエンドとバックエンドの分離Webサイト開発モデルです，ユーザーインターフェイスとデータを階層化します。フロントエンドはプレゼンテーション層のみに焦点を当てます，それはユーザーが操作する部分です，バックエンドがデータを処理する、ロジックとサーバーの操作。2 つは API を通じて通信します，API は、さまざまなソフトウェアアプリケーションが相互に動作できるようにするインターフェイスです。。

WordPress でフロントエンドとバックエンドの分離を実装する必要があるのはなぜですか?

パフォーマンスの向上：フロントエンドアプリの読み込みが速い，必要な場合にのみバックエンドからデータを取得する，ウェブサイトの応答速度とユーザーエクスペリエンスが大幅に向上します。
柔軟性：設計チームと開発チームは独立して作業できます，お互いに干渉しない。これは大規模なプロジェクトやチームに役立ちます，大きな利点です。
スケーラビリティ：フロントエンドとリアエンドが分離しているため、，新しい機能の追加や拡張が容易になります。
マルチプラットフォームのサポート：バックエンドシステムは同時に Web サイトにサービスを提供できます、モバイルアプリケーション、デスクトップアプリでも。

WordPress でフロントエンドとバックエンドを分離するにはどうすればよいですか?

適切なフロントエンドテクノロジーを選択する：フロントエンド開発では、どのテクノロジースタックを採用するかを決定することが重要です。一般的なテクノロジーの選択肢には次のものがあります。React.js、Vue.js 待って。これらは最新の JavaScript フレームワークです，ダイナミックな演出が可能、インタラクティブなユーザーインターフェイス。
利用 WordPress REST API：WordPress は強力な REST API を提供します，開発者に読み取りを許可する、書く、ウェブサイトのデータ（記事など）の修正・削除、ページ、メディアなど）。REST APIを使用する，フロントエンドアプリケーションは、HTTP リクエストを介して WordPress バックエンドからデータを取得または送信できます。。
カスタムエンドポイントの作成：WordPress REST API はすでに多数のエンドポイントを提供していますが、，ただし、より具体的な機能が必要な場合もあります。この場合，カスタムエンドポイントを作成できます，これらのエンドポイントは、アプリケーションロジックに対応する API URL です。。
認証と権限：機密データやユーザーのログインが必要な機能に関しては，認証 (ユーザーが誰であるか) と認可 (ユーザーが何ができるか) を処理する必要があります。。WordPress にはいくつかの認証方法が用意されています，Cookie認証を含む、アプリのパスワードとOAuth。
静的リソース管理：フロントエンドとリアエンドを分離した後，フロントエンドの静的リソース (JavaScript など)、CSS、画像ファイルなど）CDN（コンテンツ配信ネットワーク）を使用して読み込みを高速化できます。
エラー処理とデバッグ：フロントエンドとバックエンドの分離アーキテクチャを使用する，特に API に関しては，効果的なエラー処理とデバッグが非常に重要になる。フロントエンドアプリケーションがバックエンドからのエラーメッセージを適切に処理することを確認してください。，Chrome デベロッパーツールなどのツールを使用してデバッグします。。
SEOの最適化：フロントエンドとバックエンドを分離すると、検索エンジン最適化 (SEO) に影響する可能性があります，検索エンジンは、完全に JavaScript によって生成されたコンテンツを適切にクロールできない可能性があるため。この問題を解決する手法の 1 つは、SSR (サーバーサイドレンダリング) または事前レンダリングされたコンテンツを使用することです。，検索エンジンが Web サイトのコンテンツを読み取れるようにする。

WordPress が超える 13 数十億の Web サイトで使用されている,ヘッドレスCMSとして優れた機能を発揮します。NextJS は React 上に構築されたフレームワークです,驚くほど多くの機能を提供します,それ以外の場合は、これらの機能を自分で設定する必要があります(静的レンダリング、バンドル、プリフェッチなど),超高速で高性能なウェブサイトを提供します。2 つを組み合わせて、超高速のヘッドレス WordPress ウェブサイトを作成しましょう!

前提条件:

NodeJS と React の基本的な理解

既存の WordPress Web サイト,いくつかの投稿とページが含まれています

このチュートリアルでは、Colby Fayock の Next.js WordPress Starter を使用します。 (https://github.com/colbyfayock/next-wordpress-starter/)。この Next.js WordPress スタータープロジェクトの目的は、「WordPress をヘッドレス CMS として使用する,Next.js を使用して、どこにでもデプロイできる静的エクスペリエンスを作成します。。」

Next.js WordPress Starter プロジェクトを使用すると、WordPress Web サイトで通常期待されるすべてのコンテンツを簡単に抽出できます。(役職、ページ、著者一覧、グローバル検索),そしてそれをGraphQLエンドポイント経由でNextJSに取り込みます。このプロジェクトは現在鋭意開発中です,さらなる機能アップデートについてはリポジトリをフォローしてください!

実践入門

ワードプレス

Next.js WordPress Starter 使用 GraphQL,したがって、まず WordPress ウェブサイトにログインし、WPGraphQL をインストールします。。既存の WordPress ウェブサイトをお持ちでない場合,ダミープロジェクトを設定しました,使用できます:https://fake-data.better-wordpress.dev。

Next.js WordPress ランチャー

フロントエンドで NextJS の使用を開始する最も速い方法は、ターミナルを開くことです。,作業を開始するフォルダーに移動します,それから走ります:

yarn create next-app -e https://github.com/colbyfayock/next-wordpress-starter

インストール完了後,コードエディタを開いて配置します.env.localファイルをプロジェクトのルートディレクトリに追加します。ここで環境変数を設定します,NextJS がデータの取得元を認識できるようにするため。

スタータープロジェクトで使用される環境変数は次のとおりです。:WORDPRESS_GRAPHQL_ENDPOINT,だから私は使いますWORDPRESS_GRAPHQL_ENDPOINT="https://fake-data.better-wordpress.dev/graphql"ダミーデータを取得するには。テスト時にこのダミーの WordPress データを使用することもできます。,しかし、ライブの準備ができたら,URL を独自の WordPress エンドポイントに置き換えることを忘れないでください。!

[](https://res.cloudinary.com/practicaldev/image/fetch/s–yTHzS9ou–/c_limit,f_auto,fl_progressive,q_auto,w_880/https:// /dev-to-uploads.s3.amazonaws.com/uploads/articles/x1uabk6infw3yqhlchrx.jpg)

端末に戻ります,走るyarn dev開発サーバーを起動します。今は新しい NextJS サイトのパフォーマンスとバンドルサイズを検討する時期ではありません。(NextJS を初めて試したときに犯した間違い),ただし、常に可能な限り最小のバンドルサイズを公開するようにしてください。。それについては後で話します。

ターミナルで実行yarn dev戻る,これで、ブラウザを開いて、ヘッドレス WordPress サイトが実行されているのを確認できるようになりました。:http://ローカルホスト:3000。

おめでとうございます – これで、完全にヘッドレスの WordPress Web サイトが JAM スタック上で実行されます。,これにはあなたのすべての投稿が含まれます、ページとライブ検索!私の偽データ API を使用している場合,そうすれば、ウェブサイトはこのスクリーンショットのようになります。:

[

で実行されているヘッドレス WordPress インストールのデータスクリーンショット](https://res.cloudinary.com/practicaldev/image/fetch/s–yL18MnTZ–/c_limit,f_auto,fl_progressive,q_auto% 2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/plfscqemyudt0qx2twwr.jpg)

NextJS で実行されているヘッドレス WordPress インストールからのデータのスクリーンショット

現時点では,スタートアッププロジェクトのカスタマイズを開始できます,見た目も機能も思いのままに。終わった後,ウェブサイトを世界中に公開する時期が来ました!

NextJS Web サイトをデプロイする

本番ビルドを実行する前に,ライブ URL を使用して更新しますpackage.json書類(第 3 わかりました)。これはサイトマップに渡される URL です。SEO にとって非常に重要です。。

[のスクリーンショット](https://res.cloudinary.com/practicaldev/image/fetch/s–GL6yBr2m–/c_limit,f_auto,fl_progressive,q_auto,w_880/https:// dev-to-uploads.s3.amazonaws.com/uploads/articles/5fnd6zc8jxfidnzf9nx2.jpg)

ターミナルで実行しますyarn build実際にすべての投稿とページを取得します,サイトマップと静的 Web サイトの最適化された本番バージョンを作成する,サーバーに展開する準備ができました。

走るyarn build戻る,走れるよyarn startローカルサーバーを実行し、ローカルの実稼働バージョンをテストするには。バンドルのサイズとサイトの速度を確認するのに最適な時期です,これは、サイトがサーバー上でどのように応答するかをよく表しているためです。。

vercel.com を使用して better-wordpress.dev をデプロイします。 Vercel は NextJS を構築したチームと同じです,寛大な無料枠がある,したがって、そこにデプロイするのは完全に理にかなっています。

現在ブログ記事を書いています,NextJS を Vercel にデプロイする方法を説明する、Netlify と他のホスト – しかしそれまでの間,Vercel のドキュメントは素晴らしいです:https://nextjs.org/docs/deployment

最後の言葉

これで、JAM スタック上で完全に機能し、非常に高速に動作する Web サイトが完成しました。,フロントエンドには NextJS を使用し、データには WordPress を使用します。

フロントエンドとバックエンドの分離は新しい概念ではありません，しかし、WordPress エコシステムではますます人気が高まっています。比類のない柔軟性と拡張性を提供します，特に高いパフォーマンスとマルチプラットフォームのサポートを必要とする複雑なプロジェクトの場合。しかし，独自の課題ももたらします，SEOの最適化やエラー管理など。したがって，この構造を採用する前に，これらの要素を必ず考慮してください，開発とメンテナンスに追加の時間を投資する準備をしてください。。

ブログ