アルパカログ

📅  2021-05-24

Notionブログで記事の一覧取得を公式APIに切り替える


Notionブログは非公式APIに依存しているので、記事を取得する際にエラーになったり不安定な状態が続いていました。

しかし、先日リリースされた公式APIに切り替えることで、安定して記事一覧を取得できるようになります。

このエントリでは、Notionブログで記事の一覧取得を公式APIに切り替える方法を説明します。

Notion APIについて(ver. 2021-05-13)

Notion APIのAPIリファレンスを見ると、現在対応しているのはデータベース、ページ、ブロック、ユーザーです。

Notionではページ内の全てのコンテンツはブロックで表現されるため、これだけ対応していればNotionブログ全体を公式APIにまるっと置き換えられそうに見えますが、実はそうではありません。

ブロックオブジェクトのページに次のように書かれています。

要するに、テキスト(段落)、見出し、リスト、画像、コード、引用などブロックの種類はいろいろあるものの、現時点で対応しているのはテキストっぽいブロック(下記)だけということです。

ブログ記事を書くにあたって画像や引用、コードが使えないのはかなり厳しいです。

そういうわけで、記事(ページ)の一覧取得だけを公式APIに置き換え、記事の詳細(ブロック群)の取得は引き続き非公式APIで取得するという構成でNotionブログをカスタマイズしていきます。

従来の非公式APIを使ったNotionブログでは、ページが最新の100件までしか取得できないという制限がありましたが、公式APIに切り替えることで100件よりも古い記事も見られるようになります。

公式APIのためのクライアントを実装する

前準備として、Notion APIのAPIシークレットとデータベースIDを準備します。まだの方は1つ前の記事を参照してくださいね。

環境変数としてAPIシークレットを NOTION_API_SECRET に、データベースIDを DATABASE_ID にセットしておきます。

次にNotion APIをJavaScriptから使うためのSDKを依存パッケージに追加します。

インストールにはNode.js バージョン14以上が必要です。

ここまで来ればあとはゴリゴリとコードを書くだけです。

手前味噌ですが、下記2つの私のPRを参考にして書いてみてください。

2つ目のPRで blog/[slug].tsxgetStaticPaths() メソッドの処理を公式APIに切り替えています。

これは Next.js ではISRのために、 事前に [slug] がどんな値を取り得るかを getStaticPaths() メソッドで教えてあげる必要があるためです。

getStaticPaths() で返した値以外のURLにアクセスすると当然エラーになってしまうので注意してくださいね。

もうひとつヒントとして、Vercel に反映する前に先にローカルで yarn build を実行することをおすすめします。

yarn dev では動いているのに Vercel でのビルドでエラーになることがあるからです。

以上です。

このエントリでは、Notionブログで記事の一覧取得を公式APIに切り替える方法を説明しました。

もしわからないところがあれば、わかる範囲でお答えしますので気軽に私のTwitterアカウントまでご連絡くださいね。