概要

このブログはDecupCMSを使用しているが、Notionで下書き→投稿ページにコピー、という運用になってしまい記事はたまっているのにコピーがめんどくさくなってしまったので、NotionAPIを利用しNotionをCMSとして利用する方式に変更する。

https://zenn.dev/jinku/articles/722e8f93e87111

https://zenn.dev/naginagi124/articles/ddd039003004f8

https://tech.kikagaku.co.jp/entry/2024/01/24/090000

NotionAPI_1

NotionのAPIは、https://www.notion.so/my-integrationsから作成する。サイトのトークンをコピー。APIについては、Postmanに公式のPublicAPIがあるのでそちらをフォークして使用するのがよい。

データベースの一覧(POST：Sort a Database)を取得→ページの取得(GET：Retrieve block children)という流れでデータを取得することになりそう

データベースの一覧の取得はGetではなくPostである点に注意。Getではプロパティしか取得できない。Postで一覧を取得するので、ソート順などを作成日順に取得するのがよさそう

ページの取得については、取得上限がある（多分100件）。has_moreがtrueの場合は続きがあるので、next_cursorの値をstart_cursorに指定し、has_moreがfalseになるまで取得すればよい。

NotionAPI_2

NotionAPIのページの返却値はマークダウンではないので、マークダウンに変換するライブラリ「notion-to-md」必要がある。

また、NotionAPIで返却される画像URLは、期限付きであるため何も対策していない場合はリンク切れを起こす（1時間）ので下記のような何かしらの対策が必要になる。

• DataURIスキームを使う
• 期限切れを判定して再取得
• publicフォルダに置く
• 別の場所に置く
• 1時間に1回ビルドする

https://blog.35d.jp/2021-10-08-notion-api-image-expire-date

https://alpacat.com/posts/solution-to-image-url-expiration

notionhq

https://www.npmjs.com/package/@notionhq/client

notionhqを使用することで、typescript側から簡単にデータ取得可能

上記をnotion-to-markdownに渡すことで、ページIdのみ指定すれば本文もとれる

Filter

https://developers.notion.com/reference/post-database-query-filter

https://developers.notion.com/reference/post-database-query-filter#multi-select-filter-condition

Ogp

https://zenn.dev/bizlink/articles/5ce2f63887e5a3

今回はapiなので、公式の方法でogp設定ができた。

画像をSuspenseしたい

が、うまくいず裏側スケルトンにして終わった。悔しい

https://github.com/vercel/next.js/discussions/50617

notion.blocks.retrieveで型がうまく取れない

スクラップのタイトルと更新日を取得するためにnotion.blocks.retrieveでブロック情報を取得するも、型の推論がうまくいかずNextJSのコンパイルエラーとなりハマる。

なんでだ！

Netlifyへのデプロイ

デプロイするホスティングサービスについて、firebase hostingでも良いが、app routerに対応していないという情報という情報があり、前と変わらずNetlifyにする。なお、SSRなどを使えるようにするプラグインがあるらしい。(https://wp-kyoto.net/netlifynext-jsssrserverless-mode)

環境変数も忘れずに登録(environment variables)

参考

https://qiita.com/benjuwan/items/4a2f175b648791412203#おまけ-firebase

https://mottox2.com/posts/280

おさらい

https://zenn.dev/akino/articles/78479998efef55

ogp画像がついていない

デプロイをしたところ、画像が表示されていなかった。

フォントの設定の仕方に注意

ドメインの設定

https://jamstack.jp/blog/how_to_set_custom_domain/

ここを参考に設定。

GoogleAnalytics

NEXT14移行であれば、割と簡単に導入可能。

1npm install @next/third-parties@latest next@latest

https://nextjs.org/docs/messages/next-script-for-ga

https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries

デプロイ方法変更

DecupCMSではなくなったため、PUSHがされないのでデプロイ方法を変更する必要がある

https://qiita.com/nwtgck/items/e9a355c2ccb03d8e8eb0

NOTIONからAPIが実行できるようになったが、有料会員のみなので今回はスルー。

と思ったが、別にNETLIFYの管理ページでポチっとすればいいか、と思ったのでやらないことにする