【Vercel】Next.js&Vercel でヘッドレスWordPress環境を構築する(Part1)
Next.jsとVercelを使用してヘッドレスWordPress環境を構築します。
ヘッドレスCMS(Content Management System)とは?
ヘッドレスCMS(Content Management System)は、コンテンツの作成、編集、管理、配信を行うためのCMSの一種ですが、通常のCMSとは異なるアーキテクチャを持っています。
ヘッドレスCMSは、フロントエンドとバックエンドを切り離した構造を持ち、コンテンツの提供と表示を行うフロントエンドアプリケーションと、コンテンツの作成と管理を行うバックエンドシステムを分離しています。
ヘッドレスWordPressとは?
ヘッドレスWordPress(Headless WordPress)は、WordPressのコンテンツ管理機能を活用しつつ、フロントエンド(ユーザーが見る部分)とバックエンド(データ管理やコンテンツ作成の部分)を別々に構築するアプローチです。
通常のWordPressサイトでは、WordPress自体がコンテンツ管理とフロントエンドの双方を提供しますが、ヘッドレスWordPressでは、コンテンツ管理の部分だけを活用して、フロントエンドを別の技術やプラットフォームで構築することができます。
具体的には、ヘッドレスWordPressでは、WordPressのバックエンドにコンテンツを作成・編集し、データベースに保存しますが、フロントエンドの部分は別の技術スタック(たとえば、React、Angular、Vue.jsなどのJavaScriptフレームワークや、静的サイトジェネレーター)を使用して構築されます。
これにより、コンテンツの管理と表示のために最適なツールや技術を選択できる利点があります。
WordPressのインストール
まずは、WordPressのインストールをします。
WordPressを通常通りインストールしてセットアップします。これにより、コンテンツを管理するためのバックエンドが用意されます。
REST APIを有効化する
REST APIの有効化をします。WordPressのダッシュボードにログインし、「設定」→「パーマリンク設定」に移動します。
パーマリンク設定を「投稿名」「投稿ID」などの他のオプションに変更し、変更を保存します。これにより、REST APIエンドポイントが有効になります。
WPGraphQL プラグインをインストール
WPGraphQL プラグインをインストールします。
WPGraphQLプラグインとは?
WPGraphQL は、あらゆる WordPress サイトに拡張可能な GraphQL スキーマと API を提供する、無料のオープンソース WordPress プラグインです。