Notion + Next.js でブログを作ろうとしたけどやめた話
普段から様々な用途に Notion を活用しています。
書き心地がとても良く、雑多に何でも書き残すのにとても便利です。
いつものように Notion でメモを取っているとき、こんなアイデアが浮かびました。
Notion をブログのエディターとして運用できれば、快適にブログを継続できるのでは?
そう思ってブログを作り始めましたが、結局やめてしまいました。
この記事では Notion をブログ化するにあたって
- どうやって始めたのか
- 使いやすさはどうか
- なぜやめてしまったのか
これら技術選定の場面で必要になるであろう内容をまとめます。
これから同じようなことを考える人の参考になれば幸いです。
TL; DR;
- 既存のライブラリを利用すれば Notion のデザインをベースにしたブログを簡単に作成可能
- しかし Notion ではできない見せ方にカスタマイズするのは難しい
- ここが一番のネックになり開発を断念
- Notion をヘッドレス CMS に使いたい人へ
- Notion に書いた内容をちょっと整形してから公開したい ⇒
easy-notion-blogかnextjs-notion-starter-kitがおすすめ - Notion の記事をベースに色々カスタマイズしたリッチなブログを作りたい ⇒ Notion 以外を使うべし
- Notion に書いた内容をちょっと整形してから公開したい ⇒
Notion のコンテンツを Next.js で取得・表示するライブラリ
Notion をブログのヘッドレス CMS[1] として利用したい。
そう思ってまずは、既存で同じことができるライブラリが無いか調べました。
何個か見つかった中で、実際に 2 つのライブラリを試してみました。
nextjs-notion-starter-kit
1つ目は nextjs-notion-starter-kit というもので、 notion-react-x という非公式 API を作成した方によるテンプレートです。
リポジトリを fork して Notion の Page ID を設定すればすぐに使うことができる上、予めいい感じのデザインも設定されています。
Demo ページで実際にデザインを確認できますが、めちゃくちゃかっこいいです。
こちらは非公式 API ながらほぼすべてのブロックに対応しているため、かなり使い勝手が良かったです。
また Notion の各ブロック[2]に対して独自のカスタムコンポーネントが設定できるため、かなり自由に拡張が可能です。
難点としては、 notion-react-x の仕様を理解しないと拡張が難しいことです。
例えば、ページを描画する際は API で取得したデータを一度すべて Context に保存して、 root ブロックからすべての子ブロックへの Tree 構造を作成しています。
ここらへんが理解できるまで、カスタマイズにかなり苦戦しました。
次に非公式 API であるため、公式の仕様変更に対応しきれていない部分があることです。
実際に一部機能では、公式 API との併用が勧められています。
また、Notion 上の表示をきれいに加工して再構成する目的で作られているようなので、Notion ではできない表現方法を実装するのにとても苦労しました。
easy-notion-blog
2つ目は easy-notion-blog というテンプレートで、こちらは Notion の公式 API を利用したものです。
こちらもセットアップは簡単で、 README に従えばすぐに始められます。
また日本の方が作っているようで、ドキュメントが日本語に対応しているのもポイント。
拡張性についても、各ブロックに対して独自のコンポーネントが当てられるためかなり自由に拡張できます。
こちらの難点としては、 nextjs-notion-starter-kit よりも対応しているブロックが少ないことや、デフォルトのデザインが洗練されていないことが挙げられます。
デザインについては、自分好みに改造しやすいともとれるので一長一短ですかね。
対応ブロックについては、公式 API で未対応なため仕方ない部分もあります。
ただ、書いているときにこのブロックは使えるのか?といちいち確認が必要なのがやや面倒でした。
そしてこちらも、 Notion をの表現を超えた内容は実現が難しかったです。
Notion のブログ化を試してみて
今回は2つのライブラリを使って見ました。
どちらも簡単に始められ使い勝手もとても良いです。
しかし自分の目的には合わないということで、今回は Notion でブログを作ることは断念しました。
具体的には以下2つの目的を同時に達成できないことが問題でした。
- Notion を使って楽にブログ記事を管理・更新できるようにしたい
- Notion ではできない表現を取り入れて、よりリッチな表現を実現したい
Notion 用の構造データを取得して Notion ではできない表現に変換することが難しいなんて、改めて書いてみると当然ですよね。
こういったことを始める前に思い至らないのは、まだまだ経験不足だなーと痛感します。
結局どうしたのか
現在は Notion を利用することを諦めて、 Contentful + Next.js を利用してブログを作っています。
Contentful はヘッドレス CMS 専用のサービスで、自分のやりたいことが何でもできるのがとても楽しいです。
まだ作り始めたところなのでブログを公開したら、その時の知見を公開します。
ただ Contentful のエディターは Notion と比べるとやや書きずらいのが難点です。
一応 Notion からコピペでほぼ問題なく動作するので、そこをうまく活用できれば。。。
ツールを使うときは目的に合わせて使い分けよう
今回は、Notion + Next.js でブログを作ろうとしたけどやめた話を紹介しました。
やって見る前は最高のアイデアだと思ったのですが、実際には困難なことがたくさんありました。
実際に使って体験することはやっぱり大切ですね。
同じようなことを考えている人の技術選定に役立てば幸いです。
Notion 自体はとても優れたサービスで、紹介したライブラリもとても使いやすかったです。
しかしどんな要求にでも対応できる銀の弾丸ではないので、目的に合わせて正しく使い分けましょう。
それでは。
Discussion