Notion Blog が簡単に始められる easy-notion-blog の紹介
初めて Zenn に投稿します。
この記事では、Notion Blog の開設を補助してくれる easy-notion-blog という自作の Next.js 製アプリケーションを紹介したいと思います。
Notion Blog とは？
Notion Blog はいわゆるヘッドレス CMS で、Notion に書いた記事データを API で取得し、別の場所にホストしているブログアプリケーションに表示するシステムです。
ブログ部分は Next.js で書かれ、Next.js と親和性の高い Vercel でホスティングされます。
Notion Blog のシステム構成
Notion Blog と言ったとき、広義にはこれらシステム全体を指し、狭義には Next.js 製のアプリケーション（上図の Notion Blog 部分）を指している場合が多いです。
Notion Blog は、Notion でブログが執筆できること、高速な Next.js の恩恵を受けられること、そして Vercel が高機能な上に趣味用途では無料であることから、一部のブロガーの間で話題となり広まりました。
Notion Blog の課題
Notion Blog と言えば、登場からしばらくは本家とも言うべき下記リポジトリのことを指していました。
ヘッドレス CMS ではデータを取得するための Web API が生命線となりますが、Notion Blog が登場した頃はまだ Notion から API は提供されていませんでした。
ではどうやって Notion からデータを取得していたかと言うと、Web 版 Notion が使っている API を、ブラウザの開発者ツールでトークンを取得して使っていたのです。
そういう経緯から、本家では自己責任で使用するようにとの記載があります。
時は流れ2021年5月、Notion API のベータ版提供が始まりました。一方、非公開 API は仕様が変更され、本家 Notion Blog は安定して動かすことが難しくなってしまいました。
Notion Blog はデータ取得部分を公式 API に切り替える必要に迫られていました。
easy-notion-blog について
しかしながら、本家は公式 API に対応しませんでした。すると、公式 API に対応した Notion Blog を自作し始める熱狂的な Notion ブロガー達が現れました。
何を隠そう、私もその1人です。
easy-notion-blog は、私の Notion Blog から一般的な機能を抽出し、簡単な操作で素早く Notion Blog を開始できることを意識して作っています。
「Notion Blog はどこから手をつけていいかわからない」という人にこそ easy-notion-blog を使ってほしいと思っています。下記のスクリーンショットをご覧ください。
下記のブログが easy-notion-blog を使えば15分ほどでできてしまいます。
easy-notion-blog で作った Notion Blog
easy-notion-blog の使い方は私のブログ記事やリポジトリのREADMEでも紹介しています。READMEの日本語バージョンもあります。
easy-notion-blog では導入時に必要なプロパティを自動的に生成します。プロパティとは、タグや公開ステータス、概要といった記事ごとのメタ情報です。
プロパティを増やしたくなったら、既存のプロパティを参考にできるのでカスタマイズも簡単です。
さらにカスタマイズしたくなったら、私のブログの Notion Blog カテゴリで様々なカスタマイズ方法を解説していますのでぜひ参考にしてください。
例えば Google Analytics の導入方法や RSS の配信方法などを紹介しています。
easy-notion-blog で技術的に工夫した点
せっかく Zenn に投稿するので easy-notion-blog で技術的に工夫した点についても書いておきたいと思います。
Notion Blog はデータ取得のために Notion API を使用しますが、Notion API には他の多くの Web API と同様にリクエスト制限があります。
Next.js はビルド時にページを静的生成します。（実装方法にもよりますが）例えばブログ記事がたくさんあるなど、生成するページが多ければ多いほど API リクエストは多くなります。
API リクエストが多くなると、ビルド時にリクエスト制限に引っかかってしまう可能性が出てきます。そこで、easy-notion-blog ではリクエスト制限を回避するために、ビルド時に最初に一度だけ全ての記事の情報を取得し、ローカルファイルにキャッシュする方法を採っています。
仕組みとしては単純で、package.json で独自に build コマンドを定義し、ビルドを「キャッシュ生成→ next build →キャッシュ破棄」という動作に置き換えています。
"build": "node scripts/set-blog-index-cache.js && next build && node scripts/expire-blog-index-cache.js",
API クライアントは、キャッシュが存在する場合のみ（つまりビルド時のみ）キャッシュを参照するようになっています。
export async function getAllPosts() {
let results = []
if (blogIndexCache.exists()) {
results = blogIndexCache.get()
console.log('Found cached posts.')
} else {
簡単な仕組みではありますが、API レスポンスをビルド時のみキャッシュすることでリクエスト制限を回避することができました。
まとめ
この記事では Notion Blog の歴史と課題を簡単に説明し、Notion Blog の開設をサポートする自作のツール easy-notion-blog を紹介しました。
この記事をきっかけに Notion Blog を始める方や、easy-notion-blog を使ってくれる方が出てきてくれることを切に願っています。そういう方はぜひ私まで教えてください！
最後まで読んでくださりありがとうございました。
Discussion