Next.js製WebサイトのCMSをNotionに変更

概要

Next.js製のWebサイトに対して、Notionのデータベースの内容をAPIで取得して表示する系統を追加しました。

目的

以前の構成は以下のようなものとなっていました。

• Next.jsで構築
• Vercelにデプロイ
• コンテンツはMarkdownで書き、Webサイトのリポジトリに含め、Next.jsでSSGする

この構成によるデメリットとして以下が発生しており、それらの解消を目的としてNotionをCMSとして使うパターンに変更しました。

• 記事を更新する度にGitでコミットしてプッシュし、Vercelのデプロイを行う必要がある
• 記事は何らかのエディタを使ってMarkdownで書く必要があり、普段の社内ドキュメントの作成に使っているNotionと比較して執筆体験が悪い

実施作業

1. Notion APIの調査
   • Node.jsでNotion APIを利用するためのSDKの利用方法の調査を行いました。
2. Notion側のデータベース構造の設計
   • WebサイトのCMSとして使うために必要なカラム・データ型を検討しました。
3. 画像保管用のAmazon S3バケットの構築
   • Notionにアップロードされた画像のURLはAPIで得られますが、有効期限のあるAmazon S3のPresigned URLのため、単にそれを表示するだけだと、有効期限を過ぎた時点から画像が表示できなくなってしまう問題が発生します。それを解消すべく、Notionから得られた画像を自社で構築したS3バケットにコピーして、そのデータを表示する体制を構築しました。
4. Webサイトのコンテンツ表示系統を変更
   • NotionのデータをAPIで取得して表示するように変更しました。
5. Next.jsのキャッシュを手作業で期限切れにする系統を追加
   • CMSで行なった変更を即座に反映させたいケースを想定し、手作業でキャッシュを期限切れにすることができる系統を追加しました。

本改善の結果

執筆の抵抗を下げるような改善を行なった結果、コンテンツの作成数を増やすことができました。発信する情報も広報寄りで会社の中心サービスそのものではなかったため、優先度が下がりがちでしたが、その中でも時間を見つけて取り組みやすい体制に持っていくことができました。

所感

Notionは表現力豊かで強力なドキュメント作成ツールですが、その分データ構造が複雑です。また、今回特に注意した画像周りの有効期限の問題に加え、APIの呼び出し数の制限なども考慮する必要があり、シンプルに見えて意外と工数がかかります。

一方で、うまく作ることができれば記事執筆の抵抗感を大きく下げて発信活動の効率を高めることができると思いますので、要所で使っていきたいパターンです。