Udemy「NotionAPI + Next.js + TypeScript でブログ開発〜デプロイまで」修了
藤本拓真さんがUdemyで公開している「【NotionをCMSに】NotionAPI + Next.js + TypeScript でブログ開発〜デプロイまで」というコースを修了しました。
https://www.udemy.com/course/notion-next-blog/記事はNotionのデータベースで管理し、ブログの実装はNext.js+TypeScriptで行うというコースです。 単にNotionを活用したブログを初めたいだけならnotion-blog-nextjsを使用すればそれで良いのですが、自分好みのデザインや仕様にしたい場合には結局弄る必要性が出てきます。ちょっとしたことならそれで良いと思いますが、大幅に変えたい場合は自分で1から書いたほうが納得の行く物になるかもしれません。今回のコースはそんな時にとっかかりになる良いコースだと思います。
Notionはページに記述した内容をBlockという単位で細かく管理しており、APIで取得したデータからNotionでの見た目を再現しようと思うと、Blockごとにheading_1やparagraphといったtypeを判別してそれぞれにhtmlのタグを付けていく必要があります。notion-blog-nextjsではreact-notion-renderというライブラリでそれを行っています。今回のコースでは、講師の藤本さんが開発したnotion-block-rendererというライブラリでそれを行います。
基本的な使い方はどちらも同じで、APIで取得したBlockの配列を渡すだけです。どちらのライブラリもhtmlタグを割り当てて出力するだけなので、Notionでの見た目を完全に再現するにはスタイルを自分で当てる必要があります。 出力される要素の内容やライブラリが持つ機能には違いがあるので、どちらのライブラリを使用するかは好みの問題だと思います。コースではnotion-block-rendererが使用されますが、react-notion-renderで置き換えることも可能です。 個人的には、見た目の都合で入れることが多い空ブロックにちゃんと要素を割り当ててくれるnotion-block-rendererの方が好みです。react-notion-renderは空ブロックを無視してるっぽいです。1年間更新されていないのでAPI側の変更が原因の可能性もありますが…
ちなみに、ページの内容をMarkdownに変換するnotion-to-mdというライブラリも存在します。
コースの注意点としては、Next.js 12が使用されているコースなので、今から受講する場合は12で合わせるか13のApp Routerを用いて自分なりに書いていくかを決める必要があります。 私は12のコードを見ながら13で自分なりに書いていったほうが勉強になりそうだと思ったのでそのようにしました。 Next.js 13かつnotion-block-rendererを使用して実装する場合、Next.jsのドキュメントに書いてあるようにサーバーコンポーネント上での使用については気をつける必要があります。
notion-block-rendererをそのまま使うのではなくクライアントコンポーネントでラップしないとエラーが発生すると思います。 react-notion-renderの場合はラップせずそのまま使用しても問題ありませんでした。
以下は今回の学習で書いた物です。
講師がコースで用いてGitHubに置いている物(notion-next-blog-course)はNext.js 12が使用されているので、Next.js 13を使用した物はこのコースを受講する人の参考程度にはなるかもしれません。
違いとしてはNext.js 13を使用したことといくつか型の定義を改善したくらいなので、実際にブログを運用していくのであればもっとちゃんと作り込む必要があると思います。