Next.jsとNotionAPIでブログを作り直した

2022/07/04

最終更新：2023/04/12

なぜ作り直したのか

大きく2点の理由がありブログを作り直すことにしました。

過去に作ったブログはmicroCMSと連携させてmicroCMS上で記事を書いていました。執筆体験は良かったのですが、自分の怠惰もあってなかなか記事を書くことができずついに書くぞ！となった時には普段CMSを触らない自分はログインしてからどうやって書くんだっけ…となってしまっていました。

じゃあどこに書けばいいんだよという話ですが、業務でもプライベートでも日常的に使用しているNotionであれば使い慣れてるしハードル下がるのでは？と思ったのがきっかけです。

前回作った時から2年ほど経っていたので、自分の技術力も以前よりは上がっているだろうということで腕試しをしたくなっていました。

Nextはメジャーアップデートがされていたので気になっていたし、NotionAPIも知っていたら業務の方で何か効率化したい時に使えそうだなと思ったり。

あと以前のブログは就活時代の時に作ったので、デザインも学生感を感じていてリニューアルしたかった（？）。

JAMStackな構成にしていて、ISRしています。

前回はchakra-uiを使ってましたが、ダークモードの実装とかデザインシステムみたいなものも自分で用意したくなっちゃったのでスタイリングには使い慣れているstyled-componentsを選びました。

使い始めてみるとスタイリングが当たらず困りました。

解決策としては、styled-componentsのSSR対応をする必要があり、_document.tsxで処理を書く必要がありました。

また、next.config.jsの方にもoptionを書く必要があります。

ここら辺は最初に公式のexampleを見ておけばよかったなーと反省。

ISRさせる際に、fallbackをtrueにしていたらビルドできない事象が発生しました。

デバッグしてpropsがundefinedになっていることに気づき、こちらの記事を参考にrouter.isFallbackを参照することで解決しました。

公式が提供してるsdkの型定義がリテラル型なのに交差キーがなかったりと完全なものではなく、ReturnTypeやExtractでどうにか参照しようとしたり型ガードを用意したりしようとしたのですが大変だったので最終的に自前で定義し直しました。

Issueも立てられていたので今後対応されることに期待。

これらが解決されているサードパーティ製のreact-notion-xを使おうか悩みましたが、自前で細かい所をカスタマイズしたかったのとがっつりコードを書きたい気分だったので使いませんでした。パフォーマンス部分やSEOなどが最適化されているそうなので、必要に応じて検討していきたい。

アウトプットの習慣づけをがんばります。

lighthouseがほぼ満点でした。Nextすごい。