Notionブログは非公式APIに依存しているので、記事を取得する際にエラーになったり不安定な状態が続いていました。
しかし、先日リリースされた公式APIに切り替えることで、安定して記事一覧を取得できるようになります。
このエントリでは、Notionブログで記事の一覧取得を公式APIに切り替える方法を説明します。
Notion APIのAPIリファレンスを見ると、現在対応しているのはデータベース、ページ、ブロック、ユーザーです。
Notionではページ内の全てのコンテンツはブロックで表現されるため、これだけ対応していればNotionブログ全体を公式APIにまるっと置き換えられそうに見えますが、実はそうではありません。
ブロックオブジェクトのページに次のように書かれています。
Only text-like blocks are currently available
At present the API only supports text-like block types which are listed in the reference below. All other block types will continue to appear in the structure, but only contain a type set to "unsupported".
要するに、テキスト（段落）、見出し、リスト、画像、コード、引用などブロックの種類はいろいろあるものの、現時点で対応しているのはテキストっぽいブロック（下記）だけということです。
"paragraph", "heading_1", "heading_2", "heading_3", "bulleted_list_item", "numbered_list_item", "to_do", "toggle", "child_page", and "unsupported".
ブログ記事を書くにあたって画像や引用、コードが使えないのはかなり厳しいです。
そういうわけで、記事（ページ）の一覧取得だけを公式APIに置き換え、記事の詳細（ブロック群）の取得は引き続き非公式APIで取得するという構成でNotionブログをカスタマイズしていきます。
従来の非公式APIを使ったNotionブログでは、ページが最新の100件までしか取得できないという制限がありましたが、公式APIに切り替えることで100件よりも古い記事も見られるようになります。
前準備として、Notion APIのAPIシークレットとデータベースIDを準備します。
まだの方は1つ前の記事を参照してくださいね。
環境変数としてAPIシークレットを NOTION_API_SECRET に、データベースIDを DATABASE_ID にセットしておきます。
export NOTION_API_SECRET=xxxxx
export DATABASE_ID=xxxxx
次にNotion APIをJavaScriptから使うためのSDKを依存パッケージに追加します。
インストールにはNode.js バージョン14以上が必要です。
yarn add @notionhq/client
ここまで来ればあとはゴリゴリとコードを書くだけです。
手前味噌ですが、下記2つの私のPRを参考にして書いてみてください。
- Use official API to get post list #2 - otoyo/notion-blog
- Pass PageId to getPageData #3 - otoyo/notion-blog
2つ目のPRで blog/[slug].tsx の getStaticPaths() メソッドの処理を公式APIに切り替えています。
これは Next.js では事前にビルドしておくために [slug] がどんな値を取り得るかを getStaticPaths() メソッドで教えてあげる必要があるためです。
getStaticPaths() で返した値以外のURLにアクセスした場合の挙動は fallback の指定値によります。
もうひとつヒントとして、Vercel に反映する前に先にローカルで yarn build を実行することをおすすめします。
yarn dev では動いているのに Vercel でのビルドでエラーになることがあるからです。
以上です。
このエントリでは、Notionブログで記事の一覧取得を公式APIに切り替える方法を説明しました。
もしわからないところがあれば、わかる範囲でお答えしますので気軽に私のTwitterアカウントまでご連絡くださいね。
コメントを送る
コメントはブログオーナーのみ閲覧できます