tips chipsは筆者(@mogamin3)が日々の開発の中で詰まったことや、有益に感じた情報のメモを公開するページです。

普段とっているメモのうち、一般に公開しても問題なく、かつ有益であると思われるものを掲載しています。

そのため、筆者の状況次第で扱う分野に偏りが出たり、更新頻度が上がったり下がったりすることが見込まれます。

また、公開している情報については、ある程度確認してはいますが、不正確な情報や表現が含まれる可能性があります。お気づきの際には筆者まで連絡をいただけると助かります。

技術スタックについて

このサイトの技術スタックは以下の通りです。

• フロントエンド： Next.js 13 (with app directory)
• CSS Utility: Tailwind CSS
• バックエンド： Notion
• インフラ： Vercel

ISR(Incremental Static Regeneration)を利用してNotion APIの返してくる値をキャッシュし、保持しています。

普段、コードを書くときに気になったことをNotionにメモしておく癖があるので、そのDBをそのまま参照し、公開用のフラグを入れた記事だけがこのサイトに表示されるようになっています。

この構成にすることで、サイトを更新するという手間がほぼゼロ（普段やっていること＋ちょっとだけ文体を整えるとかくらい）で済むので気に入っています。

元々、Next.js 13の練習の題材としてちょうどいいバックエンドがなくてNotion APIを叩き始めたところから始まったので、まだまだコードは汚いですが（言い訳）このサイトのソースコードはGitHubで公開しています。

https://github.com/uutarou10/tips-chips

NotionのBlockがJSON形式で帰ってくるという仕様になっており、それをDOMに再構築するというのが数も多いため地味に面倒でした。（参考 Notionのブロック仕様）
まだ完全な対応はできておらずembedなど一部のブロックは無視されるような実装になっていますが、参考になる部分ももしかしたらあるかもしれません。

以下の記事に詳しい内容を書いたのでもしよろしければ合わせてご覧ください。