当サイトについて
このサイトは@twosunが個人開発したサービスをまとめたポートフォリオサイトです。
Next.jsとHeadless WPを利用しSSG（Static Site Generate）にて作成されています。
公式リポジトリを参考にしながら自作しました。
公式リポジトリ：https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress
なぜ、Next.js&Headless WPなのか？
JAMStackの仕組みやNext.jsの存在は以前から知っていましたが、使う機会がイメージできてなかったのでノータッチでした。
しかし、Headless CMSとの相性がいいとのことなので、それなら使う機会があるかもしれないと思いこのサイトを「Next.js&Headless WP」で作ってみました。
CMSにWordPressを選んだ理由は単純に使い慣れているからです。（ヘッドレスCMSだとMicro CMSやContentfulなどが有名）
また、今回得た知見はクライアントワークをする上での新たな提案材料になるかもしれないと感じたのも理由の一つです。
ちなみにサーバーはXserver（Node.js使用せず）です。
クライアントワークで使えるか？
クライアントワークする上で提案すべき組み合わせかまだ結論が出ていない状態です。
サーバーによってはNode.jsが使用できないため、Next.jsでできることも変わってくると感じたためです。
本サイトを作った際に私が感じたメリット・デメリットを記載しておきます。
今回SSGモードしか試していませんのでその前提でお読みください。
■メリット
- pre-renderingの仕組みのため読み込み速度やページ遷移が爆速になる。
- 最終的にHTMLファイルの状態でサーバーに設置するので安全。
- WP側は管理画面さえあればいいので独自テーマの作成が楽になる。
- CSS Moduleが使えるのでクラス名などで悩む時間が減る（BEMとか使わず済む）。
■デメリット
・WP側の投稿以外のどのデータ（サイト名や固定ページ、カテゴリーなど）を取得するかを事前に決め、それに合わせてNext.jsを構築する必要がある。
・GraphQLについての知識が多少必要（WPは通常RESTなので慣れてない）
・ページネーションなどの設置が一手間かかる。
・VerselやAWSなどのサーバーでないとプレビュー機能が実装できない（個人的にこれはきついと思いました）
・SSRやISR、next/imageを使うにはNode.jsを動かせるサーバーが必要。
・WP側で記事の更新があったらGithub Actionsなどでビルド→アップロードするWorkflowを組む必要がある。
・Github Actionsが完了するまで本番に反映されない（私の環境だと反映まで1分半ぐらい時差があります）。
・ユーザーの環境で古いキャッシュが残っていると表示も古いままになってしまう。
デメリットの数が多いのでNext.jsいらなくない？など感じるかもしれません。
ですが「サーバーでNode.jsが使えるならSSRやISRが使えるから便利！」など環境によってメリット・デメリットは変わってきます。
一蹴に「Next.js不要」は結論づけるのはやめましょう。
あくまで上記はSSGを試した上での私の主観だと思ってください。