💡この記事でわかること・解決すること

前はgatsbyjsというフレームワークでブログを維持していましたが、今回はNextjs x notion x Vercelで管理することにしました。notionを使ってるけどブログ化するにはどうしたら良いかを説明します。

Nextjs Notion Starter Kitを使う

いい感じのテンプレートを見つけたのでこちらを使おうと思います。

GitHub - transitive-bullshit/nextjs-notion-starter-kit: Deploy your own Notion-powered website in minutes with Next.js and Vercel.

使い方は結構シンプルです。

vercelにデプロイと自分のブログにしたいNotionのIDをRepositoryのconfigに設定してデプロイすればページ配下のビューも変換してくれます。

技術的な手順は↑のREADMEにしっかり書いてあるのでここでは割愛します！

トップページはこんな感じなのですが、デフォルトで検索機能とダークモード切り替え機能があります。

対してNotionのページはこんな感じ（スマホ版）

おそらくポリシーとしてNotionで表示されてるものをそのまま出すことにこだわりを感じます。

それ以外を少しずつカスタムできそうで良いですね。

項目の設定

ここに表示設定している項目がブログ上でも表示されます。

我が家では n8n を組み合わせて入力を最小限にしています！

例えば、PublicというチェックボックスがTrueにされたら公開日を入れたり、更新後に文字数を数えるロジックを入れたりなんかできます。他にもGA4等にPVを送っている場合、API経由で記事ごとのPV数を取ってランキング形式にできたりします。

問題点

• デフォルトだとView上のフィルター機能が使えない

💡 全部の記事が出てしまうのでここばかりはコード上で public=true でフィルターをするようにしています。

• （現時点だと）Nextjs Imageの画像作成が使えない

• （共通だけど）ある程度DBのプロパティに依存する

• Vercelに依存するので広告を乗せる場合はライセンス的に有料プランにしなければいけない

• ある意味のベンダーロックインになるので、はてなブログとかに移行したくても手間が発生する

注意点

ブログページ自体を公開しないと使えないのでその配下のNotionページに秘匿情報などを置かないようにしたほうが良いです。

API Keyでの公開は全体を検索できるようになってしまうので一部のページをブログ用として公開して使ったほうが良いです。

おわりに

個人的にはNotionラブなので今のところ問題なく使えています。気になったことをNotionに貯めて、スマホで公開等操作できるので無事に継続してブログ書けています。

エンジニアだからテキストくらいGitに貯めてPushしろと言われそうですが、ドキュメント系をGitに貯めるのってなんだか流動性が低くてそのままになる気がします。

唯一の欠点はNotionがなくなっちゃうと使えなくなるのでそこだけ心配しているところです笑

それではよいブログライフを！