NotionをヘッドレスCMS化するのに興味があった。
Next.jsベースはいくつかあるものの、中でもテーマのシンプルさが好みだった「nextjs-notion-starter-kit」を選びました。
実装するうえで、手間取った部分をメモしておきまする。
躓いた部分
nextjs-notion-starter-kitのメモ
- 変更するのは「PageID（URL）」と「SNSアカウント」くらい
- インテグレーションよりウェブ公開の方がはやかった
- ダークモードとライトモードで文字色などが変わるので、デザイン決めはけっこう面倒くさい
- SNSアイコン変更
- 困ったら初期設定に戻すのが手っ取り早い
リポジトリをクローンしてローカル起動まではすんなり。
でも、PageID入れても500出るし、インテグレーションは意味ないしで、早々に詰まった。
解決したのは「サイト公開」だった
PageIDを入力してもダメだったし、何がアカンのか小一時間格闘していた。
解決したのはすごく簡単。
Notionページの上にある「共有」から「Web公開」するだけだった。
単純な話、Notionをプライベート表示していると、URLが正規でもグローバル公開はされていない。
もともとブラウザ表示するツールなので、URLが公開されているから、プライベート表示のページIDを入れても公開できないに決まっている。
設定をWeb公開にすれば、該当ページが一般公開されるから、そのURLをもとにnextjs-notiuon-starter-kitがレイアウトを静的ページにして公開を手伝いつつ、Vercel経由でも表示することができた。
SNSアイコンの設定が面倒くさい
デフォルトだと、Twitter・GitHub・Linkdinの3つが表示されている。
ライブラリに他のアイコンもあるし、パラメータを設定するファイルもある。
でもInstagramを表示させようとすると、エラーが出て表示されてないし、自分で用意したアイコンも表示してくれない悲しさが。
これはまぁ、別途でフッターに表示させるコードを入れるとか、記事中にSNSシェアボタンを入れるなどで対応することもできそう。
ただ、面倒さが勝ってほぼデフォルトに落ち着いた。
ダークモードとライトモード
ボタン押すだけで変更することができるけど、カラー設定はそれぞれ別なことに注意。
投稿部分はNotionが出力する形式が基本になるので、CSSで整形することは可能。
カラーにこだわると作業量は2倍になることに注意。
Web公開したのをヘッドレスCMSと呼ぶのかどうか
nextjs-otion-starter-kit自体は、NotionをWeb公開しつつ、デザインをCSSで制御するタイプのもの。
正確にはAPIを使ってないので、ヘッドレスCMSとはまた違う感じだけど、Notionの投稿がすぐ反映されるのは気持ちいいですね。