こんにちは。
Next.jsおよびmicroCMSの学習の一環として、Next.js × microCMS構成のブログサイトを作成しました。
※現在は仮の記事が入っています。今後実運用の際に正式な記事を作成する予定です。
当記事ではこのサイトを構築する上で工夫した点、得た学びなどを記載します。
※参考：以前に私が作成したブログアプリの記事
技術スタック
| カテゴリ | ツール名 |
|---|---|
| 使用言語 | TypeScript |
| UIライブラリ | React |
| JSフレームワーク | Next.js |
| CSSフレームワーク | Tailwind CSS |
| UIコンポーネント | Radix UI |
| デプロイツール | Vercel |
| CMS | microCMS |
今回の実装ポイント
以前開発したブログアプリと比較して、今回のブログサイトでは以下の機能を追加しました。
カテゴリ別ページ
よくあるブログサイトにはカテゴリ別ページが存在します。
今回の開発ではカテゴリ別ページを作成し、実運用されているページに近い形式としました。
記事数が表示されるカテゴリ別一覧
記事数が表示されるカテゴリ別一覧の導線を作成し、属しているカテゴリの記事数も明確にしました。
どのように実装したかについては下記の記事も参照ください。
記事のリアルタイム反映
microCMSで作成した記事はできるだけタイムラグなくブログに反映させたかったため、WebhookとrevalidateTagを活用することで記事をデプロイなしでブログに反映させる仕組みを作成しました。
今回の開発で感じた気づき
最低限のサイト(ブログ)の機能作成は簡単でも、UIの利便性を上げようとすると実装難易度が上がる
前回のブログアプリと異なり、今回は実際に公開されているCMSに近い形のブログサイトを作成しています。
「APIを通した記事の表示」という最低限の機能は確かにmicroCMSで比較的楽に実装できましたが、他のCMSと同じ機能をNext.jsで実装するのは相応にハードルが高く感じられました。
例えばMovable Typeではカテゴリの記事数を表示するのは専用のタグの組み合わせで実装できる反面、今回の構成のブログではAPIの取得やmap関数を組み合わせる必要がありました。
こういった車輪の再発明を防止するために各種CMSが存在することを実感しました。
CMSサイト作成から学べる視点は多く存在した
一方で従来型CMSに近いサイトをNext.jsを用いて作ってみることで多くの気づきがあったのもまた事実です。
具体的には
- Next.jsの基本となるルーティング
- 入力されるHTMLのサニタイズ
- Webhookによるコンテンツのリアルタイム反映
- どうすればUXが向上するUIとなるかを考えること
- UIパーツごとのコンポーネント分割の考え方
- 複数APIの活用・APIを通したデータ取得
などです。
これらを学べるブログサイトは学習教材としてかなり有用に感じました。
ヘッドレスCMSに感じた長所と短所
※あくまでmicroCMS × Next.jsブログを作成した感想、および普段従来型CMSの構築を行っている目線での感想です。
microCMSでサイトを作ってみて、
ヘッドレスCMSがコンテンツ管理に集中しフロントエンドが分離されていることは、長所も短所もあるように感じました。
まず短所から。
従来型CMSは最低限テーマがあればブログとしての機能は成立する一方、ヘッドレスCMSはある程度のフロントエンドの構築が前提となる点が、1人のネットユーザーとしては敷居が高く感じられました。
一方で長所。
ヘッドレスCMSがフロントエンドと分離されていることで、Next.js等で作成した他のプロジェクトに組み込みやすい点は長所に感じられました。
SSR・CSR・SSGを使い分けられるNext.jsと相性がいいことは今回の開発で改めて実感しました。
また、フロントエンドが分離されている＝構築の敷居が高いことは、裏を返すと不慣れな管理者が誤ってサイトを壊すリスクも減っているように感じました。
実際の従来型CMSではユーザー権限によってある程度対策されているとはいえ、フロントエンドが分離されていればテンプレートが壊れるリスクはかなり減るためです。
最後に
ここまで読んでくださりありがとうございます。
CMSは普段触っている領域だからこそ、別の言語やフレームワークを用いたことで新たな気づきを得られました。
今後も開発を頑張っていきたいです。
参考資料