📚

Next.js + headlessCMSでブログを作るのに実装しておきたい5要素まとめ

2023/03/31に公開

headlessCMSでブログを作るにあたって実装しておきたい5要素の情報をまとめる

前提

Newtのチュートリアルを参照 → NewtとNext.jsを利用してブログを作成する
- 基本的にチュートリアル通りでOK
- タグはモデルTagの配列になるのでArticleのJSONプレビューとは異なる返却になる点については注意
- Vercelとの繋ぎもこの記事からリンクがあるのでVercelにのせる場合はそのまま進めばOK
弊ブログのモデル設定↓

設定値	詳細
アイコン	記事のアイコン。Newtの絵文字フィールドを利用
タイトル	記事のタイトル
スラッグ	記事のID的なもの
概要	記事の概要。記事一覧の他、RSSのdescriptionにも利用
本文	本文。Markdownフィールド
タグ	タグ。slugとnameで構成されている別のモデル。タグ中身以外はチュートリアルそのまま。
公開日	公開日。Newtデフォルトで作成日はあるが、『公開した日付』を載せたかったので公開日。手動設定している

こちらを参考にした → Next.jsで作ってるブログでRSSフィードを出力する - deg84's blog
titleやcopyright、authorなど画面の他の場所でも出ていそうな設定値が多いのでこの機に固定値を共通化しておくと良さそう
- 弊コードはだいぶガッツリ共通化した

これもNewtのチュートリアルにある → VercelのOG Image Generationを利用して、動的にOG画像を作成する
弊ブログはこんな感じのOGP↓
- 背景（文字以外の部分）はFigmaで作成
OGPついでにmetaタグ整備すると良いかも
- 弊コードはdefaultLayout.tsxというpageのwrapperコンポーネントを作ってそこでmetaタグをセットしている
弊ブログのOGPのコードはこちら
- 基本的にはNewtチュートリアルの設定と同じ感じにしている

storybookの導入はこちらを参照 → 【CSF3.0対応】Next.js + CSS Modules（Sass）にStorybookを導入し、諸々のセットアップを済まそう
- css.modulesをscssにしてると多少面倒が発生するが、そのくらい
次はこちらを参照にヴィジュアルリグレッションテスト（VRT）を導入する → Storyshots を使わずに Playwright で Storybook の VRT をする
- CICDにはせず、必要な時に手動発火にした

他にもあった方が良い要素はありそうですが個人的にはここまでくれば満足ライン
markuplintは今回が初利用。コードがシンプルなのもあってあまりエラーは出なかったが、『HTMLが苦手』というエンジニアも多いので、そういうったチームメイトのためにも入れておくのがよさそうに思う（lintは通ってるという安心感が得られるので）
VRTも今回が初導入。汎用で利用されている可能性のあるcomponentの層に対し、『今回の変更が既存に影響を与えていないか？』はかなり不安になる要素なので、それを払拭できる方法を見つけられたのは良かった
- 今回CICDを組んでいないのは『個人開発かつmaster直push』のため。チーム開発であればPRを利用すると思うので、PRを開いたタイミングでCICDが発火するようにしておくのが良いと考える。
- しかしながら、完全新規の場合はリグレッションを検査する必要がないので、PRのタグによって発火など何かしら分岐でるようにしておくと良いかもしれない
というわけで、あとはコンテンツを更新し続けるだけである。これが1番難しい。
- では皆さんも良いブログライフを！