このブログを含む「KiSAKU Portfolio」を、静的なHTMLサイトから ヘッドレスWordPress + Next.js という構成に作り直しました。せっかくなので、企画から実装、デザイン調整までの流れを何回かに分けて記事にしていこうと思います。今回はその1回目、「なぜこの構成にしたか」という設計の話です。
もとのサイトの課題
もとのサイトは素のHTML/CSS/JSで書かれた静的サイトでした。表示は軽快でしたが、実績を1件追加するにもHTMLを直接編集してデプロイし直す必要があり、正直そこそこ面倒でした。文章の言い回しを直したいだけなのに、わざわざエディタでタグを探す…というのを繰り返すうちに、「更新のしやすさ」を持ち込みたくなりました。
加えて、個人的な学習目的も大きな理由でした。普段の実務では見る機会が少ない「ヘッドレスCMS」や「GraphQL」「Next.jsのApp Router」を実際に手を動かして試してみたい、というのが今回のリニューアルの裏テーマです。
なぜ「ヘッドレスWordPress」なのか
更新のしやすさだけなら普通にWordPressのテーマを作ればいい話ですが、あえてヘッドレス(フロントエンドとバックエンドを分離する)構成にしたのは、次の2点が理由です。
ひとつは、管理画面(投稿・カスタムフィールドの入力)にはWordPressの使いやすさをそのまま活かしつつ、表示側は自由に作りたかったこと。もうひとつは、Next.jsのサーバーコンポーネントやApp Routerといった今どきのフロントエンド技術を、実際の題材で試したかったことです。
採用した構成
最終的に、次のような構成に落ち着きました。
- バックエンド: WordPress(Docker上のローカル環境) + ACF(Advanced Custom Fields) + WPGraphQL
- フロントエンド: Next.js(App Router, TypeScript)
- データの受け渡し: GraphQL(WPGraphQLが公開するエンドポイントに、Next.jsのServer Componentから直接問い合わせる)
実績(project)やスキル(skill)は標準の「投稿」とは別のカスタム投稿タイプとして用意し、それぞれ専用のカスタムフィールド(役割・期間・使用技術など)をACFで持たせています。この設計の詳細は次回の記事でまとめます。
このシリーズで書くこと
今回のリニューアル作業を、次の4回に分けて記録していきます。
- (1) 企画・設計編 ← 今回
- (2) WordPress構築編 – Docker環境構築、カスタム投稿タイプとACF、WPGraphQLの設定
- (3) Next.js実装編 – データ取得の実装と、実際にハマった不具合(日本語スラッグが404になる問題)
- (4) デザイン調整・ブログ機能追加編 – もとのサイトの見た目に近づける作業と、このブログ機能の追加
次回はWordPress側の構築、カスタム投稿タイプとACF、WPGraphQLまわりの設定についてまとめます。
この構成を選ぶときに見たのは3点でした。WordPressが置けること、ドメインを同じ管理画面で扱えること、月額が抑えられること。
結果として、ドメインとレンタルサーバーを1社にまとめました。管理画面が1つで済むぶん、契約の更新忘れが起きにくくなります。
ただし「まとめたのに、DNSの設定場所は別だった」という落とし穴があります。詳しくは本番公開でハマった話に書きました。契約前に知っておく価値のある点です。
意味を確認したい言葉があれば、用語集にまとめています。
デプロイ / ヘッドレスCMS / GraphQL / App Router / TypeScript / Server Component / カスタム投稿タイプ / スラッグ
